多個音頻html：當當前正在使用javascript播放時自動停止其他

Question

我在 html5 頁面上有 10 個帶有簡單 html 音頻標簽的音頻播放器。 沒有 jquery，沒有特殊的音頻 js 插件等...

有沒有人在 js 中有一個簡單的腳本來在當前播放器播放時暫停所有其他播放器？

我不想使用 js 插件，因為我想保留一個簡單的音頻 html 代碼。

Answer 1

您可以使用事件委托。 只需在捕獲階段收聽播放事件，然后暫停所有視頻文件，但不是目標文件：

document.addEventListener('play', function(e){
    var audios = document.getElementsByTagName('audio');
    for(var i = 0, len = audios.length; i < len;i++){
        if(audios[i] != e.target){
            audios[i].pause();
        }
    }
}, true);

Answer 2

您可以存儲對當前播放元素的引用，而不是循環遍歷頁面上的所有音頻標簽並暫停它們，並在播放另一個時只暫停一個。

document.addEventListener("play", function(evt) {
    if(this.$AudioPlaying && this.$AudioPlaying !== evt.target) {
        this.$AudioPlaying.pause();
    }
    this.$AudioPlaying = evt.target;
}, true);

Answer 3

混合了以前不起作用的兩個答案，我已經使用了。 我剛剛添加了&& window.$_currentlyPlaying != evt.target並且一切正常。 我還用這個和其他音頻標簽的好東西創建了一個要點。 javascript-音頻標簽

window.addEventListener("play", function(evt)
{
    if(window.$_currentlyPlaying && window.$_currentlyPlaying != evt.target)
    {
        window.$_currentlyPlaying.pause();
    } 
    window.$_currentlyPlaying = evt.target;
}, true);

Answer 4

$("audio").on("play", function() {
    var id = $(this).attr('id');

    $("audio").not(this).each(function(index, audio) {
        audio.pause();
    });
});

$("video").on("play", function() {
    var id = $(this).attr('id');

    $("video").not(this).each(function(index, video) {
        video.pause();
    });
});

Answer 5

我不知道是不是因為 Chrome 更新，但以前的答案對我不起作用。 我在這里修改了一些代碼並提出了這個：

document.addEventListener("play", function(evt)
{
    if(window.$_currentlyPlaying && window.$_currentlyPlaying != evt.target)
    {
        window.$_currentlyPlaying.pause();
    } 
    window.$_currentlyPlaying = evt.target;
}, true);

我不知道為什么，但是widow.addEventListener對我不起作用，但我喜歡將currentPlaying變量存儲在window元素中的想法，而不必在使用它之前在偵聽器之外創建它。

Answer 6

如果您不想循環訪問，您甚至可以嘗試此解決方案

var previuosAudio;
document.addEventListener('play', function(e){
    if(previousAudio && previousAudio != e.target){
        previousAudio.pause();
    }
    previousAudio = e.target;
}, true);

Answer 7

我在底部制作了一個播放器，每次用戶點擊播放時都更改了 src 這只是一種方法

HTML

<audio src="tracks/track1.mp3" type="audio/mp3" class='audios'></audio>
  <i class='fas fa-play'></i>
  <i class='far fa-pause-circle'></i>
  <i class='fas fa-stop'></i>
<audio src="tracks/track2.mp3" type="audio/mp3" class='audios'></audio>
  <i class='fas fa-play'></i>
  <i class='far fa-pause-circle'></i>
  <i class='fas fa-stop'></i>
<audio src="tracks/track3.mp3" type="audio/mp3" class='audios'></audio>
  <i class='fas fa-play'></i>
  <i class='far fa-pause-circle'></i>
  <i class='fas fa-stop'></i>

  <audio class='main-audio' controls>
     <source src="#" type="audio/mp3">
  </audio>

JavaScript

const audios_with_src = document.querySelectorAll('.audios')
const play = document.querySelectorAll('.fa-play')
const pause = document.querySelectorAll('.fa-pause-circle')
const stop = document.querySelectorAll('.fa-stop')
const main_player = document.querySelector('.main-audio')

for(let i =0; i < audios_with_src.length; i++) {
 play[i].addEventListener('click', (e) => {
    main_player.src = audios_with_src[i].src;
    main_player.play()   
    })

pause[i].addEventListener('click', () => {
    main_player.pause()
})

stop[i].addEventListener('click', () => {
    main_player.pause()
    main_player.currentTime = 0;  // there is no stop() function so had to do this
})


}

Answer 8

關於 ECMA 2022 重寫的最佳解決方案：

  document.addEventListener('play', (event) => {
    const audios = [...document.getElementsByTagName('audio')];
    
    audios.forEach((audio) => audio !== event.target && audio.pause());
  }, true);