Como fazer áudio autoplay no Chrome

94

reprodução automática de áudio funcionando no Mozilla, Microsoft edge e no antigo Google Chrome, mas não no novo Google Chrome. eles bloquearam a reprodução automática. existe alguma maneira de torná-lo de reprodução automática de áudio no google chrome?

Akshay Rathod
fonte
8
O fato de o Google ter feito isso é um absurdo. Eles literalmente disseram "bem, sem música para o seu jogo, a menos que um usuário clique em Play Music". Inaceitável. Com tanta raiva!
Hobbes
2
@Hobbes Concordo. Pelo menos deve haver exceções. Como mencionei a outro postador, tenho uma página de "MÚSICA", com um link do site "mymusic.html", que você só pode acessar com um link / botão claramente rotulado como MINHA MÚSICA ". É bastante absurdo alguém ir lá e ser surpreso ou irritado com a música de amostra sendo tocada lá. Especialmente com um botão STOP MUSIC claro de "posição fixa". Esta política é um caso de reação exagerada a práticas abusivas.
Randy

Respostas:

105

Solução # 1

Minha solução aqui é criar um iframe

<iframe src="audio/source.mp3" allow="autoplay" style="display:none" id="iframeAudio">
</iframe> 

e audiotambém marcar para navegadores que não sejam Chrome

<audio autoplay loop  id="playAudio">
    <source src="audio/source.mp3">
</audio>

e no meu script

  var isChrome = /Chrome/.test(navigator.userAgent) && /Google Inc/.test(navigator.vendor);
  if (!isChrome){
      $('#iframeAudio').remove()
  }
  else {
      $('#playAudio').remove() // just to make sure that it will not have 2x audio in the background 
  }

Solução # 2:

Também há outra solução alternativa para isso de acordo com @Leonard

Crie um iframeque não reproduza nada apenas para acionar a reprodução automática no primeiro carregamento.

<iframe src="silence.mp3" allow="autoplay" id="audio" style="display: none"></iframe>

boa fonte para o arquivo mp3 silence.mp3

Em seguida, reproduza seu arquivo de áudio real com facilidade.

<audio id="player" autoplay loop>
    <source src="audio/source.mp3" type="audio/mp3">
</audio>

Pessoalmente, prefiro a solução nº 2 porque é uma abordagem mais limpa por não depender tanto de JavaScript.

Atualização de agosto de 2019

Solução # 3

Como alternativa, podemos usar <embed>

Para Firefox Parece que a reprodução automática de áudio está funcionando, então não precisamos do <embed>elemento porque ele criará uma execução dupla de áudio.

// index.js
let audioPlaying = true,
    backgroundAudio, browser;
browser = navigator.userAgent.toLowerCase();
$('<audio class="audio1" src="audio.mp3" loop></audio>').prependTo('body');
if (!browser.indexOf('firefox') > -1) {
    $('<embed id="background-audio" src="audio.mp3" autostart="1"></embed>').prependTo('body');
    backgroundAudio = setInterval(function() {
        $("#background-audio").remove();
        $('<embed id="background-audio" src="audio.mp3"></embed>').prependTo('body');
    }, 120000); // 120000 is the duration of your audio which in this case 2 mins.
}

Além disso, se você tiver um evento de alternância para o áudio, certifique-se de remover o <embed>elemento criado para o áudio.

Observação: depois de alternar, ele reiniciará do início porque o <embed>já foi excluído e o <audio>elemento será reproduzido normalmente agora.

