Spaces:
Running
Running
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- 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 |
-
<
|
| 138 |
-
<
|
| 139 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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 |
-
|
| 566 |
-
|
| 567 |
-
|
| 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 |
-
|
| 577 |
-
|
| 578 |
-
|
| 579 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 580 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 581 |
}
|
|
|
|
| 582 |
}, 1500);
|
| 583 |
});
|
| 584 |
|
|
@@ -669,13 +791,18 @@ About you now
|
|
| 669 |
}
|
| 670 |
|
| 671 |
function displaySongResults(song) {
|
| 672 |
-
|
| 673 |
-
|
| 674 |
-
|
| 675 |
-
|
| 676 |
-
|
| 677 |
-
|
| 678 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 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');
|