1

Estou tentando fazer um som ser executado assim que a pagina carrega.

Abro o navegador (Firefox ou Chrome) Acesso a pagina, mas o som não reproduz. Eu só consigo ouvir o som depois que eu clico em qualquer lugar da pagina.

O audio tem 15 segundos de duração. Depois que eu clico em qualquer lugar da pagina, consigo ouvir, com alguns segundos adiantados. É como se ele ja estivesse sendo executado porém o som só saí quando eu clico na pagina.

    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>   

2
  • Só para tirar uma dúvida, essa sua função execSom() está dentro da tag <script></script> ? Se sim, tenta colocar o atributo "autoplay" na TAG <audio>. E tenta também colocar o atributo "loop" para o audio repetir automaticamente quando ele parar de tocar. Commented 16/05/2019 às 22:13
  • Tente mudar a tag <script> de dentro do <body> para o <head>, ou o contrário caso já esteja na <head>.
    – Breno
    Commented 16/05/2019 às 22:26

3 Respostas 3

1

Coloque o atributo autoplay e 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>

Se mesmo assim não funcionar tente colocar a chamada da função play no final do body

Se mesmo assim não funcionar tente colocar em um iframe igual esse exemplo respondido com a mesma dúvida - https://stackoverflow.com/questions/50490304/how-to-make-audio-autoplay-on-chrome

3
  • @yago lima qual música é essa do inicio no áudio? Fiquei curioso! Commented 17/05/2019 às 6:51
  • Lucas tentei fazer oque você sugeriu acima, porém, sem sucesso. O navegador só da play na tag audio, depois que eu clico em algum elemento da pagina. Trata-se de um sistema em php, e nessa pagina esse audio é uma voz que orienta o usuário sobre o sistema.
    – Yago Lima
    Commented 17/05/2019 às 20:05
  • Comenta aqui a solução quando conseguir resolver, @YagoLima . Commented 18/05/2019 às 14:00
1

Brother, consegui resolver parcialmente o seu problema.

O Firefox e o Chrome retiraram a possibilidade de utilizar a reprodução automática dos vídeos e audios (em tese isso foi bom, rs). De forma alguma conseguiremos fazer com que o audio se reproduza sozinho ao recarregar a página.

O que consegui fazer foi que o áudio se reproduza assim que o usuário mexer o mouse na tela (digo, no body). Isso acho que resolve, pois mexer o mouse é a primeira coisa que um usuário faz ao carregar uma tela (Rs). Além disso, coloquei o atributo "loop", que faz com que assim que a música termine, ela recomece novamente (Se não quiser que se repita, é só tirar o "loop").

Mesmo assim, aconselho que você adicione uma informação sobre o áudio e deixe um player para que o usuário clique no play para iniciar o áudio.

Espero ter ajudado.

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

3
  • Fiz o que vc sugeriu Thiago, porém sem sucesso, Na verdade a ideia é que esse audio toque apenas uma vez, quando carregar a pagina. Trata-se de um sistema em php, e nessa pagina esse audio é uma voz que orienta o usuário sobre o sistema.
    – Yago Lima
    Commented 17/05/2019 às 20:02
  • Sim o execSom() está dentro da tag script, antes do body.
    – Yago Lima
    Commented 17/05/2019 às 20:17
  • @YagoLima , editei a resposta. Vê se agora serve pra você. Commented 23/05/2019 às 15:38
0

Primeiro, creio que você precisa adicionar o atributo autoplay na tag audio.

Segundo, me parece que o Google Chrome desabita por padrão o autoplay. Então você deve testar em outros navegadores primeiro.

Espero ter ajudado.

5
  • Coloquei o atributo autoplay. mesmo assim o problema continua. O estranho é que o navegador só da play na tag audio, depois que eu clico em algum elemento da pagina.
    – Yago Lima
    Commented 17/05/2019 às 20:06
  • Mas você testou em quais navegadores?
    – wensiso
    Commented 17/05/2019 às 20:16
  • Chrome e Firefox.
    – Yago Lima
    Commented 17/05/2019 às 20:19
  • Conseguiu, brother ? Commented 19/05/2019 às 21:04
  • Ainda não consegui Thiago. Acredito que seja uma característica dos navegadores. O elemento áudio só funciona depois que o usuário clica na pagina.
    – Yago Lima
    Commented 20/05/2019 às 12:26

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 .