How can I tell if an HTML5 Audio element is playing with Javascript

Question

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

score 15 · Accepted Answer · answered Nov 21 '12 at 17:15

15

function isPlaying(playerId) {
    var player = document.getElementById(playerId);
    return !player.paused && !player.ended && 0 < player.currentTime;
}

answered Nov 21 '12 at 17:15

c0nstruct0r

186
1
6

That's actually what ended up doing ^^ – Ky - Nov 23 '12 at 21:39

score 0 · Answer 2 · answered Nov 06 '11 at 18:55

0

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.

answered Nov 06 '11 at 18:55

Dan Blows

20,846
10
65
96

The problem is that I have multiple audio players, so I can't just change the flag when one of them stops, because then I won't know if any others are still playing – Ky - Nov 06 '11 at 22:00
Also, on the working example I linked, the audio continues to play when the dialog is opened, meaning that the browser does not stop the audio until the task(s) in the `onunload` event have been carried out – Ky - Nov 06 '11 at 22:11

How can I tell if an HTML5 Audio element is playing with Javascript

2 Answers2

Linked