Html5 Audio plays only once in my Javascript code

I have a dashboard web-app that I want to play an alert sound if its having problems connecting. The site's ajax code will poll for data and throttle down its refresh rate if it can't connect. Once the server comes back up, the site will continue working.

In the mean time I would like a sound to play each time it can't connect (so I know to check the server). Here is that code. This code works.

var error_audio = new Audio("audio/"+settings.refresh.error_audio);
error_audio.load();

//this gets called when there is a connection error.
function onConnectionError() {
   error_audio.play();
}

However the 2nd time through the function the audio doesn't pla开发者_运维问答y. Digging around in Chrome's debugger the 'played' attribute in the audio element gets set to true. Setting it to false has no results. Any ideas?

---

I encountered this just today, after more searching I found that you must set the source property on the audio element again to get it to restart. Don't worry, no network activity occurs, and the operation is heavily optimized.

var error_audio = new Audio("audio/"+settings.refresh.error_audio);
error_audio.load();

//this gets called when there is a connection error.
function onConnectionError() {
   error_audio.src = "audio/"+settings.refresh.error_audio;
   error_audio.play();
}

This behavior is expressed in chrome 21. FF doesn't seem to mind setting the src twice either!

---

Try setting error_audio.currentTime to 0 before playing it. Maybe it doesn't automatically go back to the beginning

---

You need to implement the Content-Range response headers, since Chrome requests the file in multiple parts via the Range HTTP header.

See here: HTML5 <audio> Safari live broadcast vs not

Once that has been implemented, both the play() function and setting the currentTime property should work.

---

Q: I’VE GOT AN AUDIOBUFFERSOURCENODE, THAT I JUST PLAYED BACK WITH NOTEON(), AND I WANT TO PLAY IT AGAIN, BUT NOTEON() DOESN’T DO ANYTHING! HELP!

A: Once a source node has finished playing back, it can’t play back more. To play back the underlying buffer again, you should create a new AudioBufferSourceNode and call noteOn().

Though re-creating the source node may feel inefficient, source nodes are heavily optimized for this pattern. Plus, if you keep a handle to the AudioBuffer, you don't need to make another request to the asset to play the same sound again. If you find yourself needing to repeat this pattern, encapsulate playback with a simple helper function like playSound(buffer).

Q: WHEN PLAYING BACK A SOUND, WHY DO YOU NEED TO MAKE A NEW SOURCE NODE EVERY TIME?

A: The idea of this architecture is to decouple audio asset from playback state. Taking a record player analogy, buffers are analogous to records and sources to play-heads. Because many applications involve multiple versions of the same buffer playing simultaneously, this pattern is essential.

source:

http://updates.html5rocks.com/2012/01/Web-Audio-FAQ

---

You need to pause the audio just before its end and change the current playing time to zero, then play it. Javascript/Jquery to control HTML5 audio elements - check this link - explains How to handle/control the HTML5 audio elements?. It may help you!

---

Chrome/Safari have fixed this issue in newer versions of the browser and the above code now works as expected. I am not sure the precise version it was fixed in.