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

Для того чтобы убрать воспроизведение нескольких аудио на веб-странице в HTML, можно использовать JavaScript для контроля воспроизведения аудио.

Первый способ заключается в использовании HTML атрибута controls у тега <audio>. Это позволит отображать встроенные элементы управления для воспроизведения аудио на странице, а пользователь сможет выбрать только одно аудио для воспроизведения. Например:

<audio controls>
  <source src="audio1.mp3" type="audio/mpeg">
  <source src="audio2.mp3" type="audio/mpeg">
</audio>

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

Второй способ - использование JavaScript для управления воспроизведением аудио. Вам нужно будет добавить атрибут id к каждому тегу <audio>, чтобы с ними можно было легко управлять из JavaScript. Например:

<audio id="audio1" src="audio1.mp3"></audio>
<audio id="audio2" src="audio2.mp3"></audio>

Затем вам потребуется JavaScript-код для обработки событий воспроизведения, чтобы остановить остальные аудиофайлы при воспроизведении нового. Ниже приведен пример:

<script>
  var audios = document.getElementsByTagName("audio");
  for (var i = 0; i < audios.length; i++) {
    audios[i].addEventListener("play", function(event) {
      var currentAudio = event.target;
      for (var j = 0; j < audios.length; j++) {
        if (audios[j] != currentAudio) {
          audios[j].pause();
        }
      }
    });
  }
</script>

Этот код добавляет обработчик события play ко всем тегам <audio> на странице. Когда происходит событие play для одного из них, код останавливает воспроизведение всех остальных аудиофайлов, вызывая метод pause().

Таким образом, после применения этого подхода, только один аудиофайл будет воспроизводиться в любой данной момент времени, и другие будут автоматически останавливаться при выборе нового аудио.