разрешить воспроизведение одного аудиоплеера одновременно

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

Answer 1

Что нужно сделать, чтобы все элементы сначала остановили звук, на котором ранее воспроизводился звук, а затем изменили их изображения на воспроизведение и попытались воспроизвести звук для текущей кнопки мультимедиа, которую вы используете. Использование класса для обнаружения всех элементов с помощью

document.querySelectorAll ('. PlayerButton')

это поможет вам найти все кнопки проигрывателя и аналогичным образом присвоить классу, как AudioFile, то аудио, которое вы используется и используется функция stop (), чтобы остановить звук, а затем запустить звук для текущей кнопки, нажатой с помощью этой функции. Я надеюсь, что это поможет вам в реализации той функциональности, которую вы пытаетесь достичь. Вы можете использовать приведенную ниже функцию в качестве примера того, как остановить звук

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

 stopAudio(audio)

Answer 2

Прослушивание события 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);
}