2

Eu quero que o mp3 seja acionado quando entrar na página html, mas está dando erro e não funciona.

O código no javascript:

var audio, playbtn;

function initAudioPlayer(){
    audio = new Audio();
    audio.src = "audio/Loka%20ft%20Anitta.mp3";
    audio.loop = true;
    audio.play();
    
    }
window.addEventListener("load", initAudioPlayer);

O javascript responde no console:

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. 
initAudioPlayer @ audioproj.js:9
load (async)
(anonymous) @ audioproj.js:12

1

1 Resposta 1

5

O Chrome mudou o comportamento relativo a video e audio para impedir que abrindo uma página o som comece automaticamente. Tanto em audio como em video agora só é possível começar a "produzir" som dentro de uma função que ocorra de um evento do DOM. É possível começar a reproduzir o video mas sem som, com o atributo muted. Já audio fica bloqueado de tocar se não houver um evento gerado pelo utilizador.

Em JavaScript é a propriedade audio.muted = true.

Mais sobre isso (em Inglês): https://developer.mozilla.org/en-US/docs/Web/Media/Autoplay_guide

var audio, playbtn;

function initAudioPlayer() {
  audio = new Audio();
  audio.src = "//www.soundhelix.com/examples/mp3/SoundHelix-Song-13.mp3";
  audio.loop = true;
  audio.play();

}
window.addEventListener("load", initAudioPlayer);
playbtn = document.querySelector('#play');
mute = document.querySelector('#mute');

playbtn.addEventListener('click', (e) => {
  audio.paused ? audio.play() : audio.pause();
  e.target.textContent = audio.paused ? 'Play' : 'Pause';
})

mute.addEventListener('click', (e) => {
  audio.muted = !audio.muted;
  e.target.textContent = audio.muted ? 'Unmute' : 'Mute';
})
<button type="button" id="play">Play</button>
<button type="button" id="mute">Mute</button>

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .