在包含多个音频文件的页面上获取当前播放的 <audio> 文件

Posted 2023-02-25

【中文标题】在包含多个音频文件的页面上获取当前播放的 <audio> 文件

【英文标题】：Get the currently played <audio> file on a page with multiple audio files

【发布时间】：2018-11-20 19:06:43

【问题描述】：

我在一个页面上有多个音频文件，我希望通过 JQuery 获取正在播放的音频文件。

这是我尝试过的，但它只得到第一个：

 var audio = document.querySelector('audio');
      audio.addEventListener('play', function()  
        console.log($(this));            
 );

我是否可以只获取当前正在播放的页面上的音频文件？

【参考方案1】：

解决此问题的一种方法是查询文档中的所有音频元素，然后遍历这些元素以找到ispasued 不真实的第一个实例：

function getCurrentlyPlayingAudio() 

  for(const audio of document.querySelectorAll('audio')) 

    if(!audio.paused) 
      return audio;
     
    

  // return undefined if no such audio element found

本方案使用原生querySelectorAll()方法查询音频元素，因此不依赖jQuery。

要在音频元素开始播放后查询“当前正在播放的音频元素”，您可以按以下方式使用建议的方法：

document.querySelectorAll('audio').forEach(audio => 

    audio.addEventListener('play', () => 

        const currentPlaying = getCurrentlyPlayingAudio();
        console.log('current playing audio:', currentPlaying);
    );
);

【讨论】：

谢谢，很遗憾，当我播放音频时，此功能无法运行。我希望每次播放音频时都运行此功能，并且应该能够获得正在播放的 元素。

@Steve 不客气 - 只是扩展了答案。这有帮助吗？

谢谢。我也稍微改变了我原来的答案，并且奏效了。不过我接受你的回答。非常感谢。

【参考方案2】：

谢谢，

我也稍微改变了我原来的答案，这很有效。

var audList = document.getElementsByTagName("audio");

      for (var i = 0; i < audList.length; i++) 
          audList[i].addEventListener("play", onPlay, false);
          audList[i].addEventListener("ended", onEnded, false);
      
      function onPlay(e) 
          console.log(e.target.id + " Well hello there!");
          console.log($(this));

      ;
      function onEnded(e) 
          console.log(e.target.id + " Left this audio.");
      ;