HTML5 audio start playing delay

Question

My current implementation of MP3 audio playback works great, however in Chrome on an Android device there is a delay between the 'canplay' event being triggered (which starts a visual playback progress bar) and when the audio is actually heard through the device. This results in the visual progress bar being out of sync slightly.

Is there a more reliable way of detecting when audio playback commences than using 'canplay'?

My logic is as follows:

var audio = new Audio();
audio.src = 'something.mp3';
audio.play();
audio.addEventListener('canplay', function() {
    // audio playback commences now.
    // start progress bar animation.
});

closure closure · Accepted Answer · 2014-04-25T11:27:32

You may use timeupdate event to verify the currenttime of playback. Here is snippet from MDN documentation

timeupdate The time indicated by the element's currentTime attribute has changed.

Refer: https://developer.mozilla.org/en-US/docs/Web/Guide/Events/Media_events

HTML5 audio start playing delay

1 Answers