Question

我在一页上有多个音频播放器，每个播放器都有一个播放和停止按钮。我唯一遇到的问题是，当您单击一个播放按钮，然后单击另一个按钮时，它们又一个又一个地播放。有人可以帮助我提供代码，单击另一个播放按钮时，我需要停止正在播放的歌曲。这是我的代码。谢谢

function disableButton(btn) {
  document.getElementById(btn.id).disabled = true;
}

function change() {
  var image = document.getElementById('image');
  image.src = "https://lms.testing.com/je_audio/html/button2.png"
}

#btn1 {
  border: none;
  padding: 0;
  background: none;
}

<audio id="player">
    <source src="https://lms.testing.com/els_audio/PATAudios/Q1.mp3" type="audio/mpeg">
	Your browser has not support the audio element.
    </audio>

<div>
  <button id="btn1" onclick="document.getElementById('player').play('play'); disableButton(this)"><img src="https://lms.testing.com/je_audio/html/button1.png" width="95" height="28" alt="button" id="image" onclick="change();"></button>

</div>

Answer 1

在所有play元素上收听<audio>事件。
每当一个音频元素开始播放时，请暂停所有其他音频元素。

// Get all <audio> elements.
const audios = document.querySelectorAll('audio');

// Pause all <audio> elements except for the one that started playing.
function pauseOtherAudios({ target }) {
  for (const audio of audios) {
    if (audio !== target) {
      audio.pause();
    }
  }
}

// Listen for the 'play' event on all the <audio> elements.
for (const audio of audios) {
  audio.addEventListener('play', pauseOtherAudios);
}

Answer 2

对于所有元素，您要做的是首先停止以前运行音频的音频，然后将其图像更改回播放，然后尝试播放当前使用的媒体按钮的音频。使用

使用Class来检测所有元素

document.querySelectorAll（'。playerButton'）

这将帮助您找到所有播放器按钮，并为正在使用的音频提供类似AudioFile的类，并使用stop（）函数停止音频，然后为使用此功能单击的当前按钮启动音频。希望这对您执行所要实现的功能有所帮助。您可以使用下面提供的功能作为停止音频的示例

 function stopAudio(audio) {
    audio.pause();
    audio.currentTime = 0;
 } 

 stopAudio(audio)

一次允许一个音频播放器播放

2 个答案: