videos - reproduccion automatica de video html5

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

Question

reproducción automática de audio que funciona en Mozilla, Microsoft Edge y Google Chrome antiguo también, pero no en Google Chrome nuevo. Han bloqueado la reproducción automática. ¿Hay alguna manera de hacer que el audio se reproduzca automáticamente en google chrome?

Answer 1

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 diálogo de 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>

Answer 2

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.

Se permite la reproducción automática con sonido si:

• El usuario ha interactuado con el dominio (clic, toque, etc.).
• En el escritorio, el umbral del índice de compromiso de medios del usuario se ha cruzado, lo que significa que el usuario ha reproducido previamente el video con sonido.
• En el móvil, el usuario ha agregado el sitio a su pantalla de inicio.

también

• Los fotogramas principales 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 puede encontrar aquí: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes

Answer 3

Agrego controles, atributo, etiqueta, audio y simplemente lo oculto en CSS. Y todo funciona bien en Chrome.

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

Answer 4

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 lugar de la página.

También elimina instantáneamente el EventListener, por lo que si utiliza los controles de audio, el usuario puede silenciarlo o pausarlo y la música no volverá a comenzar cuando haga clic en otro lugar.

Answer 5

El atributo de reproducción automática de audio 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

Answer 6

Google cambió sus políticas el mes pasado con respecto a la reproducción automática dentro de Chrome. Por favor vea este https://developers.google.com/web/updates/2017/09/autoplay-policy-changes .

Sin embargo, sí permiten la reproducción automática si está incrustando un video y está silenciado. Puede agregar la propiedad muted 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>

Answer 7

Hay un truco realmente bueno 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 que silence.mp3 solo hay 0.5 segundos de silencio.

Esta

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

trabaja despues

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

Véalo en acción: http://deinesv.cf/

Answer 8

He estado criticando esto hoy, y solo quería agregar un poco de curiosum que descubrí a la discusión.

De todos modos, me he ido 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, esto, una "solución" que está algo fuera de los límites si prefiere simplemente generar su propia cosa (lo que hacemos):

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

El descubrimiento que he hecho y también la parte verdaderamente divertida (¿extraño? ¿Extraño? ¿Ridículo?) Es que, en el caso de los dos anteriores, puedes vencer al sistema dándole a F5 un golpeteo adecuado; Si presionas refrescar repetidamente muy rápidamente (unas 5 a 10 veces deberían hacer el truco), el audio se reproducirá automáticamente y luego se reproducirá unas cuantas veces en una actualización de sigle solo para regresar a sus formas malvadas. ¡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. Por lo tanto, la mejor "solución" que he logrado encontrar hasta ahora es agregar un botón, haciendo que la reproducción de archivos sea menos automática, pero mucho más estable / confiable.

Answer 9

Podría usar <iframe src="link/to/file.mp3" allow="autoplay"> , si el origen tiene un permiso de reproducción automática. Más información https://developers.google.com/web/updates/2017/09/autoplay-policy-changes .

Answer 10

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

Que esto funcionará como quieras:

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

Answer 11

Utilicé 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 tiene que tocar en algún lugar de la pantalla para activar el sonido.

Answer 12

Utilice iframe lugar:

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

Answer 13

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 activar el 31 de diciembre.

Answer 14

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 audio etiqueta de audio también para los navegadores que no sean de 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 iframe que 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 silence.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 # 2 porque es un enfoque más limpio para no confiar tanto en JavaScript.