Geek Answers Handbook

HTML5 audio: how to quickly stop and restart a clip?

See chapter. I try to play an audio file 4 times in a row, every 300 milliseconds. However, the clip is longer than 300 ms, so it ignores new play requests until the clip is played. I am looking for a way to stop and restart a clip every 300 ms.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html;charset=UTF-8" /> </head> <body> <audio id="note0440"><source src="0440.a4.wav" type="audio/wav"></audio> <script type="text/javascript"> function playNote (loop) { var n = document.getElementById("note0440") if (loop > 4) return n.volume = 0.05 // n.currentTime = 0 n.pause() n.play() setTimeout("playNote("+(loop + 1)+")", 300) } </script> <div style="margin:50px"><button onclick="playNote(1)">Play Note</button></div> </body> </html>

This does not work. It does not stop or restart if n.currentTime = 0 .

There is a WAV file here if you need it for testing: http://popstrip.com/misc/0440.a4.wav

+7
source share
3 answers

where ever you call a stop, just do the following in order -

  n.pause() n.currentTime = 0 n.play()
+17
source

from section 4.8.10.6 specification

MEDIA. duration Returns the length of the media resource, in seconds, assuming that the start of the media resource is at zero.

Returns NaN if duration is not available.

Returns infinity for unlimited streams.

MEDIA. currentTime [= value] Returns the official playback position in seconds.

It can be set to go to the set time.

Will throw an InvalidStateError exception if no media resource is selected or if there is a current media controller.

Thus, the specification does not allow you to search for less than one second. However, different browsers will implement it differently (of course). Some browsers may support this, but making it work reliably in all deployed browsers today will be a huge pain in the ass. Assuming you can issue millisecond requests, another problem is that the js interpreter will not be able to execute your request on time, i.e. Claim processing takes longer than the value of the search, which will lead to other difficulties.

My advice would be for you to abandon the html5 approach for now if you really need less than one second of detail for your requests, and use a plugin or some code that is executed initially on the host, if at all possible.

+3
source

This is a bit of a hack, but I do this:

 <audio src="blah.wav" type="audio/wav" preload="preload" id="blah0"></audio> <audio src="blah.wav" type="audio/wav" preload="preload" id="blah1"></audio> <audio src="blah.wav" type="audio/wav" preload="preload" id="blah2"></audio> <audio src="blah.wav" type="audio/wav" preload="preload" id="blah3"></audio> var audioStore = [ document.getElementById('blah0'), document.getElementById('blah1'), document.getElementById('blah2'), document.getElementById('blah3'), ]; var n = 0; function playBlah () { // Cycle through the clips audioStore[n].play(); n = (n+1)%4; }

Do it as much as you need. Bonus: you don’t lose the tail of your sound, so you can afford to use the atmosphere (games sometimes want sounds to overlap, for example).

There are more elegant ways to do this. I would actually write a function that takes the name of the audio file, the id line (for example, blah in the example) and several elements for cyclic transition (maximum simultaneous value for this sound) and returns a function that can be called to play the sound. This function will also add elements to the page.

Finally, you probably should use at least MP3 and Wav to get the biggest x-browser compatibility spread, the more formats are better, since the wave is a lot of bandwidth.

Hope this helps. (I used this technique in Chrome, Firefox, Ice Weasel) on Win, Mac OSX and Linux.

-one
source

More articles:


All Articles