Question

I have an html5 audio player with a 3 seconds audio sample.
Is it possible to use the timer/counter from this audio player?
Because I would like to add text or images on individual seconds.

I made an (not working example) with Javascript. But I think it would be better to use jQuery so i can use the .append function.

JsFiddle here

HTML:

<audio id="audio_2" controls="controls">
<source src="http://www.pachd.com/sfx/metallic-clonks.wav">
</audio>

    <div id="div1"></div>

    <div id="div2"></div>

    <div id="div3"></div>     

JS:

document.getElementById('audio_2').addEventListener('addingthings', function() {
if (this.currentTime == 1) {
    document.getElementById('div1').innerHTML = 'second second';
}
if (this.currentTime == 2) {
    document.getElementById('div2').innerHTML = 'second second';
}
if (this.currentTime == 3) {
    document.getElementById('div3').innerHTML = 'third second';
}

});

CSS:

#audio_2
{
height: 20px;
width: 200px;
float: left;
}

#div1{
width: 80px;
height: 30px;
background: lightblue;  
color: blue;  
border-bottom: 5px solid blue;    
float: left;
margin-left: 5px;
}

#div2{
width: 80px;
height: 30px;
background: lightblue;  
color: blue;  
border-bottom: 5px solid blue;
float: left;
margin-left: 5px;    
}

#div3{
width: 80px;
height: 30px;
background: lightblue;  
color: blue;  
border-bottom: 5px solid blue;
float: left;
margin-left: 5px;   
}

My question to you is: Is it possible to use the timer/counter of the HTML audioplayer? If yes, how can I use jQuery to add if statements to the individual seconds?
Thank you in advance

Answer 1

You might want to take a look at the HTML5 media elements events:
http://dev.w3.org/html5/spec/media-elements.html#mediaevents (the ontimeupdate event sounds interesting for you!).

You also need to round the currentTime because the onTimeUpdate does not fire in 1-second cycles.

Math.floor(this.currentTime) == 1

Take a look at this working example:

http://jsfiddle.net/t946k/1/