Html5 Audio plays only once in my Javascript code

Question

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 play. 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 also was running into this problem on Chrome 11 on mac os x. Ran the same page on the lastest Canary build and the audio keeps playing properly, though I did have to set its currentTime to 0 (as suggested by Bob below). — TheBentArrow, May 04 '11 at 19:55

score 5 · Answer 1 · answered Aug 21 '12 at 15:00

5

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!

answered Aug 21 '12 at 15:00

Ninjaxor

876
12
27

1

This works but network activity MAY occur; it appears the target file is cached like any other, so if the file was served with "Cache-Control:no-cache" it WILL be reloaded. This is in Chrome 25. – Richard Mar 06 '13 at 12:38
2

After some more testing, I've seen the target file being downloaded every time, just once, or various numbers in between - god knows why! – Richard Mar 06 '13 at 12:59

score 2 · Answer 2 · answered Apr 23 '10 at 23:22

2

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

answered Apr 23 '10 at 23:22

Bob

7,851
5
36
48

In Chrome I get the following message when I add the currentTime line above. "Uncaught Error: INDEX_SIZE_ERR: DOM Exception". Any thoughts on this? – Poul Apr 26 '10 at 21:16
1

Has anyone else seen this exception in Chrome or gotten the above suggestion to work? Thanks! – Poul May 03 '10 at 11:30
@Poul : That doesn't really make sense for a number of reasons. The primary reason is that these are not DOM elements. It sounds like you're using an – River Tam Aug 04 '13 at 21:27

score 1 · Answer 3 · answered Nov 15 '12 at 13:47

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

Sankar V · Answer 4 · 2016-03-02T12:17:19.347

1

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!

edited Mar 02 '16 at 12:17

answered Jan 03 '14 at 19:22

Sankar V

4,110
5
28
52

score 1 · Answer 5 · edited May 23 '17 at 10:30

1

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.

edited May 23 '17 at 10:30

Community

1
1

answered Aug 31 '10 at 02:16

TooTallNate

1,477
3
20
41

score 0 · Accepted Answer · answered Feb 11 '13 at 16:48

0

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.

answered Feb 11 '13 at 16:48

Poul

3,426
5
37
43

Html5 Audio plays only once in my Javascript code

6 Answers6