logo标签列表

HTML5 如何检测音频是否正在播放？

javascripthtmlaudio
183

如何使用JavaScript API检查HTML5音频元素是否正在播放？

请参考以下链接：https://dev59.com/aGw15IYBdhLWcg3wCXKJ - mems
14个回答
223
function isPlaying(audelem) { return !audelem.paused; }

音频标签有一个 paused 属性。如果它没有暂停，那么它正在播放。
53
这个答案是错误的。我正在处理它，在第一次开始之前，.paused的值为false。 - Tomas
3
@Tom，你有一个 JSBin 吗？我尝试了这个方法，看起来是正确的答案。 - Harry
4
@Harry 我对它进行了更多的尝试，似乎在某些浏览器上它能够工作，而在其他一些浏览器上则不能。我猜这取决于实现方式。但对于最新版本的Chrome和Firefox，它似乎能够工作，所以这个答案对于最新的实现是正确的。 - Tomas
3
监听事件！addEventListener('playing', func)和addEventListener('pause', func)。 - Kristian
3
根据HTML Living Standard和W3C HTML5规范，" paused 属性表示媒体元素是否已暂停。该属性必须最初为 true"。也许@Harry和@Tomas在2012年发现这不是属实的，因为当时规范并不明确。但是... 我在规范中没找到任何东西（不是说没有！）说明'paused`属性在播放结束时必须为true。你们有什么看法？ - Matt Wallis
显示剩余3条评论
62

您可以检查持续时间。 如果持续时间超过0秒并且未被暂停，则正在播放。

var myAudio = document.getElementById('myAudioID');

if (myAudio.duration > 0 && !myAudio.paused) {

    //Its playing...do your job

} else {

    //Not playing...maybe paused, stopped or never played.

}
2
个人认为 !myAudio.paused||!myAudio.currentTime 会做得更好。 - m93a
19
你是说 !myAudio.paused || myAudio.currentTime 吗？ - MalcolmOcean
5
是的，应该是 !myAudio.paused || myAudio.currentTime。似乎没有回复过来…… - Parth
1
@MalcolmOcean，来自2023年的感谢 <3 - Marko Bajlovic
25

虽然我在这个线程上很晚，但我使用这个实现来判断声音是否正在播放：

service.currentAudio = new Audio();

var isPlaying = function () {
    return service.currentAudio
        && service.currentAudio.currentTime > 0
        && !service.currentAudio.paused
        && !service.currentAudio.ended
        && service.currentAudio.readyState > 2;
}

我认为音频元素上大多数的标志都很明显，除了就绪状态，你可以在这里阅读更多信息：MDN HTMLMediaElement.readyState。

1
如果iOS在锁定时自动暂停音频，则无法工作。 - shukshin.ivan
14
document.getElementsByTagName('audio').addEventListener('playing',function() { myfunction(); },false);

应该可以解决问题。

2
getElementsByTagName('audio')[0]会返回一个集合，而不是一个元素。 - Mik
9

试试这个函数！如果位置在开头或结尾，则不会执行音频播放。

function togglePause() {
     if (myAudio.paused && myAudio.currentTime > 0 && !myAudio.ended) {
         myAudio.play();
     } else {
         myAudio.pause();
     }
}
4

我在想这段代码能否正常运行，结果它出奇的运行成功：

if (a.paused == false) {
/*do something*/
}

或者您可以这样写：

if (!a.paused == true) {
/*do something*/
}

如果你想在 JSFiddle 中让你的 IDE 令人烦恼，请使用以下方法。

也许你可以用“运行中”代替“已暂停”，这样也能正常工作。 - user14631264
或者你可以省略 "== true" 部分，这样你的 IDE 就不会再提示你了。 - Dávid Leblay
2
您可以使用onplay事件。
var audio = document.querySelector('audio');
audio.onplay = function() { /* do something */};

或者

var audio = document.querySelector('audio');
audio.addEventListener('play', function() { /* do something */ };
第二种方法似乎效果最佳。Firefox、Linux Mint，在页脚脚本中。 - tradesouthwest
2

试用以下代码：

    var myAudio = document.getElementById("audioFile"); 

    function playAudio() { 
          //audio.play(); 
          //console.log(audio.play())
           if (myAudio.paused && myAudio.currentTime >= 0 && !myAudio.started) {
         myAudio.play();
         console.log("started");
     } else {
         myAudio.pause();
     }
}
你好，欢迎来到 SO！虽然这段代码可能回答了问题，但提供有关它如何解决问题以及/或为什么解决问题的额外上下文会提高答案的长期价值。请阅读导览和如何编写好答案？。 - Tomer Shetah
1
我这样做
    <button id="play">Play Sound</button>
<script>
    var sound = new Audio("path_to_sound.mp3")
    sound.loop = false;
    var play = document.getElementById("play")
    play.addEventListener("click", () => {
        if (!isPlaying()) {
            sound.play()
        } else {
            //sound.pause()  
        }
    })

    function isPlaying() {
        var infoPlaying = false
        var currentTime = sound.currentTime == 0 ? true : false
        var paused = sound.paused ? true : false
        var ended = !sound.ended ? true : false
        var readyState = sound.readyState == 0 ? true : false
        if (currentTime && paused && ended && readyState) {
            infoPlaying = true
        } else if (!currentTime && !paused && ended && !readyState) {
            infoPlaying = true
        }
      return infoPlaying
    }
</script>
1
为了检查音频是否真正开始播放，尤其是在有流的情况下，需要检查audio.played.length是否为1。只有当音频真正开始发出声音时，它才会为1。否则将为0。这更像是一个技巧，但即使在移动浏览器中（如Safari和Chrome），它仍然有效。
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接