Html5 Audio Latency Accuracy

Question

I work with HTML5 audio. For my use case, I need to listen to the duration of the sound, and when it crosses a certain threshold, pause the sound. So something like:

$(audio).bind('timeupdate', function() { if (audio.currentTime >= 10){ audio.pause(); } }); 

What I notice is that by the time my audio.currentTime handler is audio.currentTime is around 10.12878 , 10.34023 , etc., and therefore, a little extra sound is played before pausing it.

Another question seems to have documented the same problem. The question is dated 2012, so I wonder if the current state has improved.

If not, are there other ways to do this with greater accuracy? I have not worked with audio before, and I am very grateful for the help.

Answer 1

So, I explored my way through this problem and developed the following conclusions:

1) HTML Audio is not a cube for such a scenario. Its very limited API and does not provide subtle audio control. The Web Audio API is the way to go.

2) Web Audio API is not the easiest thing to read / understand and may be poorly implemented in different browsers. Better to find a pretty wrapper around it that returns to web audio or flash if web audio is not available in the browser.

3) Some wrappers exist like howler.js , sound.js and SoundManager2 . Turning off the three SoundManager2 seems to work best at first thought. The 4G demo at http://www.schillmania.com/projects/soundmanager2/demo/api/ effectively solves a very similar problem, as in the script in question.

Update: SoundManager2 does not actually support web audio api. From technotes :

SM2 does not currently use the Webkit API. This may be experimentally or more formally added at some point in the future when the API is more universally supported.

Answer 2

According to MDN documentation timeupdate event

The frequency of the event depends on the system load, but will be between 4 Hz and 66 Hz (provided that the event handlers do not require more than 250 ms to run). User agents are advised to change the frequency of the event based on the system load and the average cost of processing the event each time, so user interface updates are not more frequent than the user agent can comfortably handle video decoding.

To pause sound at 10.0nnnnn , you can use requestAnimationFrame ; if condition this.currentTime > 9.999 to call .pause() before reaching 10.000000 . Note. 9.999 can be adjusted in the range from 9.9 to 9.99750 , which can also periodically pause the sound at 9.99nnnn ; that is, until reaching 10.0

 var requestAnimationFrame = window.requestAnimationFrame; var audio; function trackCurrentTime() { // `this` : `audio` console.log(this.currentTime); if (this.currentTime > 9.999) { this.pause(); } else { requestAnimationFrame(trackCurrentTime.bind(this)) } } var request = new XMLHttpRequest(); request.open("GET", "/path/to/audio", true); request.responseType = "blob"; request.onload = function() { if (this.status == 200) { audio = new Audio(URL.createObjectURL(this.response)); audio.onpause = function(e) { console.log(e.target.currentTime) } audio.load(); audio.play(); trackCurrentTime.call(audio); } } request.send(); 

jsfiddle http://jsfiddle.net/Lg5L4qso/7/

Answer 3

HTML Audio is not a cube for such a scenario. Its very limited API and does not provide subtle audio control. The web audio API is the way to go.