HTML5 Audio behavior

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 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

Read More:   Is there any proper way to integrate d3.js graphics into Facebook React application?


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

(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.

The answers/resolutions are collected from stackoverflow, are licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0 .

Similar Posts