Question

I’m making a mobile game using HTML5. There is a background music that runs during the gameplay and should ideally stop once I navigate to another page… The logic works properly on older iPhones and android.
However, on iPhone 4 and iPads the music doesn’t stop and continues to play (even when I navigate to another website) until the browser is closed.
Of course there is a call

music_var.pause()

function in the code as well as the unload handler… but this simply doesn’t seem to work.
Any ideas on what is happening here?

Answer 1

Managed to find a solution, as I’ve posted here

Make use of a loop, to check if the user is on the webpage. Store the time.

var lastSeen;
var loop = function (){
    lastSeen = Date.now();
    setTimeout(loop, 50);
};
loop();

var music = document.getElementById('music');
music.addEventListener('timeupdate', function (){
    if(Date.now() - exports.lastSeen > 100){
        this.pause();
    }
}, false);

That’s roughly what my file looks like. Since the timeupdate event fires on an audio element continually if it’s playing, I only have to check when my loop was last called. If it was called more than 100ms ago, I pause the music. Worked like a charm on the iPad I tested on.