$(".toggle-audio").on('click', function(event) {
    audioPlaying = !audioPlaying;
    $("#background-audio").remove();

    clearInterval(backgroundAudio);
    if (audioPlaying){
        $(".audio1").play();
        // play audio 
    }
    else {
        $(".audio1").pause();
    }

E agora certifique-se de ocultar estes elementos <audio>e<embed>

audio, embed {
    position: absolute;
    z-index: -9999;
}

Nota: diplay: nonee visibility: hiddenfará com que o <embed>elemento não funcione.

ajbee
fonte
Como você faz o loop de áudio?
Kwarrtz
1
A solução 2 funcionou para mim. Nota: se você está trabalhando para web e Phonegap ao mesmo tempo, Phonegap não precisa dessa solução alternativa e na verdade é muito ruim. Portanto, se você tiver uma base de código comum para web e Phonegap, certifique-se de encontrar uma maneira de aplicar esta solução alternativa apenas na web.
Ignacio Segura
2
O link para o arquivo de silêncio está morto, então encontrei alguns outros arquivos de silêncio no GitHub: github.com/anars/blank-audio . Estou usando 1-second-of-silence.mp3para meu projeto, mas qualquer arquivo nesta coleção funcionaria, eu acho.
Travis
14
Parece preso no Chrome 76.
mightyiam
3
Sim, isso não funciona mais (se funcionou no passado)
Yulian
28

Existe um truque muito bom para usar a função autoplay da tag de áudio no Chrome.

Adicionar

<iframe src="silence.mp3" allow="autoplay" id="audio"></iframe>

considerando que silence.mp3apenas 0,5 segundos de silêncio.

este

<audio id="player" autoplay controls><source src="0.mp3" type="audio/mp3"></audio>

funciona depois.

O Chrome percebe que um som foi reproduzido e dá permissão para reprodução automática nas tags de áudio.

Leonard Storcks
fonte
6
OK, embora isso funcione, também parece que está explorando um bug ou, pelo menos, um comportamento não intencional. Imagino que alguém irá relatar isso ao Google, então eu não esperaria que funcionasse por muito tempo. Bom achado!
Neil Bryson
5
Um pouco fora do assunto, mas seu silence.mp3 é bem grande, com 36,7k. Tente isto (216 bytes) - s3-eu-west-1.amazonaws.com/neilbryson.net.random/silence.mp3
Neil Bryson
3
O link silence.mp3 está morto. Você pode criar o seu próprio .
idbrii
1
@Toniq Claro, desculpas a todos - s3-eu-west-1.amazonaws.com/omegasquadron.neilbryson.net/…
Neil Bryson
2
Sim, eles sabem disso ... não funciona mais no Firefox ou no Chrome
Stefan Reich
15

Em abril de 2018, as políticas de reprodução automática do Chrome mudaram:

"As políticas de reprodução automática do Chrome são simples:

  • A reprodução automática silenciada é sempre permitida.

A reprodução automática com som é permitida se:

  • O usuário interagiu com o domínio (clique, toque, etc.).
  • No desktop, o limite do Media Engagement Index do usuário foi ultrapassado, o que significa que o usuário já reproduziu vídeo com som.
  • No celular, o usuário adicionou o site à sua tela inicial.

Além disso

  • Os quadros superiores podem delegar permissão de reprodução automática a seus iframes para permitir a reprodução automática com som. "

O site do desenvolvedor do Chrome tem mais informações, incluindo alguns exemplos de programação, que podem ser encontrados aqui: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Deltran
fonte
3
então você está dizendo que não há maneira de reproduzirmos automaticamente o áudio no navegador Chrome?
Akshay Rathod
Além disso, há uma opção de permissões no navegador Chrome no Android agora que o usuário pode selecionar para permitir sons na reprodução automática
zeta
8

Basta adicionar este pequeno script conforme descrito em https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio

<head>
<script>
window.onload = function() {
  var context = new AudioContext();
}
</script>
</head>

Então isso funcionará como você deseja:

<audio autoplay>
      <source src="hal_9000_sorry_dave.mp3">
</audio>
Manuel alves
fonte
Você pode me enviar um violino para esta implementação? Vai ser muito útil
Vikash
5
Não funciona mais? Recebeu esta mensagem: "O AudioContext não foi autorizado a iniciar Deve ser retomada (ou criado) após um gesto de usuário na página.. Developers.google.com/web/updates/2017/09/... "
thdoan
1
Trabalhando no Chrome 81.0.4044.138 no mac 👍
Mosh Feu
5

Pelo menos você pode usar isto:

document.addEventListener('click', musicPlay);
function musicPlay() {
    document.getElementById('ID').play();
    document.removeEventListener('click', musicPlay);
}

A música começa quando o usuário clica em qualquer lugar da página.

Ele também remove instantaneamente o EventListener, então, se você usar os controles de áudio, o usuário pode silenciar ou pausar e a música não começa novamente quando ele clica em outro lugar.

Paul Becker
fonte
Acredito que isso esteja no caminho certo, de obedecer às novas políticas que exigem ALGUMA interação do usuário para tocar música. Eu adicionei isso ao evento de toque que já adicionei para navegadores móveis e um evento onscroll "às vezes funcionando". Infelizmente, a política "no play ()" não parece permitir que a rolagem do mouse conte como uma interação do usuário, mas estou trabalhando nisso também. A questão é que minha página é uma página de MÚSICA, literalmente chamada de "mymusic.html", que você começa a seguir um botão bem rotulado de MÚSICA. Portanto, se alguma vez houve uma página para justificar 'jogar' no carregamento ', essa realmente deveria!
Randy de
@Randy Estou em uma situação muito semelhante, estou trabalhando em uma página de música e quero implementar a reprodução automática. Adicionar o atributo autoplay funcionou de maneira muito inconsistente - o mesmo código funciona ocasionalmente, mas nem sempre. Não tenho erros de console ou rede. Você resolveu sua situação?
Lazarus Rising
@LazarusRising - Embora tudo pareça ter começado com navegadores de telefone, estou percebendo que versões mais recentes de navegadores de desktop também rejeitam a reprodução automática. Devo dizer que estou satisfeito com a necessidade de um evento acionado pela interação do usuário iniciar a música. Na verdade, até eu, como autor da página, estou começando a ficar irritado ao ir para a minha página e ouvir a música começar só porque toquei na tela. Estou começando a ver a lógica de por que a reprodução automática está sendo eliminada. E como está começando a acontecer universalmente, não sinto que meu site seja o único que não pode fazer isso.
Randy
Chrome lança violação por forçar o jogo.
Gabriel Petersson
4

Você pode simplesmente usar (.autoplay = true;) conforme a seguir (testado no Chrome Desktop):

<audio id="audioID" loop> <source src="path/audio.mp3"  type="audio/mp3"></audio>

<script>
var myaudio = document.getElementById("audioID").autoplay = true;
</script>

Se você precisar adicionar botões parar / reproduzir:

<button onclick="play()" type="button">playbutton</button>
<button onclick="stop()" type="button">stopbutton</button>

<audio id="audioID" autoplay loop> <source src="path/audio.mp3"  type="audio/mp3"> 
</audio>

<script>
var myaudio = document.getElementById("audioID");

function play() { 
return myaudio.play(); 
};

function stop() {
return myaudio.pause(); 
};
</script>

Se você quiser que o stop / play seja um único botão:

<button onclick="PlayStop()" type="button">button</button>


<audio id="audioID" autoplay loop> <source src="path/audio.mp3"  type="audio/mp3"> 
</audio>

<script>
var myaudio = document.getElementById("audioID");

function PlayStop() { 
return myaudio.paused ? myaudio.play() : myaudio.pause();
};
</script>

Se você deseja exibir parar / reproduzir no mesmo botão:

<button onclick="PlayStop()" type="button">Play</button>


<audio id="audioID" autoplay loop> <source src="path/audio.mp3"  type="audio/mp3"> 
</audio>

<script>
var myaudio = document.getElementById("audioID");

function PlayStop() { 
if (elem.innerText=="Play") {
    elem.innerText = "Stop";
}
else {
    elem.innerText = "Play";
}
return myaudio.paused ? myaudio.play() : myaudio.pause();
};`
</script>

Em alguns navegadores, o áudio pode não funcionar corretamente, então tente adicionar iframe antes do código:

<iframe src="dummy.mp3" allow="autoplay" id="audio" style="display:none"></iframe>

<button onclick="PlayStop()" type="button">Play</button>


<audio id="audioID" autoplay loop> <source src="path/audio.mp3"  type="audio/mp3"> 
</audio>

<script>
var myaudio = document.getElementById("audioID");

function button() { 
if (elem.innerText=="Play") {
    elem.innerText = "Stop";
}
else {
    elem.innerText = "Play";
}
return myaudio.paused ? myaudio.play() : myaudio.pause();
};
</script>
Waleed Aldhahi
fonte
Não parece funcionar no Chrome versão 85.0.4183.83 (versão oficial) (64 bits)
MC9000
2

Os navegadores mudaram sua privacidade para reprodução automática de vídeo ou áudio devido aos anúncios, o que é irritante. Então você pode apenas enganar com o código abaixo.

Você pode colocar qualquer áudio silencioso no iframe.

<iframe src="youraudiofile.mp3" type="audio/mp3" allow="autoplay" id="audio" style="display:none"></iframe>
<audio autoplay>
    <source src="youraudiofile.mp3" type="audio/mp3">
</audio>

Basta adicionar um iframe invisível com um .mp3 como sua fonte e allow = "autoplay" antes do elemento de áudio. Como resultado, o navegador é enganado para iniciar qualquer arquivo de áudio subsequente. Ou reproduza automaticamente um vídeo que não está silenciado.

Murtaza JAFARI
fonte
1

Eu estive batendo forte nisso hoje, e eu só queria adicionar um pouco de curiosidades que descobri à discussão.

Enfim, eu saí disso:

<iframe src="silence.mp3" allow="autoplay" id="audio" style="display:none"></iframe>
<audio id="audio" autoplay>
  <source src="helloworld.mp3">
</audio>

Este:

<audio id="myAudio" src="helloworld.mp3"></audio>
<script type="text/javascript">
  document.getElementById("myAudio").play();
</script>

E, finalmente, uma "solução" que está um pouco fora dos limites se você preferir apenas gerar suas próprias coisas (o que fazemos):

<script src='https://code.responsivevoice.org/responsivevoice.js'></script>
<input onclick='responsiveVoice.speak("Hello World");' type='button' value='Play' />

A descoberta que fiz e também a parte verdadeiramente engraçada (estranha? Estranha? Ridícula?) É que, no caso dos dois primeiros, você pode realmente vencer o sistema dando uma pancada adequada em f5; se você apertar a atualização repetidamente muito rapidamente (cerca de 5 a 10 vezes deve resolver), o áudio será reproduzido automaticamente e, em seguida, tocará algumas vezes após uma atualização sigle apenas para retornar aos seus maus caminhos. Fantástico!

No comunicado do Google, diz que para que os arquivos de mídia sejam reproduzidos "automaticamente", deve ter ocorrido uma interação entre o usuário e o site. Portanto, a melhor "solução" que consegui encontrar até agora é adicionar um botão, tornando a reprodução de arquivos menos que automática, mas muito mais estável / confiável.

Puto Miké
fonte
3
Depender de uma interação do usuário não é uma reprodução automática.
mightyiam
0

Eu usei pixi.js e pixi-sound.js para conseguir o jogo automático no Chrome e Firefox.

<script>

            PIXI.sound.Sound.from({
            url: 'audios/tuto.mp3',
            loop:true,
            preload: true,
            loaded: function(err, sound) {
                    sound.play();

            document.querySelector("#paused").addEventListener('click', function() {
            const paused = PIXI.sound.togglePauseAll();

            this.className = this.className.replace(/\b(on|off)/g, '');
            this.className += paused ? 'on' : 'off';

            });
            }
            });

</script>

HTML:

<button class="btn1 btn-lg off" id="paused">
    <span class="glyphicon glyphicon-pause off"></span>
    <span class="glyphicon glyphicon-play on"></span>
</button>

ele também funciona em dispositivos móveis, mas o usuário precisa tocar em algum lugar da tela para acionar o som.

Akshay Rathod
fonte
0

Use em seu iframelugar:

<iframe id="stream" src="YOUTSOURCEAUDIOORVIDEOHERE" frameborder="0"></iframe>
Jessé Mendonça
fonte
0

correção temporária

$(document).on('click', "#buttonStarter", function(evt)
{
var context = new AudioContext();
document.getElementById('audioPlayer').play();
$("#buttonStarter").hide()
$("#Game").show()
});

Ou use um player personalizado para acionar a reprodução http://zohararad.github.io/audio5js/

Observação: a reprodução automática será renativada em 31 de dezembro

Youssef KH
fonte
Isso não é uma resposta, porque não é autoplay.
mightyiam
1
@mightyiam, esta é uma solução alternativa, já que não há como executar automaticamente uma vez que o Chrome o bloqueou
Youssef KH
0

Eu adiciono o atributo de controles também marca o áudio e simplesmente oculto no CSS. E tudo funciona bem no Chrome.

<audio autoplay loop controls id="playAudio">
  <source src="audio/source.mp3">
</audio>
Yuriy Boyko
fonte
1
Talvez se o seu MEI para esse site permitir a reprodução automática. Caso contrário, não vejo uma razão para que isso funcione.
mightyiam
0

O Google mudou suas políticas no mês passado com relação ao jogo automático dentro do Chrome. Por favor, veja este anúncio .

No entanto, eles permitem a reprodução automática se você estiver incorporando um vídeo e ele estiver sem som. Você pode adicionar a mutedpropriedade e isso deve permitir que o vídeo comece a ser reproduzido.

<video autoplay controls muted>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
  Your browser does not support the video tag.
</video>
ItsPronounce
fonte
4
quero que o áudio toque em segundo plano.
Akshay Rathod
13
A reprodução automática de áudio silenciado não pode ser considerada uma resposta.
mightyiam
@Akshay Rathod, você encontrou soluções?
The Dead Man
0

Solução sem usar iframe ou javascript:

<embed src="silence.mp3" type="audio/mp3" autostart="true" hidden="true">
        <audio id="player" autoplay controls><source src="source/audio.mp3" type="audio/mp3"></audio>

Com esta solução, a caixa de diálogo abrir / salvar do Internet Explorer também é evitada.

   <embed src="http://deinesv.cf/silence.mp3" type="audio/mp3" autostart="true" hidden="true">
        <audio id="player" autoplay controls><source src="https://freemusicarchive.org/file/music/ccCommunity/Mild_Wild/a_Alright_Okay_b_See_Through/Mild_Wild_-_Alright_Okay.mp3" type="audio/mp3"></audio>

Juan
fonte
1
Não. Não funciona na versão do Chrome 85.0.4183.83 (versão oficial) (64 bits)
MC9000
-1

A tag de vídeo também pode reproduzir áudio. Dado que a tag de áudio não parece estar se comportando como deveria, você pode apenas usar a tag de vídeo para áudio:

<video autoplay muted id="audio1" src="your.mp3" type="audio/mp3">
    Your browser does not support the <code>video</code> element.
</video>
<script>
    unmuteButton.addEventListener('click', function() 
        { 
            if ( unmuteButton.innerHTML == "unmute" )
            {
                unmuteButton.innerHTML = "mute";
                audio1.muted = false; 
            } else {
                unmuteButton.innerHTML = "unmute";
                audio1.muted = true; 
            }
        });
</script>
Campbell
fonte
-2

Você pode usar <iframe src="link/to/file.mp3" allow="autoplay">, se a origem tiver uma permissão de reprodução automática. Mais informações aqui .

Martin van Houte
fonte
ele está mostrando controles e não quero nada na página. basta reproduzir e pausar o botão.
Akshay Rathod
e como fazer o loop do áudio?
Akshay Rathod
1
@AkshayRathod verifique o atributo de loop HTML <audio> . Considerando que, em XHTML, a minimização de atributos é proibida e o atributo loop deve ser definido como <audio loop = "loop">.
hmd
-4

O audioatributo autoplay padrão do HTML5 não está funcionando no Chrome, mas você pode forçar a reprodução automática do áudio usando JavaScript. Experimente isto:

document.getElementById('myAudio').play();

Isso funciona para mim.

Mahtab Alam
fonte
3
não é que a reprodução automática "não funciona", é que está sujeita a uma política em que a reprodução automática não funcionará se os requisitos da política não forem atendidos. Consulte developers.google.com/web/updates/2017/09/… . Este código não contornará essa política. Se funcionou para você, é porque você atingiu o limite e / ou definiu algum sinalizador de desenvolvedor. Mas, como diz essa página, você não pode presumir que funcionará para todos.
ADyson
Pelo menos no FF 66, isso também não funcionará. A nova política é bloquear o play () se ele não foi de alguma forma acionado por uma interação do usuário.
Randy
Sim @Randy, e a mensagem de erro no console do navegador da web, se tentarmos reproduzir um som em JS sem interagir é: "Erro: Não capturado (na promessa) DOMException: play () falhou porque o usuário não interagiu com o documento primeiro. "
Wild8x