Start highlighting in an audio game

Question

I am trying to find a way to set a time tag in a marquee tag in html. The whole idea is to display the subtitles of the song in marquee format and start highlighting only when the user clicks to start the audio.

I am using the following code to play an audio file (in html-5)

<audio controls="controls" loop="loop"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Your browser does not support the audio element.Please use chrome. </audio> 

What I am doing is setting this audio file in auto play mode and letting the tent launch at the moment the page loads (which is the default setting) but it works well in high-speed networks, for low-speed networks there is a problem that the audio content loading is delayed , and therefore the selection text is highlighted before the sound. what's not cool

Please advise me how can I solve the problem using javascript?

Answer 1

I'm not sure how you start your marquee trick, but you should wait for the play event of your audio element. Autoplay fires this event when an element starts playing.

Note that the marquee -tag parameter is deprecated, instead I would use css transitions that can be easily triggered by adding a specific class name.

Give the media element an identifier so that you can easily access it using javascript:

 <audio id="audio" controls="controls" loop="loop"> <source src="song.ogg" type="audio/ogg" /> <source src="song.mp3" type="audio/mpeg" /> Your browser does not support the audio element.Please use chrome. </audio> 

And the JavaScript code:

 var audioEl = document.getElementById("audio"); audioEl.addEventListener('play',function(){ //start your marquee in here }); 

You can find all the events that are supported by media items on the W3C page , with a description of when they are fired. This gives you an overview of how you can interact with media elements in javascript.

Answer 2

http://jsfiddle.net/kykMs/1/

First enter the song name in span :

 <span id="song">Artist - Song Title</span> 

Then when loading the page, replace it with marquee :

 window.onload = function() { var elem = document.getElementById("song"); var marq = document.createElement('marquee'); marq.innerHTML = elem.innerHTML; document.getElementById("player").removeChild(elem); document.getElementById("player").appendChild(marq); }