For my latest project, I've been tasked with creating a karaoke application using javascript. The challenge is to synchronize the lyrics with the song as it plays.
Here's a snippet of my HTML code:
<div id="lyric"></div>
<audio id="audioPlayer" controls>
<source src="http://supjs.fr/DEV2018/myKaraoke/music/LOR.mp3" type="audio/mpeg">
</audio>
The lyrics are stored in a text file and look something like this:
[00:00.00]Fanuilos heryn aglar
[00:10.00]Rîn athar annún-aearath
... (more lyrics)
Next, let's take a look at the javascript part:
window.onload = function(){
var track = document.getElementById('audioPlayer');
track.ontimeupdate = function(){
console.log(this.currentTime);
if (this.currentTime > 0 && this.curentTime < 9){
getRSS(0);
}
};
};
function getRSS(i) {
var rss = new XMLHttpRequest();
rss.open('GET', 'lyrics.txt', false);
rss.send(null);
var ligne = rss.responseText.split(/\n/g);
var linkRss = ligne[i];
document.write(linkRss);
}
However, I'm facing an issue where the lyrics display but the music stops and the audio disappears. I'm puzzled and unsure what could be causing this glitch. Can anyone provide some insight or help troubleshoot?