如何用Javascript判断HTML5音频元素是否正在播放

Question

如何用Javascript判断HTML5音频元素是否正在播放

9

我在网页中有一个音频(audio)元素，我想确保用户离开页面时不再播放它。 如何确保在卸载页面时audio元素没有播放？到目前为止，我已经有了以下代码，但似乎不起作用; 在卸载时弹出的对话框报告playing是false，即使音频正在播放：

<!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

- Ky -

2个回答

0

我相信浏览器在页面卸载过程中停止音频。因此，在调用自定义卸载函数时，音频已经停止。

您可以使用 onbeforeunload 而不是 onunload - 这可能会起作用（未经测试）。

或者，您可以在音频开始时设置一个标志，并使用 onended 事件在音频结束时或用户手动停止或暂停时更改该标志。

- Dan Blows

问题在于我有多个音频播放器，所以当其中一个停止时，我不能只更改标志，因为那样我就不知道其他的是否仍在播放。 - Ky -

此外，在我提供的工作示例中，当打开对话框时音频仍在播放，这意味着浏览器直到onunload事件中的任务完成之前不会停止音频。 - Ky -

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- c0nstruct0r · Accepted Answer

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