javascript - 在有多个音频文件的页面上获取当前播放的文件

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
}

此解决方案使用 native querySelectorAll()查询音频元素的方法，因此不依赖于 jQuery。

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

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

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

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