Cómo hacer que la reproducción automática de audio en Chrome

94

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?

Akshay Rathod
fuente
7
El hecho de que Google haya hecho esto es absurdo. Literalmente solo dijeron "bueno, no hay música para tu juego a menos que un usuario haga clic en Reproducir música". Inaceptable. ¡Tan enojado!
Hobbes
2
@Hobbes estuvo de acuerdo. Al menos debería haber excepciones. Como mencioné en otro cartel, tengo una página de "MÚSICA", con un enlace de sitio "mymusic.html", al que solo se puede acceder con un enlace / botón claramente etiquetado como MI MÚSICA ". Bastante absurdo que alguien vaya allí y esté sorprendido o molesto por la música de muestra que se está reproduciendo allí. Especialmente con un botón DETENER MÚSICA de "posición fija" claro. Esta política es un caso de reacción exagerada a las prácticas abusivas.
Randy

Respuestas:

104

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.

ajbee
fuente
¿Cómo se hace el bucle de audio?
Kwarrtz
1
La solución 2 funcionó para mí. Nota al margen: si está trabajando para la web y Phonegap al mismo tiempo, Phonegap no necesita esta solución y en realidad se lo toma bastante mal. Entonces, si tiene una base de código común para la web y Phonegap, asegúrese de encontrar una manera de aplicar esta solución solo en la web.
Ignacio Segura
2
El enlace al archivo de silencio está muerto, así que encontré algunos otros archivos de silencio en GitHub: github.com/anars/blank-audio . Estoy usando 1-second-of-silence.mp3para mi proyecto, pero supongo que cualquier archivo de esta colección funcionaría.
Travis
13
Parece reventado a partir de Chrome 76.
mightyiam
3
Sí, esto ya no funciona (si funcionó en el pasado)
Yulian
28

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.

Leonard Storcks
fuente
5
Bien, si bien esto funciona, también se siente como si estuviera explotando un error, o al menos, un comportamiento no deseado. Me imagino que alguien informará esto a Google para que no dependa de que funcione por mucho tiempo. ¡Buen hallazgo!
Neil Bryson
4
Un poco fuera de tema, pero su silent.mp3 es bastante grande a 36.7k. Pruebe esto (216 bytes) - s3-eu-west-1.amazonaws.com/neilbryson.net.random/silence.mp3
Neil Bryson
3
El enlace silent.mp3 está muerto. Puedes crear el tuyo propio .
idbrii
1
@Toniq Por supuesto, disculpas a todos - s3-eu-west-1.amazonaws.com/omegasquadron.neilbryson.net/…
Neil Bryson
1
Sí, están en eso ... ya no funciona ni en Firefox ni en Chrome
Stefan Reich
15

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

deltran
fuente
3
Entonces, ¿estás diciendo que no hay forma de que podamos reproducir automáticamente el audio en el navegador Chrome?
Akshay Rathod
Además, hay una opción de permisos en el navegador Chrome en Android ahora que el usuario puede seleccionar permitir sonidos en reproducción automática
zeta
8

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>
Manuel Alves
fuente
¿Puedes enviarme un violín para esta implementación? Será realmente útil
Vikash
5
¿Ya no funciona? Recibí este mensaje: "No se permitió que se iniciara el AudioContext. Debe reanudarse (o crearse) después de un gesto de usuario en la página. Developers.google.com/web/updates/2017/09/… "
thdoan
Trabajando en Chrome 81.0.4044.138 en mac 👍
Mosh Feu
5

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.

Paul Becker
fuente
Creo que esto está en el camino correcto, de obedecer las nuevas políticas que requieren ALGUNA interacción del usuario para reproducir música. Agregué esto al evento táctil que ya agregué para navegadores móviles, y un evento de desplazamiento "a veces funciona". Desafortunadamente, la política "no play ()" no parece permitir que el desplazamiento de la rueda del mouse cuente como una interacción del usuario, pero también estoy trabajando en eso. La cuestión es que mi página es una página de MÚSICA, literalmente llamada "mymusic.html", a la que se llega siguiendo un botón de MÚSICA bien etiquetado. Entonces, si alguna vez hubo una página para justificar 'reproducir' en carga ', ¡esa realmente debería!
Randy
@Randy Estoy en una situación muy similar, estoy trabajando en una página de música y quiero implementar la reproducción automática. Agregar el atributo de reproducción automática funcionó de manera muy inconsistente: el mismo código funciona ocasionalmente, pero no siempre. No tengo errores de consola o red. ¿Resolviste tu situación?
Lazarus Rising
@LazarusRising: si bien todo esto parecía comenzar con los navegadores de teléfonos, estoy notando que las versiones más nuevas de los navegadores de escritorio también rechazan la reproducción automática. Sin embargo, debo decir que estoy satisfecho con la necesidad de que un evento desencadenado por la interacción del usuario inicie la música. De hecho, incluso yo, como autor de la página, estoy empezando a sentirme molesto al ir a mi página y empezar a escuchar música sólo porque toqué la pantalla. Estoy empezando a ver la lógica de por qué se está eliminando la reproducción automática. Y dado que está comenzando a suceder universalmente, no siento que mi sitio sea el único que no pueda hacerlo.
Randy
Chrome lanza una infracción por forzar el juego.
Gabriel Petersson
2

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.

Murtaza JAFARI
fuente
2

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>
Waleed Aldhahi
fuente
No parece funcionar en la versión de Chrome 85.0.4183.83 (compilación oficial) (64 bits)
MC9000
1

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.

Puto Miké
fuente
3
Depender de la interacción del usuario no es una reproducción automática.
mightyiam
0

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.

Akshay Rathod
fuente
0

Utilice en su iframelugar:

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

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.

Youssef KH
fuente
Esta no es una respuesta, porque no se reproduce automáticamente.
mightyiam
1
@mightyiam, esta es una solución, ya que no hay forma de reproducción automática ya que Chrome lo bloqueó
Youssef KH
0

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>
Yuriy Boyko
fuente
1
Quizás si su MEI para ese sitio permite la reproducción automática. De lo contrario, no veo ninguna razón por la que esto funcione.
mightyiam
0

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>
SuPronunciado
fuente
4
quiero que el audio se reproduzca en segundo plano.
Akshay Rathod
13
La reproducción automática de audio silenciado no puede considerarse una respuesta.
mightyiam
@Akshay Rathod, ¿encontraste soluciones?
The Dead Man
0

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>

Juan
fuente
1
No No funciona en Chrome versión 85.0.4183.83 (compilación oficial) (64 bits)
MC9000
0

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>
Campbell
fuente
-2

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

Martin van Houte
fuente
muestra controles y no quiero nada en la página. solo reproducir y pausar el botón.
Akshay Rathod
y cómo hacer un bucle de audio?
Akshay Rathod
1
@AkshayRathod, compruebe el atributo de bucle HTML <audio> . Mientras que, en XHTML, la minimización de atributos está prohibida y el atributo de bucle debe definirse como <audio loop = "loop">.
hmd
-4

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.

Mahtab Alam
fuente
3
no es que la reproducción automática "no funcione", es que está sujeta a una política en la que la reproducción automática no funcionará si no se cumplen los requisitos de la política. Consulte developers.google.com/web/updates/2017/09/… . Este código no eludirá esa política. Si funcionó para usted, es porque alcanzó el umbral y / o estableció alguna marca de desarrollador. Pero como dice esa página, no puede suponer que funcionará para todos.
ADyson
Al menos en FF 66, esto tampoco funcionará. La nueva política es bloquear el juego () si no fue activado de alguna manera por la interacción del usuario.
Randy