I have an audio element in a HTML5 page. I start playing the audio and then pause it. After that I go back to homescreen by pressing home button and make a phone call. When the call ends, audio element resumes automatically. This happens on Android 4.0.3

The problem is that, this is not the expected and desired behavior. Unfortunately, When browser is running in background, javascript events are not thrown and I can't catch and prevent this behavior using Javascript.

Any help is appreciated. Thanks in advance.

I have an audio element in a HTML5 page. I start playing the audio and then pause it. After that I go back to homescreen by pressing home button and make a phone call. When the call ends, audio element resumes automatically. This happens on Android 4.0.3

The problem is that, this is not the expected and desired behavior. Unfortunately, When browser is running in background, javascript events are not thrown and I can't catch and prevent this behavior using Javascript.

Any help is appreciated. Thanks in advance.

• javascript
• android
• html
• webkit
• html5-audio

• What browser are you using on android? – John Stimac Commented Jun 14, 2012 at 15:12
• Actually this is the desired behaviour, it happens on even basic nokia symbian based mobile phone where suppose you listen to a song, you get a call in between, then the song resume from where you left on, these devices don't even support multitasking but this feature is there everywhere. – AurA Commented Jun 15, 2012 at 6:51
• yes, but i have paused the audio. if it starts automatically by itself, it should not be the expected behavior – serdar Commented Jun 15, 2012 at 10:58
• 1 Bug on jelly bean too. Seems like a browser bug which basically calls native onPause and resume events for handling the users pause of the HTML5 audio session. I suppose a good way to handle would be to not pause the audio but to terminate the session when user pauses the audio. Store the value at which the audio was pause and terminated. then on play use a custom event to restart the audio from that instant. I don't know how you could do something like this but this is my best guess! HTH – Shouvik Commented Jul 30, 2012 at 12:11
• 1 Okay, issue did not present itself in chrome. So this def a default android browser issue.. HTH – Shouvik Commented Jul 31, 2012 at 10:27

5 Answers 5

I don't have an ICS phone to try it out, but here is what I would do:

pause obviously keeps track of the audio time position. 4.0 seems to automatically resume where you paused the audio file

So instead of pausing you could stop your audio file. Unfortunately, stop isn't supported by HTML5.

You have a tricky solution:

• pause audio
• store the position: trackPos = myTrack.currentTime;
• store volume: trackVol = myTrack.volume;
• mute it: myTrack.volume = 0;

Then when the user comes back and hits play again:

if trackPos exists

• set the starting position to trackPos: myTrack.currentTime = trackPos;
• play
• mytrack.volume = trackVol;
• delete window.trackPos;

This is tricky but should work if you are using JavaScript controls.

If you use native controls though play and pause would be managed by the browser's interface. Then you should just store the position and start getting REAL dirty:

• remove the sources:

  myTrack.removeChid( yourSRCs )

• restore your SRCs and position on focus

• wait for the user to play

That's a quick and dirty draft, not tested. But it should work

///EDIT///

A working Javascript demo, at least on my desktop. Try it on your ICS: JSFiddle

(save the file, I guess you can't launch jsfiddle properly on a phone)

Try the following in a script block. It should work.

var ppAudio = function(event){
    var ppMethod = (event.type == "blur")? "pause" : "play",
        audio = document.getElementsByTagName("audio"),
        l = audio.length;
    for (;l--;) audio[l][ppMethod]();
};

// window.onfocus = ppAudio;
window.onblur = ppAudio;

You don't need the onfocus event, I suppose. But, its here for an example of toggling.

Maybe you could declare a boolean to keep track wheter you paused manually or not, so you could evaluate it on focus or another proper event.

Have you tried removing the audio object from the DOM and restoring it on play?

I'd attach a 'onFocus' event to the with a boolean switch to determine the previous state of the audio player, if you get the focus with a previous 'paused' state then stop the player, or else play it.