I have an audio element in a webpage, and I want to ensure that a user is not still playing it when they leave the page. How can I be sure the audio element is not playing when the page is unloaded? So far, I have the following code, but it doesn't seem to work; the dialog that pops up upon unload reports that playing is false even when the audio is playing:
<!DOCTYPE HTML><html>
<head>
<script><!-- Loading Scripts -->
function unloadTasks(){
if (playing && !window.confirm("A podcast is playing, and navigating away from this page will stop that. Are you sure you want to go?"))
window.alert("Here is where I will stop the page from unloading... somehow");
}
</script>
<script><!-- Player Scripts -->
var playing = false;
function logPlay(){
playing = isPlaying("e1audPlayer");
}
function isPlaying(player){
return document.getElementById(player).currentTime > 0 && !document.getElementById(player).paused && !document.getElementById(player).ended;
}
</script>
</head>
<body onunload="unloadTasks()">
<audio id="e1audPlayer" style="width:100%;" controls="controls" preload="auto" onplaying="logPlay()" onpause="logPlay()">
<source src=" Episode 001.mp3" type="audio/mpeg"/>
<source src=" Episode 001.ogg" type="audio/ogg"/>
Your browser does not support embedded audio players. Try <a href="/">Opera</a> or <a href="/">Chrome</a>
</audio>
</body>
</html>
Working example
I have an audio element in a webpage, and I want to ensure that a user is not still playing it when they leave the page. How can I be sure the audio element is not playing when the page is unloaded? So far, I have the following code, but it doesn't seem to work; the dialog that pops up upon unload reports that playing is false even when the audio is playing:
<!DOCTYPE HTML><html>
<head>
<script><!-- Loading Scripts -->
function unloadTasks(){
if (playing && !window.confirm("A podcast is playing, and navigating away from this page will stop that. Are you sure you want to go?"))
window.alert("Here is where I will stop the page from unloading... somehow");
}
</script>
<script><!-- Player Scripts -->
var playing = false;
function logPlay(){
playing = isPlaying("e1audPlayer");
}
function isPlaying(player){
return document.getElementById(player).currentTime > 0 && !document.getElementById(player).paused && !document.getElementById(player).ended;
}
</script>
</head>
<body onunload="unloadTasks()">
<audio id="e1audPlayer" style="width:100%;" controls="controls" preload="auto" onplaying="logPlay()" onpause="logPlay()">
<source src="http://s.supuhstar.operaunite.com/s/content/pod/ADHD Episode 001.mp3" type="audio/mpeg"/>
<source src="http://s.supuhstar.operaunite.com/s/content/pod/ADHD Episode 001.ogg" type="audio/ogg"/>
Your browser does not support embedded audio players. Try <a href="http://opera.com/">Opera</a> or <a href="http://chrome.com/">Chrome</a>
</audio>
</body>
</html>
Working example
Share Improve this question asked Nov 6, 2011 at 18:39 Ky -Ky - 32.1k52 gold badges203 silver badges324 bronze badges2 Answers
Reset to default 15function isPlaying(playerId) {
var player = document.getElementById(playerId);
return !player.paused && !player.ended && 0 < player.currentTime;
}
I believe the browser stops the audio as part of the page unload process. Hence, by the time your custom unload function is called, the audio has been stopped.
You could use onbeforeunload instead of onunload - that might work (untested).
Alternatively, you could set a flag when the audio starts, and use the onended event to change that flag when the audio ends, or when the user manually stops or pauses it.