Как при воспроизведении аудио останавливать воспроизведение других аудио

Question

На web-странице имеются аудиофайлы, которые там-же и воспроизводятся. Проблема в том, что при старте воспроизведения одновременно нескольких файлов они все воспроизводятся одновременно.
Каким образом при старте воспроизведения аудио останавливать воспроизведение других аудио?

Answer 1

Рискую нарваться на минусы, но что делать раз у человека горит...
Евгений, рекомендую Вам на будущее как можно более полно описывать Вашу задачу/проблему и конечно-же приводить примеры кода, т.к. без этого точно понять и подсказать Вам решение Вашей-же проблемы очень сложно, а иногда и невозможно.

Если по существу, то добавляем на каждый audio элемент обработчик, который будет выполнятся во время воспроизведения. В самом обработчике в цикле проходим по всем другим audio элементам и ставим их на паузу:

let allAudios = document.querySelectorAll( 'audio' );

allAudios.forEach( elem => {
  elem.addEventListener( 'play', function( e ) {
    allAudios.forEach( audio => {
      if( audio !== e.target ) {
        audio.pause();
        // можно удалить, если не нужно скидывать
        // текущую позицию воспроизведения на начало
        audio.currentTime = 0;
      }
    });
  });
});

<audio controls preload="auto">
  <source src="https://github.com/rafaelreis-hotmart/Audio-Sample-files/raw/master/sample.mp3" />
</audio>
<hr />
<audio controls preload="auto">
  <source src="https://github.com/rafaelreis-hotmart/Audio-Sample-files/raw/master/sample2.mp3" />
</audio>

Ссылки по теме

Answer 2

В общем случае никак, поскольку теги с проигрываемым аудио вовсе не обязательно добавлять на страницу:

document.querySelector('button').addEventListener('click', () => {
  var audio = new Audio()
  audio.src = 'https://commondatastorage.googleapis.com/codeskulptor-assets/Epoq-Lepidoptera.ogg'
  audio.play()
})

<button>Play</button>

Answer 3

Вовсе не обязательно для каждого трека создавать отдельный элемент аудио, это напрасно грузит проц, засоряет оперативку и порождает проблемы с одновременным воспроизведением треков. Достаточно использовать только один элемент аудио, а во время переключения треков задавать ему другое src. С одним элементом одновременность просто невозможна:

<a href=# onclick="playsound('https://mysynthesizer.github.io/index.hetemeel/track1.mp3')">Track1</a><br />
<a href=# onclick="playsound('https://mysynthesizer.github.io/index.hetemeel/track3.mp3')">Track2</a>
<script>
const audio = new Audio();
function playsound(sound){
    audio.src = sound;
    audio.play();
}
</script>

БЛОГ НА HUSL

Как при воспроизведении аудио останавливать воспроизведение других аудио

Ответы (3 шт):

Ссылки по теме