Помогите с html js

Question

Помогите с html js

Никита Люткин Ученик (160), закрыт 3 недели назад

<audio src="aud.mp3" preload="auto">
</audio>
<script>
let audio = document.querySelector('audio');
audio.volume = 1.0;
audio.play();
</script>
Код не работает. Что не так? Когда ставлю controls по кнопке воспроизводится

Answer 1

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

Можешь попробовать переписать скрипт:

 <audio id="myAudio" src="aud.mp3" preload="auto"></audio> 
<button id="playButton">Воспроизвести</button> 
 
<script> 
    let audio = document.getElementById('myAudio'); 
    let playButton = document.getElementById('playButton'); 
 
    playButton.addEventListener('click', function() { 
        audio.volume = 1.0; 
        audio.play(); 
    }); 
</script>

Answer 2

И не будет работать. Во всех современных браузерах автоматический запуск аудиофайлов в <audio> и видеофайлов со звуком в <video> запрещён. Воспроизведение начнётся только после того, как посетитель явно нажмёт на play.

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

Answer 3

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

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