Переключить audio/video HTML

jQuery:

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

JavaScript:

Вы можете использовать делегирование событий. Просто прослушайте событие воспроизведения на этапе захвата, а затем приостановите все видеофайлы, кроме целевого:

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

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

Это имеет немного больше смысла, если только вы не собираетесь начинать с одновременного воспроизведения нескольких элементов.

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

Я не знаю, связано ли это с обновлениями 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 вместо необходимости создавать ее вне слушателя до его использования.

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

Вы даже можете попробовать это решение, если вы не хотите перебирать

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

Смешивая оба предыдущих ответа, которые не сработали, я использовал это. Я только что добавил && window.$_currentlyPlaying != evt.target и все работает. Также я создал суть с этим и другими вкусностями для аудио тегов. javascript-audio-tags

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

или:

document.addEventListener("play", function(e) {
  let audios = document.getElementsByTagName("audio");
  // создаём цикл, пер-ю i, проверяем, если i меньше audios.length, то увеличиваем пер-ю i на единицу
  for (let i = 0, len = audios.length; i < len; i++) {
    if (audios[i] != e.target) {
      // останавливаем
      audios[i].pause();
      // сбрасываем
      audios[i].currentTime = 0;
    }
  }
}, true);

https://question-it.com/questions/1316422/neskolko-audio-html-avtomaticheskaja-ostanovka-drugih-kogda-tekuschij-igraet-s-javascript

https://ru.stackoverflow.com/questions/618858/как-при-клике-остановить-воспроизведение-аудио