La reproducción automática de audio funciona en Mozilla, Microsoft edge y el antiguo Google Chrome, pero no en el nuevo Google Chrome. han bloqueado la reproducción automática. ¿Hay alguna forma de hacer que el audio se reproduzca automáticamente en Google Chrome?

Solución # 1

Mi solución aquí es crear un iframe

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

y audioetiquetar también para navegadores que no sean Chrome

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

y en mi 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 
  }

Solución # 2:

También hay otra solución para esto según @Leonard

Cree un iframeque no reproduzca nada solo para activar la reproducción automática en la primera carga.

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

buena fuente para el archivo mp3 silent.mp3

Luego, reproduce tu archivo de audio real a gusto.

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

Personalmente, prefiero la solución n. ° 2 porque es un enfoque más limpio para no depender tanto de JavaScript.

Actualización de agosto de 2019

Solución # 3

Como alternativa podemos utilizar <embed>

Para Firefox Parece que la reproducción automática de audio está funcionando, por lo que no necesitamos el <embed>elemento porque creará una doble ejecución de audio.

// 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.
}

Además, si tiene un evento de alternancia para su audio, asegúrese de eliminar el <embed>elemento creado para el audio.

Nota: Después de su alternancia, se reiniciará desde el principio porque <embed>ya se eliminó y el <audio>elemento se reproducirá normalmente ahora.

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

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

Y ahora asegúrate de ocultar estos <audio>y <embed>elementos

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

Nota: diplay: noney visibility: hiddenhará que el <embed>elemento no funcione.

Hay un truco realmente genial para usar la función de reproducción automática de la etiqueta de audio en Chrome.

Añadir

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

mientras silence.mp3 solo hay 0,5 segundos de silencio.

Esta

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

trabaja después.

Chrome nota que se ha reproducido un sonido y da permiso para la reproducción automática en las etiquetas de audio.

A partir de abril de 2018, las políticas de reproducción automática de Chrome cambiaron:

"Las políticas de reproducción automática de Chrome son simples:

• La reproducción automática silenciada siempre está permitida.

La reproducción automática con sonido está permitida si:

• El usuario ha interactuado con el dominio (hacer clic, tocar, etc.).
• En el escritorio, se ha cruzado el umbral del índice de interacción con los medios del usuario, lo que significa que el usuario ha reproducido previamente un vídeo con sonido.
• En el dispositivo móvil, el usuario ha agregado el sitio a su pantalla de inicio.

también

• Los fotogramas superiores pueden delegar el permiso de reproducción automática a sus iframes para permitir la reproducción automática con sonido. "

El sitio para desarrolladores de Chrome tiene más información, incluidos algunos ejemplos de programación, que se pueden encontrar aquí: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Simplemente agregue este pequeño script como se muestra en https://developers.google.com/web/updates/2017/09/autoplay-policy-changes#webaudio

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

Entonces esto funcionará como quieras:

<audio autoplay>
      <source src="hal_9000_sorry_dave.mp3">
</audio>

Al menos puedes usar esto:

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

La música comienza cuando el usuario hace clic en cualquier parte de la página.

También elimina instantáneamente el EventListener, por lo que si usa los controles de audio, el usuario puede silenciarlo o pausarlo y la música no comienza de nuevo cuando hace clic en otro lugar.

Los navegadores han cambiado su privacidad para reproducir automáticamente video o audio debido a los anuncios que son molestos. Así que puedes engañar con el siguiente código.

Puede poner cualquier audio silencioso en el 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>

Simplemente agregue un iframe invisible con un .mp3 como fuente y allow = "autoplay" antes del elemento de audio. Como resultado, se engaña al navegador para que inicie cualquier archivo de audio posterior. O reproducir automáticamente un video que no está silenciado.

Simplemente puede usar (.autoplay = true;) de la siguiente manera (probado en Chrome Desktop):

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

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

Si necesita agregar botones de detener / reproducir:

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

Si desea que detener / reproducir sea un solo botón:

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

Si desea mostrar detener / reproducir en el mismo botón:

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

En algunos navegadores, es posible que el audio no funcione correctamente, así que, como truco, intente agregar un iframe antes de su 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>

Hoy he estado golpeando esto, y solo quería agregar un poco de curiosidad que descubrí a la discusión.

De todos modos, me he salido de esto:

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

Esta:

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

Y finalmente esta, una "solución" que está un tanto fuera de los límites si prefieres generar tu propia cosa (lo cual hacemos):

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

El descubrimiento que hice y también la parte verdaderamente divertida (¿extraño? ¿Extraño? ¿Ridículo?) Es que en el caso de los dos primeros, puedes vencer al sistema dando a f5 un golpe adecuado; si presiona actualizar repetidamente muy rápidamente (unas 5-10 veces debería funcionar), el audio se reproducirá automáticamente y luego se reproducirá unas cuantas veces después de una actualización sigle solo para volver a sus malos caminos. ¡Fantástico!

En el anuncio de Google dice que para que los archivos multimedia se reproduzcan "automáticamente", debe haber tenido lugar una interacción entre el usuario y el sitio. Así que la mejor "solución" que he logrado encontrar hasta ahora es agregar un botón, lo que hace que la reproducción de archivos sea menos automática, pero mucho más estable / confiable.

Usé pixi.js y pixi-sound.js para lograr la reproducción automática en Chrome y 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>

también funciona en dispositivos móviles, pero el usuario debe tocar en algún lugar de la pantalla para activar el sonido.

Utilice en su iframelugar:

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

arreglo temporal

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

O usa un reproductor personalizado para activar el juego http://zohararad.github.io/audio5js/

Nota: la reproducción automática se volverá a habilitar el 31 de diciembre.

También agrego el atributo de controles al audio de etiquetas y simplemente lo oculto en CSS. Y todo funciona bien en Chrome.

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

Google cambió sus políticas el mes pasado con respecto a la reproducción automática dentro de Chrome. Por favor vea este anuncio .

Sin embargo, sí permiten la reproducción automática si está incrustando un video y está silenciado. Puede agregar la mutedpropiedad y debería permitir que el video comience a reproducirse.

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

Solución sin usar iframe o 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>

Con esta solución, también se evita el cuadro de diálogo abrir / guardar de Internet Explorer.

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

La etiqueta de video también puede reproducir audio. Dado que la etiqueta de audio no parece comportarse como debería, puede usar la etiqueta de video para el audio:

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

Podría usar <iframe src="link/to/file.mp3" allow="autoplay">, si el origen tiene un permiso de reproducción automática. Más info aquí .

El audioatributo de reproducción automática de HTML5 predeterminado no funciona en Chrome, pero puede forzar la reproducción automática de audio usando JavaScript. Prueba esto:

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

Esto funciona para mi.