CODEWITHSUNDEEP
jqueryhtmlaudiohtml5-audio
ayk
ayk

Reputation: 1340

Problems with stopping html5 audio and restarting playback

if i stop audio playback with .pause() method then set .currentTime=0 and finally call .play() method again i hear a scratch... Sometimes it sounds like the playback starts at position 1sec, but should start at 0! My Code:

HTML:

<audio id="sound" preload="auto" autobuffer>
    <source src="a.mp3" />
</audio>

JS:

var sound = $('#sound')[0];

function playSound(){
    sound.pause();
    sound.currentTime = 0;
    sound.play();
}

If i call the function eventdriven, sometimes the above explained error occures.

Any ideas? Thx.

Upvotes: 2

Views: 6624

Answers (2)

Tabetha Moe
Tabetha Moe

Reputation: 480

Try this... You aren't actually calling the event in your code. You call the event, a whole new world opens up to you in terms of what you can do with the object...

What I am doing here is starting a timer when the user clicks the audio element and it starts playing. Then, every 1 second, I am checking the time to see if 45 seconds has elapsed. If it has, this is the trial version of the audio I am showing off and will reset the currentTime to 0 and then pause the video so it doesn't keep looping. I then clear the interval.

The difference between what you are doing and what I am doing is all in that little 'e' in the function parameters. If you do put console.log(e); somewhere in your script and then open up Firebug or any other web based console, you can click that value that is returned and see all the information you can access from the event object. From there, you can pretty much make the audio player make you a cup of coffee... Ok, maybe not that, but you can make it bow to your will.

$('audio').click(function(e) {
    window.setInterval(function(){ 
      if(e.currentTarget['currentTime'] > 45){ 
         $(e.currentTarget['currentTime'] = 0); 
         $(e.currentTarget.pause()); 
         clearInterval(); 
       } 
     }, 1000); 
});

========================================================================

Upvotes: 0

RvdK
RvdK

Reputation: 19790

Code looks good. Have you tried in different browsers? HTML5 is not final yet and browser vendors are working on the implementations. Maybe a bug?

Upvotes: 2

Related Questions