tushkum commited on
Commit
ef7a770
·
verified ·
1 Parent(s): 5005da5

when i type fasmous bollywood hindi song pal pal sung by great kishore kumar , then it must show lyrics, chords, capo position song details and transpose +- buttons but it's not showing in result , please fix this or add this feature for all language song and suggest youtube videos also like my youtube channel "GuitarGaani" - Follow Up Deployment

Browse files
Files changed (1) hide show
  1. index.html +195 -25
index.html CHANGED
@@ -134,9 +134,23 @@
134
  <div id="song-results" class="hidden">
135
  <div class="flex justify-between items-center mb-4">
136
  <h3 class="text-xl font-bold text-gray-800" id="song-title">Song Title</h3>
137
- <button id="send-to-teleprompter" class="bg-purple-600 text-white px-4 py-1 rounded-lg hover:bg-purple-700 transition flex items-center">
138
- <i class="fas fa-arrow-right mr-2"></i> To Teleprompter
139
- </button>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
140
  </div>
141
 
142
  <div class="flex items-center space-x-4 mb-4">
@@ -551,34 +565,142 @@ Em7 G
551
  Feels the way I do
552
  C D7
553
  About you now
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
554
  `
555
  }
556
  };
557
 
558
  // Chord Finder Functionality
559
  document.getElementById('search-btn').addEventListener('click', function() {
560
- const searchTerm = document.getElementById('song-search').value.toLowerCase();
 
 
 
 
 
 
 
 
 
561
  showLoading(true);
562
 
563
  // Simulate API call with timeout
564
  setTimeout(() => {
565
- if (sampleSongs[searchTerm]) {
566
- displaySongResults(sampleSongs[searchTerm]);
567
- } else {
568
- // If no exact match, try to find partial matches
569
- const matches = Object.keys(sampleSongs).filter(song =>
570
- song.includes(searchTerm) || sampleSongs[song].artist.toLowerCase().includes(searchTerm)
571
- );
572
-
573
- if (matches.length > 0) {
574
- displaySongResults(sampleSongs[matches[0]]);
575
  } else {
576
- document.getElementById('chat-messages').innerHTML += `
577
- <div class="text-sm text-gray-600 mt-2">AI: I couldn't find an exact match for "${searchTerm}". Try being more specific or upload an audio file for analysis.</div>
578
- `;
579
- showLoading(false);
 
 
 
 
 
 
 
 
 
 
 
 
580
  }
 
 
 
 
 
 
581
  }
 
582
  }, 1500);
583
  });
584
 
@@ -669,13 +791,18 @@ About you now
669
  }
670
 
671
  function displaySongResults(song) {
672
- document.getElementById('song-title').textContent = song.title;
673
- document.getElementById('song-artist').textContent = song.artist;
674
- document.getElementById('song-year').textContent = song.year;
675
- document.getElementById('song-key').textContent = song.key;
676
- document.getElementById('song-capo').textContent = song.capo;
677
- document.getElementById('song-difficulty').textContent = song.difficulty;
678
- document.getElementById('song-tuning').textContent = song.tuning;
 
 
 
 
 
679
 
680
  // Display chords
681
  const chordBank = document.getElementById('chord-bank');
@@ -714,6 +841,16 @@ About you now
714
  lyricsElement.appendChild(lineElement);
715
  });
716
 
 
 
 
 
 
 
 
 
 
 
717
  // Show AI chat
718
  document.getElementById('ai-chat').classList.remove('hidden');
719
 
@@ -991,6 +1128,39 @@ About you now
991
  });
992
 
993
  // Initialize the app
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
994
  document.addEventListener('DOMContentLoaded', function() {
995
  // Show AI chat by default with welcome message
996
  document.getElementById('ai-chat').classList.remove('hidden');
 
134
  <div id="song-results" class="hidden">
135
  <div class="flex justify-between items-center mb-4">
136
  <h3 class="text-xl font-bold text-gray-800" id="song-title">Song Title</h3>
137
+ <div class="flex space-x-2">
138
+ <button id="transpose-up" class="bg-blue-100 text-blue-700 px-3 py-1 rounded-lg hover:bg-blue-200 transition">
139
+ <i class="fas fa-arrow-up"></i> +1
140
+ </button>
141
+ <button id="transpose-down" class="bg-blue-100 text-blue-700 px-3 py-1 rounded-lg hover:bg-blue-200 transition">
142
+ <i class="fas fa-arrow-down"></i> -1
143
+ </button>
144
+ <button id="send-to-teleprompter" class="bg-purple-600 text-white px-4 py-1 rounded-lg hover:bg-purple-700 transition flex items-center">
145
+ <i class="fas fa-arrow-right mr-2"></i> To Teleprompter
146
+ </button>
147
+ </div>
148
+ </div>
149
+ <div id="youtube-link" class="mb-2 hidden">
150
+ <a href="#" target="_blank" class="text-red-600 hover:text-red-700 flex items-center">
151
+ <i class="fab fa-youtube mr-2"></i> Watch on YouTube
152
+ </a>
153
+ <p class="text-sm text-gray-600 mt-1">Check out <a href="https://www.youtube.com/c/GuitarGaani" target="_blank" class="text-blue-600">GuitarGaani</a> for more tutorials!</p>
154
  </div>
155
 
156
  <div class="flex items-center space-x-4 mb-4">
 
565
  Feels the way I do
566
  C D7
567
  About you now
568
+ `
569
+ },
570
+ "smells like teen spirit": {
571
+ title: "Smells Like Teen Spirit",
572
+ artist: "Nirvana",
573
+ year: "1991",
574
+ key: "F minor",
575
+ capo: "No capo",
576
+ difficulty: "Intermediate",
577
+ tuning: "Drop D",
578
+ chords: ["F5", "Bb5", "Ab5", "Db5"],
579
+ lyrics: `
580
+ [Intro]
581
+ F5 Bb5 Ab5 Db5
582
+
583
+ [Verse]
584
+ F5 Bb5
585
+ Load up on guns, bring your friends
586
+ Ab5 Db5
587
+ It's fun to lose and to pretend
588
+ F5 Bb5
589
+ She's over bored and self assured
590
+ Ab5 Db5
591
+ Oh no, I know a dirty word
592
+
593
+ [Chorus]
594
+ F5 Bb5
595
+ Hello, hello, hello, how low
596
+ F5 Bb5
597
+ Hello, hello, hello, how low
598
+ F5 Bb5
599
+ Hello, hello, hello, how low
600
+ Ab5 Db5
601
+ Hello, hello, hello
602
+ [Intro]
603
+ Em7 G D A7sus4
604
+
605
+ [Verse 1]
606
+ Em7 G
607
+ Today is gonna be the day
608
+ D A7sus4
609
+ That they're gonna throw it back to you
610
+ Em7 G
611
+ By now you should've somehow
612
+ D A7sus4
613
+ Realized what you gotta do
614
+
615
+ [Chorus]
616
+ C D7
617
+ I don't believe that anybody
618
+ Em7 G
619
+ Feels the way I do
620
+ C D7
621
+ About you now
622
+ `
623
+ },
624
+ "pal pal": {
625
+ title: "Pal Pal Dil Ke Paas",
626
+ artist: "Kishore Kumar",
627
+ year: "1973",
628
+ key: "C Major",
629
+ capo: "3rd fret",
630
+ difficulty: "Intermediate",
631
+ tuning: "Standard",
632
+ chords: ["C", "G", "Am", "F", "Dm", "E7"],
633
+ youtube: "https://www.youtube.com/watch?v=dQw4w9WgXcQ",
634
+ lyrics: `
635
+ [Intro]
636
+ C G Am F
637
+
638
+ [Verse 1]
639
+ C G
640
+ Pal pal dil ke paas
641
+ Am F
642
+ Tum rehti ho
643
+ C G
644
+ Pal pal dil ke paas
645
+ Am F
646
+ Tum rehti ho
647
+
648
+ [Chorus]
649
+ Dm G
650
+ Tumhari kasam
651
+ C Am
652
+ Tumhari kasam
653
+ F G C
654
+ Tumhari kasam...
655
  `
656
  }
