Nil Nil - 1 month ago 9
Ajax Question

javascript current time not working

I have a project to do, make a karaoke in javascript. When the song goes, the lyrics has to follow.

My code html :

<div id="lyric"></div>
<audio id="audioPlayer" controls>
<source src="http://supjs.fr/DEV2018/myKaraoke/music/LOR.mp3" type="audio/mpeg">
</audio>


Lyrics in text file:

[00:00.00]Fanuilos heryn aglar

[00:10.00]Rîn athar annún-aearath

[00:20.00]Calad ammen i reniar

[00:30.00]Mi'aladhremmin ennorath

[00:40.00]A Elbereth! Gilthoniel!

[00:50.00]I chîn a thûl lin míriel

[01:00.00]Fanuilos! Le linnathon

[01:09.00]Ne ndor haer that i aearon

[01:20.00]A elin na gaim eglerib

[01:30.00]Ned în ben-anor trerennin

[01:39.00]Si silivrin ne pherth 'waewib

[01:48.00]Cenim lyth lthílyn thuiennin

[01:58.00]A Elbereth Gilthoniel

[02:08.00]Men echenim sí derthiel

[02:17.00]Ne chaered hen nu'aladhath

[02:27.00]Ngilith or annún-aearath

And javascript :

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();
console.log("hello");
rss.open('GET', 'lyrics.txt', false);
console.log("hello1");
rss.send(null);
console.log("hello");
var ligne = rss.responseText.split(/\n/g);/* Stock tout le fichier dans la variable (tableau)*/
console.log("hello");
var linkRss = ligne[i];
document.write(linkRss);

}


And it does not work, the line appears but the music stop and the audio disappear, I don't understand what is happening can someone help me ?

Ole Ole
Answer

Your problem is, that you're overwriting your page with the document.write(linkRss); statement.

You have to append text to your div element, not to your whole document.

document.getElementById('lyric').innerHTML += linkRss;

Please notice that you're mixing time based code with asynchronous code, which will be tricky to handle and impossible to run with the intended behaviour.