Получить текущий воспроизводимый файл <audio>на странице с несколькими аудиофайлами

Question

У меня есть несколько аудиофайлов на странице, и я надеюсь получить воспроизводимый аудиофайл через JQuery.

Это то, что я пробовал, но он получает только первый:

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

Могу ли я получить только аудиофайл на странице, которая воспроизводится в данный момент?

Answer 1

Спасибо,

Я также немного изменил свой первоначальный ответ, и это сработало.

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

Answer 2

Одним из подходов к этой проблеме будет запрос всех аудиоэлементов в документе, а затем перебрать те из них, чтобы найти первый экземпляр, где 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);
    });
});