Для того чтобы убрать воспроизведение нескольких аудио на веб-странице в 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()
.
Таким образом, после применения этого подхода, только один аудиофайл будет воспроизводиться в любой данной момент времени, и другие будут автоматически останавливаться при выборе нового аудио.