Полное автовоспроизведение со звуком без взаимодействия пользователя сложно реализовать, так как это защитный механизм браузеров. Но вот несколько хитрых подходов:
<audio id="myAudio" src="aud.mp3" preload="auto"></audio>
<script>
// Вариант 1: Попытка воспроизведения при различных событиях
document.addEventListener('DOMContentLoaded', tryPlay);
document.addEventListener('click', tryPlay, {once: true});
document.addEventListener('keydown', tryPlay, {once: true});
document.addEventListener('mousemove', tryPlay, {once: true});
document.addEventListener('scroll', tryPlay, {once: true});
function tryPlay() {
let audio = document.getElementById('myAudio');
audio.volume = 1.0;
let playPromise = audio.play();
if (playPromise !== undefined) {
playPromise.catch(error => {
console.log("Автовоспроизведение не разрешено: ", error);
});
}
}
// Вариант 2: Начать с muted, затем попытаться включить звук
setTimeout(() => {
let audio = document.getElementById('myAudio');
audio.muted = true;
audio.play().then(() => {
// Попытка включить звук через секунду
setTimeout(() => {
audio.muted = false;
}, 1000);
});
}, 500);
</script>
</audio>
<script>
let audio = document.querySelector('audio');
audio.volume = 1.0;
audio.play();
</script>
Код не работает. Что не так? Когда ставлю controls по кнопке воспроизводится