Background audio on ipad wont stop

Question

I have a website with background audio and I cant figure out how to turn it off when I close safari on the ipad. On desktop I have it mute on blur and turn back on on focus, but on the ipad when i hit the home button safari closes out but the blur event doesn't fire. So the audio audio keeps playing because safari is running in the background.

I can get it to stop if I double tap the home button and force safari to stop running, but this is really not the user experience that i would like to promote. Is there any event that I can hook into to find out that browser is going to close?

Answer 1

Have you tried something based on the pagehide/pageshow event?

I have used them for tab switching and it works also for when you hit the home button.

<audio src="pathto.mp3" controls id="audioTag"></audio>
<script type="text/javascript">
window.addEventListener('pagehide', function(){
    document.getElementById('audioTag').pause();
    alert('pagehide');
}, false);
window.addEventListener('pageshow', function(){
    document.getElementById('audioTag').play();
    alert('pageshow');
}, false);
</script>