Browser only emits audio after I click on it

Asked

Viewed 419 times

1

I’m trying to make a sound run as soon as the page loads.

I open the browser (Firefox or Chrome) Page access, but the sound doesn’t play. I can only hear the sound after I click anywhere on the page.

The audio is 15 seconds long. After I click anywhere on the page, I can hear, with a few seconds in advance. It’s like it’s already running but the sound only came out when I click on the page.

    function execSom() {
		var playAudio = document.getElementById("playAudio");
		playAudio.play();		
	}
    <body onload="execSom()">

    <audio style="visibility:hidden" id='playAudio'>
          <source src="https://unicorn-meta-zoo.github.io/episodes/moderation.mp3" type="audio/mpeg">
    </audio>

javascript html5 browser

  • Just to make a question, is your execSom() function inside the <script></script> tag? If so, try to put the "autoplay" attribute in the <audio> TAG. And also try to put the attribute "loop" for the audio to automatically repeat when it stops playing.

  • Try changing the tag <script> from within the <body> to the <head>, or otherwise if you are already in <head>.

3 answers

1

Brother, I managed to partially solve your problem.

Firefox and Chrome removed the possibility of using the automatic playback of the videos and Audios (in theory this was good, rs). There is no way we can get the audio to play on its own by reloading the page.

What I was able to do was that the audio plays as soon as the user moves the mouse on the screen (I mean, on the body). This I think solves, because moving the mouse is the first thing a user does when loading a screen (Rs). Also, I put the attribute "loop", which makes it so that once the song ends, it starts again (If you don’t want it to be repeated, just take the "loop").

Even so, I advise you to add information about the audio and leave a player for the user to click the play to start the audio.

I hope I’ve helped. 

<!doctype html>
<html lang="pt-br">

<head>

  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <script>
    function execSom() {
      var playAudio = document.getElementById("playaudio");
      playAudio.play();
    }
  </script>

</head>

<body onmouseover="execSom()">

  <h1>Teste Áudio</h1>

  <audio style="visibility:hidden" autoplay loop="loop" id='playaudio'>
		<source src="aeris.mp3" type="audio/mp3"/>
	</audio>



</body>

</html>

  • I did what you suggested Thiago, but without success, In fact the idea is that this audio plays only once, when loading the page. This is a php system, and on this page this audio is a voice that guides the user over the system.

  • Yes execSom() is inside the tag script, before body.

  • @Yagolima , I edited the answer. See if now it suits you.

1


Place the attribute autoplay and Controls

window.onload = autoAudio;

function autoAudio() {  
  alert("five, four, three, two, one, zero...")
  document.querySelector("#playAudio").play()
}
#playAudio {
  opacity: 0;
  pointer-events: none;
}
<audio id="playAudio" autoplay controls>
  <source src="https://unicorn-meta-zoo.github.io/episodes/moderation.mp3" type="audio/mpeg">
  O seu navegador não suporta o elemento <code>audio</code>
</audio>

If it still doesn’t work try to place the call from the play function at the end of the body

If it still doesn’t work try to put in an iframe like this example answered with the same question - https://stackoverflow.com/questions/50490304/how-to-make-audio-autoplay-on-chrome

  • @What song is that from the beginning in the audio? I was curious!

  • Lucas tried to do what you suggested above, however, unsuccessfully. The only play browser in the audio tag, after I click on some element of the page. This is a php system, and on this page this audio is a voice that guides the user over the system.

  • Comment here on the solution when you can solve, @Yagolima .

0

First, I think you need to add the autoplay attribute to the audio tag.

Second, it seems to me that Google Chrome disallows autoplay by default. So you should test on other browsers first.

I hope I’ve helped.

  • I put the attribute autoplay. Still the problem continues. The strange thing is that the only play browser in the audio tag, after I click on some element of the page.

  • But you tested in which browsers?

  • Chrome and Firefox.

  • Got it, brother ?

  • I still can’t get Thiago. I believe it’s a feature of browsers. The audio element only works after the user clicks on the page.

Browser other questions tagged javascript html5 browser

You are not signed in. Login or sign up in order to post.