How can I disable Audio Playback in Android Chrome when the process is Backgrounded?

Question

How can I programmatically disable a song from playing in the background of a Chrome Android process?

Here's a simple example of a page which plays a song in Chrome:

https://thomashunter.name/examples/chrome-audio-bug.html

var song = new Audio('song.ogg');
song.loop = 'loop';

button = document.getElementById('play');

button.addEventListener("click", function() {
  song.play();
});

Notice how the song will keep playing in the background. While nice for a jukebox, it'll drive a player of a web game insane.

Is there a way to disable background playing of a single Audio element in Chrome? Or, is there at least a callback for when the page loses focus so I could run song.stop()?

Answer 1

You can try to use visibilitychange:

document.addEventListener('visibilitychange', function(){
    if (document.hidden) {
        // Document is hidden 

        // This re-initialize the audio element
        // to release the audio focus
        song.load(); 
    }
    else {
        // Document is focused
    }
},false);

The complete example is available here https://jsfiddle.net/6001wsf9/

Tested on Android 5.0 with Chrome 43.0.2357.78