HTML5 Audio behavior

Question

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.

Answer 1

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)

Answer 2

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.