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?

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.

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.

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

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>

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.

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>

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.

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.

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.

Use em seu iframelugar:

<iframe id="stream" src="YOUTSOURCEAUDIOORVIDEOHERE" frameborder="0"></iframe>

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

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>

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>

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>

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>

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 .

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.