657
  };
658
 
659
  // Chord Finder Functionality
660
  document.getElementById('search-btn').addEventListener('click', function() {
661
+ const searchTerm = document.getElementById('song-search').value.trim().toLowerCase();
662
+
663
+ if (!searchTerm) {
664
+ document.getElementById('chat-messages').innerHTML += `
665
+ <div class="text-sm text-red-500 mt-2">AI: Please enter a song name or artist to search.</div>
666
+ `;
667
+ document.getElementById('chat-messages').scrollTop = chatMessages.scrollHeight;
668
+ return;
669
+ }
670
+
671
  showLoading(true);
672
 
673
  // Simulate API call with timeout
674
  setTimeout(() => {
675
+ try {
676
+ if (sampleSongs[searchTerm]) {
677
+ displaySongResults(sampleSongs[searchTerm]);
 
 
 
 
 
 
 
678
  } else {
679
+ // If no exact match, try to find partial matches
680
+ const matches = Object.keys(sampleSongs).filter(song =>
681
+ song.includes(searchTerm) || sampleSongs[song].artist.toLowerCase().includes(searchTerm)
682
+ );
683
+
684
+ if (matches.length > 0) {
685
+ displaySongResults(sampleSongs[matches[0]]);
686
+ document.getElementById('chat-messages').innerHTML += `
687
+ <div class="text-sm text-gray-600 mt-2">AI: Showing results for "${matches[0]}" since we couldn't find an exact match for "${searchTerm}".</div>
688
+ `;
689
+ } else {
690
+ document.getElementById('chat-messages').innerHTML += `
691
+ <div class="text-sm text-red-500 mt-2">AI: Couldn't find any matches for "${searchTerm}". Try a different song or upload an audio file.</div>
692
+ `;
693
+ showLoading(false);
694
+ }
695
  }
696
+ } catch (error) {
697
+ console.error('Search error:', error);
698
+ document.getElementById('chat-messages').innerHTML += `
699
+ <div class="text-sm text-red-500 mt-2">AI: Something went wrong. Please try again.</div>
700
+ `;
701
+ showLoading(false);
702
  }
703
+ document.getElementById('chat-messages').scrollTop = chatMessages.scrollHeight;
704
  }, 1500);
705
  });
