reproduzca - El audio HTML5 no puede reproducirse a través de Javascript a menos que se active manualmente una vez

insertar video en html5

Question

Estoy tratando de obtener un pequeño archivo de sonido para jugar automáticamente usando una etiqueta y javascript para iniciarlo.

<audio id="denied" preload="auto" controls="false">
    <source src="sound/denied.wav" />
 </audio>

Y luego a través de javascript, en el momento apropiado:

$(''#denied'')[0].play()

Funciona bien en Chrome en mi escritorio. En Android 4.1.1, el sonido no se reproduce, a menos que pulse "reproducir" en los controles de audio HTML5 antes de que javascript intente reproducirlo.

Así que, básicamente, el navegador de Android (Stock o Dolphin) no reproducirá el audio a menos que el usuario lo inicie en algún momento antes del javascript. ¿Esto es intencionado? ¿Hay alguna forma de evitar esto?

Answer 1

Aquí hay una publicación de blog sobre el motivo y cómo superarlo al cargar todos los archivos de audio en la primera interacción del usuario y reproducirlos más tarde de manera programada: https://blog.foolip.org/2014/02/10/media- playback-restrictions-in-blink / Adoptando este enfoque, un pequeño módulo de javascript está disponible en GitHub https://github.com/MauriceButler/simple-audio

Intenté este enfoque simple por mi cuenta: ¡funcionó a la perfección y genial!

Answer 2

Bueno, para mi propósito, esto es lo que hice:

Afortunadamente, antes de que el usuario pueda activar el comportamiento para iniciar el audio, debe hacer clic en un botón. Ajusté el volumen del elemento a 0.0 y lo puse en "play" cuando hacen clic en este botón.

Después de reproducir el sonido en silencio, simplemente restablezco la propiedad de volumen a 1.0, y se reproduce sin la intervención del usuario.

Answer 3

El problema principal es que el sonido (en iOS y Android) debe ser activado por un clic del usuario. Mi solución fue muy simple. Ate el audio.play () a un escucha de evento de clic y luego pause inmediatamente. Desde ese punto y en el sonido funciona perfecto.

var myAudio = new Audio(''assets/myAudio.mp3'');
...
button.addEventListener("click", function() {
    myAudio.play();
    myAudio.pause();
    ...
});

Answer 4

En mi caso, esta fue una solución fácil:
https://.com/a/28011906/4622767
Copia y pega esto en tu Chrome:

chrome://flags/#disable-gesture-requirement-for-media-playback

Mi aplicación web tiene muchas páginas recargadas por lo que no puedo obligar al usuario a presionar un botón cada vez; pero es para uso interno, entonces puedo forzar a los usuarios a usar Chrome y configurar esa opción.

Answer 5

Me encontré con el mismo problema en mi aplicación. Mi escenario de uso de la aplicación era así:

1. haga clic en el botón para mostrar una tabla con información (acción del usuario)
2. muestre la tabla y actualice los datos en ella por AJAX
3. reproducir sonido cuando los datos han sido cambiados

Afortunadamente, tuve la acción del usuario (paso 1), así que pude "iniciar" el sonido y luego reproducirlo mediante javascript sin la acción del usuario necesaria. Vea el código.

HTML

<audio id="kohoutAudio">
    <source src="views/images/kohout.mp3">
</audio>

<button id="btnShow">Show table</button>

Javascript

$("#btnShow").click(function () {
    //some code to show the table
    //initialize the sound
    document.getElementById(''kohoutAudio'').play();
    document.getElementById(''kohoutAudio'').pause();
});

function announceChange(){
    document.getElementById(''kohoutAudio'').play();
};

Answer 6

No necesita JavaScript para la reproducción automática, y veo varios problemas en su código:

<audio id="denied" preload="auto" controls="false">
    <source src="sound/denied.wav" />
</audio>

Lo cambiaría a (en HTML5 no necesitas atributo = sintaxis de "valor" en algunos casos, eso es para XHTML):

<audio id="denied" autobuffer controls autoplay>
    <source src="sound/denied.wav" />
</audio>
<a href="#" id="play-button">play!</a>

En iOS, la reproducción automática está desactivada, debes hacer clic en el botón Reproducir o poner un evento de clic de usuario en controles personalizados como este con JavaScript:

var audio = document.getElementById(''denied'');
var button = document.getElementById(''play-button'');
button.addEventListener(''click'',function(){
    audio.play();
});

o con jQuery:

$(''#play-button'').click(function(){ audio.play(); });}

Editar

Tenga en cuenta que HTML5 es una tecnología bastante reciente (al menos algunas funcionalidades), por lo que la compatibilidad y la funcionalidad del navegador cambian de vez en cuando.

Animo a todos a mantenerse informados sobre el estado actual, ya que a veces las cosas empiezan a ser menos dependientes del hackeo, o al revés.

Un buen punto de partida: http://caniuse.com/#feat=audio (verifique las pestañas en la parte inferior).

También para una solución de audio global, recomiendo usar la biblioteca SoundManager2 JS

Answer 7

Por suerte para mí, la aplicación html5 en la que estoy trabajando solo necesita funcionar en Android 4.1, pero si intentas hacer algo multiplataforma, tendrás que adaptarlo un poco. Ni ajustar el volumen a 0.0, luego retroceder o reproducir automáticamente en el control funcionó para mí. También traté de silenciar y tampoco funcionó. Entonces pensé: ¿y si establezco la duración y solo reproduzco una cantidad minúscula del archivo? Aquí hay otra secuencia de comandos pirateados que realmente funcionó:

function myAjaxFunction() {
  clearTimeout(rstTimer); //timer that resets the page to defaults
  var snd=document.getElementById(''snd'');
  snd.currentTime=snd.duration-.01; //set seek position of audio near end
  snd.play(); //play the last bit of the audio file
  snd.load(); //reload file
  document.getElementById(''myDisplay'').innerHTML=defaultDisplay;
  var AJAX=new XMLHttpRequest(); //won''t work in old versions of IE
  sendValue=document.getElementById(''myInput'').value;
  AJAX.open(''GET'', encodeURI(''action.php?val=''+sendValue+''&fn=find''), true);
  AJAX.send();
  AJAX.onreadystatechange=function() {
    if (AJAX.readyState==4 && AJAX.status==200) {
      document.getElementById(''myDisplay'').innerHTML=AJAX.responseText;
      if (document.getElementById(''err'')) { //php returns <div id="err"> if fail
        rstTimer = setTimeout(''reset()'', 5000); //due to error reset page in 5 seconds
        snd.play(); //play error sound
        document.getElementById(''myInput'').value=''''; //clear the input
      }
    }
  }
}

Answer 8

Sé que en el safari móvil, cualquier llamada javascript para jugar () debe estar en la misma pila de llamadas que un evento de clic inicializado por el usuario . Suplantar el clic con un activador de javascript tampoco funcionará.

En mi nexus 7 puedo confirmar que a menos que el javascript haya sido activado por un clic del usuario, no se reproduce.

Answer 9

También me pasó a mí. Así es como he pirateado esto:

Configuro el audio para autoplay y establezco el volumen en 0 . Cuando lo necesito para jugar, uso el método load() y se reproducirá automáticamente. Es un archivo mp3 ligero y reproduce cada hora / dos horas, así que esto funciona bien para mí.

Answer 10

prueba esto

<audio id="denied" preload="auto" controls="false" autoplay="autoplay">
    <source src="sound/denied.wav" />
 </audio>