CODEWITHSUNDEEP
javascriptandroidhtmlwebkithtml5-audio
serdar
serdar

Reputation: 560

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.

Upvotes: 22

Views: 2609

Answers (5)

Joe Johnson
Joe Johnson

Reputation: 1824

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.

Upvotes: 1

arkihillel
arkihillel

Reputation: 322

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)

Upvotes: 8

user1555320
user1555320

Reputation: 495

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.

Upvotes: 0

wmarbut
wmarbut

Reputation: 4695

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

Upvotes: 0

Diogo Schneider
Diogo Schneider

Reputation: 349

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.

Upvotes: 0

Related Questions