HTML5 检查音频是不是正在播放？

Posted 2023-02-25

【中文标题】HTML5 检查音频是不是正在播放？

【英文标题】：HTML5 check if audio is playing?HTML5 检查音频是否正在播放？

【发布时间】：2012-02-24 20:00:57

【问题描述】：

用于检查 html5 音频元素当前是否正在播放的 javascript api 是什么？

【问题讨论】：

查看相关：***.com/questions/6877403/…

【参考方案1】：

function isPlaying(audelem)  return !audelem.paused; 

音频标签有一个paused 属性。如果它没有暂停，那么它正在播放。

【讨论】：

这是错误的答案。我只是在使用它，在第一次启动之前 .paused 是错误的。

@Tom 你有一个 jsbin 吗？我试过了，这似乎是正确的答案。

@Harry 我玩得更多，似乎在某些浏览器中它确实有效，而有些则无效。我想这取决于实施。但是对于 chrome 和 firefox 的所有最新更新，它似乎都可以工作，所以这个答案对于最新的实现是正确的。

监听事件！ addEventListener('playing', func) 和 addEventListener('pause', func)。

根据HTML Living Standard 和W3C HTML5 spec，“paused 属性表示媒体元素是否暂停。该属性最初必须为真”。也许@Harry 和@Tomas 在 2012 年发现情况并非如此，因为当时的规格还不清楚。但是......我在规范中找不到任何内容（并不是说它不存在！）说播放结束时“暂停”属性必须为真。有意见吗？

【参考方案2】：

您可以查看持续时间。如果持续时间超过 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.

【讨论】：

我个人认为!myAudio.paused||!myAudio.currentTime 会做得更好。

@m93a 你不是说!myAudio.paused || myAudio.currentTime 吗？

是的，应该是!myAudio.paused || myAudio.currentTime。似乎从来没有回复过......

【参考方案3】：

虽然我对这个线程真的很晚了，但我使用这个实现来确定声音是否正在播放：

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。

【讨论】：

如果音频在锁定时被 ios 自动暂停，则不起作用。

【参考方案4】：

document.getElementsByTagName('audio').addEventListener('playing',function()  myfunction(); ,false); 

应该做的伎俩。

【讨论】：

getElementsByTagName('audio')[0] 因为它返回集合，而不是一个元素

【参考方案5】：

试试这个功能！ 如果位置是开头或结尾，则不会执行音频播放

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

【参考方案6】：

我想知道这段代码是否可以工作，结果令人惊讶的是：

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

或者你可以写成：

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

如果你想让你的 IDE 在 JSfiddle 中惹恼你。

【讨论】：

也许你也可以用“正在运行”替换“暂停”，它仍然可以工作

或者您可以省略“== true”部分，您的 IDE 不会打扰您。

【参考方案7】：

你可以使用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，在页脚脚本中。

【参考方案8】：

试用此代码：

    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！虽然此代码可能会回答问题，但提供有关它如何和/或为什么解决问题的额外上下文将提高​​答案的长期价值。请阅读tour和How do I write a good answer?

【参考方案9】：

要检查音频是否真的开始播放，特别是如果你有一个流，需要检查audio.played.length 到1。只有当音频是真正的开始声音时，它才会为 1。否则将是0。它更像是一种 hack，但即使在 Safari 和 Chrome 等移动浏览器中仍然有效。

【参考方案10】：

我是这样做的

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

【参考方案11】：

我正在使用这个带有拖曳按钮播放和停止的 jquery 代码，播放按钮是一个播放和暂停按钮

const help_p = new Audio("audio/help.mp3");//Set Help Audio Name
$('#help_play').click(function() //pause-Play
if (help_p.paused == false) 
  help_p.pause();//pause if playing
 else 
  help_p.play();//Play If Pausing

);

$('#help_stop').click(function() //Stop Button
  help_p.pause();//pause
  help_p.currentTime = 0; //Set Time 0
);

【参考方案12】：

虽然没有称为 isPlaying 或类似的方法，但有几种方法可以完成此操作。

此方法在播放音频时获取进度百分比：

function getPercentProg() 
    var myVideo = document.getElementById('myVideo');
    var endBuf = myVideo.buffered.end(0);
    var soFar = parseInt((endBuf / myVideo.duration) * 100);
    document.getElementById('loadStatus').innerHTML =  soFar + '%';

如果百分比大于 0 小于 100，则播放，否则停止。

【讨论】：

呃，如果我在中间暂停音频呢？

那么它就不会播放了。

这只检测缓冲的数量。例如，如果音频元素已开始缓冲数据但由于数据不足而尚未开始播放，则此方法仍然可以返回 true。或者，如果元素在播放过程中缓冲了数据并随后被暂停。

getElementsByTagName('myVideo') ？我认为应该是 getElementById('myVideo')

Em... 为什么要减去？好主意，虽然写得不好。如何检查实时音频 (WebRTC) 是否正在播放 .paused？仅使用缓冲区检查。不值得减去。我赞成。