获取当前播放的内容 <audio> 具有多个音频文件的页面上的文件

Question

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

这是我尝试过但它只获得第一个：

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

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

Answer 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);
    });
});

Answer 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.");
      };