如何判断 HTML5 Audio 元素是否正在使用 Javascript

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/8029391/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-26 02:02:21  来源:igfitidea点击:

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

javascriptdetectionplaybackhtml5-audio

提问by Supuhstar

I have an audioelement 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 audioelement 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 playingis falseeven when the audio is playing:

audio在网页中有一个元素,我想确保用户离开页面时不再播放它。我如何确定audio页面卸载时元素没有播放?到目前为止,我有以下代码,但它似乎不起作用;弹出卸载后报道说,对话playingfalse即使在音频播放:

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

工作示例

回答by c0nstruct0r

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

回答by Dan Blows

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).

您可以使用 onbeforeunload 而不是 onunload - 这可能有效(未经测试)。

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.

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