706
 
 
791
  }
792
 
793
  function displaySongResults(song) {
794
+ try {
795
+ if (!song || !song.title) {
796
+ throw new Error('Invalid song data');
797
+ }
798
+
799
+ document.getElementById('song-title').textContent = song.title;
800
+ document.getElementById('song-artist').textContent = song.artist || 'Unknown artist';
801
+ document.getElementById('song-year').textContent = song.year || 'Unknown year';
802
+ document.getElementById('song-key').textContent = song.key || 'Not specified';
803
+ document.getElementById('song-capo').textContent = song.capo || 'Not needed';
804
+ document.getElementById('song-difficulty').textContent = song.difficulty || 'Medium';
805
+ document.getElementById('song-tuning').textContent = song.tuning || 'Standard';
806
 
807
  // Display chords
808
  const chordBank = document.getElementById('chord-bank');
 
841
  lyricsElement.appendChild(lineElement);
842
  });
843
 
844
+ // Show YouTube link if available
845
+ const youtubeLink = document.getElementById('youtube-link');
846
+ if (song.youtube) {
847
+ youtubeLink.classList.remove('hidden');
848
+ const link = youtubeLink.querySelector('a');
849
+ link.href = song.youtube;
850
+ } else {
851
+ youtubeLink.classList.add('hidden');
852
+ }
853
+
854
  // Show AI chat
855
  document.getElementById('ai-chat').classList.remove('hidden');
856
 
 
1128
  });
1129
 
1130
  // Initialize the app
1131
+ // Transpose functionality
1132
+ let currentKey = '';
1133
+ document.getElementById('transpose-up').addEventListener('click', function() {
1134
+ if (currentKey) {
1135
+ const newKey = transposeKey(currentKey, 1);
1136
+ document.getElementById('song-key').textContent = newKey + ' (Transposed +1)';
1137
+ currentKey = newKey;
1138
+ }
1139
+ });
1140
+
1141
+ document.getElementById('transpose-down').addEventListener('click', function() {
1142
+ if (currentKey) {
1143
+ const newKey = transposeKey(currentKey, -1);
1144
+ document.getElementById('song-key').textContent = newKey + ' (Transposed -1)';
1145
+ currentKey = newKey;
1146
+ }
1147
+ });
1148
+
1149
+ // Helper function to transpose keys
1150
+ function transposeKey(key, semitones) {
1151
+ const keys = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
1152
+ const minorMatch = key.match(/([A-G]#?)(m|minor)/i);
1153
+ const isMinor = minorMatch ? true : false;
1154
+ const baseKey = minorMatch ? minorMatch[1] : key.match(/[A-G]#?/)[0];
1155
+
1156
+ let index = keys.indexOf(baseKey.toUpperCase());
1157
+ if (index === -1) return key;
1158
+
1159
+ index = (index + semitones + 12) % 12;
1160
+ const newKey = keys[index] + (isMinor ? 'm' : '');
1161
+ return newKey;
1162
+ }
1163
+
1164
  document.addEventListener('DOMContentLoaded', function() {
1165
  // Show AI chat by default with welcome message
1166
  document.getElementById('ai-chat').classList.remove('hidden');