Starting marquee on audio play

Question

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

I am using the following code to play the 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 set this audio file on autoplay, and let the marquee start at the time the page loads(which is the default setting) but this works nice on high speed networks, for low speed networks the problem that arises is that the loading of the audio content gets delayed and hence the marquee text starts running ahead of the audio. which is not cool

Please advice me how can I accomplish a solution to this problem via javascript ?

Answer 1

I am not sure how you start your marquee-tag, but you should wait for the play - Event of your audio - element to do so. Autoplay fires this event when the element starts playing.

Note that the marquee-tag is deprecated, i would use css-transitions instead, which can be easily triggered to start by adding a specific className.

Give your media-Element an id, so you can easily access it with 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-elements on the W3C-Page with a description of when they are fired. This gives you an overview about how you can interact with media-elements in javascript.

Answer 2

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

Put your song title in a span initially:

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

Then on page load 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);
}