Reproducción automática de archivos de audio en un iPad con HTML5

Estoy intentando que un archivo de audio se reproduzca automáticamente en Safari en un iPad. Si voy a la página usando Safari en mi Mac, está bien. En el iPad, la reproducción automática no funciona.

ACTUALIZACIÓN: Este es un truco y ya no funciona en IOS 4.X y superior. Este funcionó en IOS 3.2.X.

No es verdad. Apple no quiere reproducir automáticamente video y audio en iPad debido a la gran cantidad de tráfico que puede usar en las redes móviles. No usaría la reproducción automática para el contenido en línea. Para los sitios HTML sin conexión es una gran característica y para eso la he usado.

Aquí hay una solución de "clic falso de JavaScript": http://www.roblaplaca.com/examples/html5AutoPlay/

Copiar y pegar el código del sitio:

<script type="text/javascript"> 
        function fakeClick(fn) {
            var $a = $('<a href="#" id="fakeClick"></a>');
                $a.bind("click", function(e) {
                    e.preventDefault();
                    fn();
                });

            $("body").append($a);

            var evt, 
                el = $("#fakeClick").get(0);

            if (document.createEvent) {
                evt = document.createEvent("MouseEvents");
                if (evt.initMouseEvent) {
                    evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                    el.dispatchEvent(evt);
                }
            }

            $(el).remove();
        }

        $(function() {
            var video = $("#someVideo").get(0);

            fakeClick(function() {
                video.play();
            });
        });

        </script> 

Esta no es mi fuente. Encontré esto hace algún tiempo y probé el código en un iPad y un iPhone con IOS 3.2.X.

También me gustaría enfatizar que la razón por la que no puede hacer esto es una decisión comercial que tomó Apple, no una decisión técnica. A saber, no había ninguna justificación técnica racional para que Apple desactivara el sonido de las aplicaciones web en el iPod Touch. Ese es solo un dispositivo WiFi, no un teléfono que puede incurrir en costosos cargos de ancho de banda, por lo que ese argumento no tiene mérito para ese dispositivo. Pueden decir que están ayudando con la administración de la red WiFi, pero cualquier problema con el ancho de banda en mi red WiFi es mi preocupación, no Apple.

Además, si lo que realmente les importaba era evitar el consumo excesivo de ancho de banda no deseado, proporcionarían una configuración para permitir a los usuarios optar por los sonidos de las aplicaciones web. Además, harían algo para impedir que los sitios web consuman un ancho de banda equivalente por otros medios. Pero no existen tales restricciones. Un sitio web puede descargar archivos enormes en segundo plano una y otra vez y a Apple no le importa eso. Y finalmente, creo que los sonidos se pueden descargar de todos modos, ¡así que NINGÚN ANCHO DE BANDA SE SALVA REALMENTE! Apple simplemente no les permite jugar automáticamente sin la interacción del usuario, lo que los hace inutilizables para juegos, que por supuesto es su verdadera intención.

Apple bloqueó el sonido porque comenzaron a notar que las aplicaciones HTML5 pueden ser tan capaces como las aplicaciones nativas, si no más. Si desea sonido en las aplicaciones web, debe presionar a Apple para que deje de ser anticompetitivo como Microsoft. No hay ningún problema técnico que pueda solucionarse aquí.

Apple rechaza de manera molesta muchos estándares web HTML5 en sus dispositivos iOS, por una variedad de razones comerciales. En última instancia, no puede precargar o reproducir automáticamente archivos de sonido antes de un evento táctil, solo reproduce un sonido a la vez y no es compatible con Ogg / Vorbis. Sin embargo, encontré una solución ingeniosa para permitirle tener un poco más de control sobre el audio.

<audio id="soundHandle" style="display:none;"></audio>

<script type="text/javascript">

var soundHandle = document.getElementById('soundHandle');

$(document).ready(function() {
    addEventListener('touchstart', function (e) {
        soundHandle.src = 'audio.mp3';
        soundHandle.loop = true;
        soundHandle.play();
        soundHandle.pause();
    });
});

</script>

Básicamente, comienza a reproducir el archivo de audio en el primer evento táctil, luego lo pausa inmediatamente. Ahora, puede usar los comandos soundHandle.play () y soundHandle.pause () en todo su Javascript y controlar el audio sin eventos táctiles. Si puede cronometrarlo perfectamente, haga que la pausa entre inmediatamente después de que termine el sonido. Luego, la próxima vez que lo reproduzca, volverá al principio. Esto no resolverá todo el lío que Apple ha hecho aquí, pero es una solución.

A partir de iOS 4.2.1, ni el clic falso ni el truco .load () funcionarán para reproducir automáticamente el audio en ningún dispositivo iOS. La única opción que conozco es que el usuario realice una acción de clic y comience la reproducción en el controlador de eventos de clic sin envolver la llamada .play () en nada asincrónico (ajax, setTimeout, etc.).

Alguien, por favor, dígame si me equivoco. Tenía lagunas que funcionaban tanto para iPad como para iPhone antes de la actualización más reciente, y todas parecen cerradas.

Confirmo que el audio no funciona como se describe (al menos en iPad con 4.3.5). El problema específico es que el audio no se cargará en un método asincrónico (ajax, evento de temporizador, etc.) pero se reproducirá si estaba precargado. El problema es que la carga debe estar en un evento activado por el usuario. Entonces, si puede tener un botón para que el usuario inicie la reproducción, puede hacer algo como:

function initSounds() {
    window.sounds = new Object();
    var sound = new Audio('assets/sounds/clap.mp3');
    sound.load();
    window.sounds['clap.mp3'] = sound;
}

Luego, para reproducirlo, por ejemplo, en una solicitud ajax, puede hacer

function doSomething() {
    $.post('testReply.php',function(data){
        window.sounds['clap.mp3'].play();
    }); 
}

No es la mejor solución, pero puede ayudar, especialmente sabiendo que el culpable es la función de carga en un evento no activado por el usuario.

Editar: encontré la explicación de Apple y afecta a iOS 4+: http://developer.apple.com/library/safari/#documentation/AudioVideo/Conceptual/Using_HTML5_Audio_Video/Device-SpecificConsiderations/Device-SpecificConsiderations.html

Intente llamar al método .load () antes que al método .play () en la etiqueta de audio o video ... que será HTMLAudioElement o HTMLVideoElement respectivamente. ¡Esa era la única forma en que funcionaría en el iPad para mí!

La reproducción automática no funciona en el iPad o iPhone para las etiquetas de video o audio. Esta es una restricción establecida por Apple para ahorrar ancho de banda a los usuarios.

Me parece que la respuesta a esta pregunta está (al menos ahora) claramente documentada en los documentos HTML5 de Safari :

Control de usuario de descargas a través de redes celulares

En Safari en iOS (para todos los dispositivos, incluido el iPad), donde el usuario puede estar en una red celular y cobrar por unidad de datos, la precarga y la reproducción automática están deshabilitadas. No se carga ningún dato hasta que el usuario lo inicia. Esto significa que los métodos de JavaScript play () y load () también están inactivos hasta que el usuario inicia la reproducción, a menos que el método play () o load () sea activado por la acción del usuario. En otras palabras, un botón de reproducción iniciado por el usuario funciona, pero un evento onLoad = "play ()" no.

Esto reproduce la película: <input type="button" value="Play" onClick="document.myMovie.play()">

Esto no hace nada en iOS: <body onLoad="document.myMovie.play()">

Me he confundido con esto mientras desarrollaba un prototipo de aplicación web rápida en iOS4.2 (compilación de desarrollo). La solución es bastante simple. Tenga en cuenta que parece que no puede tener ya la etiqueta en su página HTML, en realidad necesita insertar la etiqueta en el documento dinámicamente (tenga en cuenta que este ejemplo usa Prototype 1.7 para darle un toque extra de Javascript):

this.soundFile = new Element("audio", {id: "audio-1", src: "audio-1.mp3", controls: ""});
document.body.appendChild(this.soundFile);
this.soundFile.load();
this.soundFile.play();

Como no ha configurado un controlador, no debería ser necesario hacer nada complicado con CSS para ocultarlo / colocarlo fuera de la pantalla.

Esto parece funcionar perfectamente.

Apple no es compatible con el estándar por completo, pero hay una solución. Su justificación es la congestión de la red celular, tal vez porque aterrizará en páginas que reproducen audio aleatorio. Este comportamiento no cambia cuando un dispositivo se conecta a wifi, tal vez por coherencia. Por cierto, esas páginas suelen ser una mala idea de todos modos. No deberías intentar poner una banda sonora en cada página web. Eso está mal. :)

El audio html5 se reproducirá si se inicia como resultado de una acción del usuario. Cargar una página no cuenta. Por lo tanto, debe reestructurar su aplicación web para que sea una aplicación todo en una página. En lugar de un enlace que abre una página que reproduce audio, necesita ese enlace para reproducirlo en la página actual, sin un cambio de página. Esta regla de "interacción del usuario" se aplica a los métodos html5 que puede invocar en un elemento de audio o video. Las llamadas regresan sin ningún efecto si se disparan automáticamente al cargar la página, pero funcionan cuando se llaman desde los controladores de eventos.

Mi solución es disparar desde un evento táctil real en un menú anterior. Por supuesto, no te obligan a usar una interfaz de jugador específica. Para mis propósitos, esto funciona bien. Si no tiene una interfaz existente para usar, afaik está jodido. Tal vez podrías probar eventos de inclinación o algo ...

Si crea un elemento de audio usando:

var a = new Audio("my_audio_file.wav");

Y agregue un suspenddetector de eventos a través de:

a.addEventListener("suspend", function () {console.log('suspended')}, false);

Y luego cargue el archivo en Safari móvil (iPad o iPhone), verá que el mensaje 'suspendido' se registra en la consola del desarrollador. De acuerdo con la especificación HTML5, esto significa que "el agente de usuario no está obteniendo datos de medios de forma intencionada, pero no ha descargado todo el recurso de medios".

Llamar a un a.load () posterior, probar el evento "canplay" y luego usar a.play () parece un método adecuado para activar automáticamente el sonido.

Funciona con jQuery, probado en Ipad v.5.1.1

$('video').get(0).play();

Tienes que agregar / eliminar el elemento de video de la página.

Manejé esto adjuntando un controlador de eventos para todos los eventos para los que se le permite activar audio en el elemento del cuerpo, lo que activa cualquier elemento de audio html con reproducción automática para que se reproduzca una vez.

var mobile = /iPad|iPhone|iPod|android/.test(navigator.userAgent) && !window.MSStream;
if (mobile) {
    $('body').on('touchstart click doubleclick keydown', function() {
        $("audio[autoplay='autoplay']").each(
            function(){
                this.play();
                this.removeAttribute('autoplay');
            });
    });
}

Esto parece funcionar:

<html>
<title>
iPad Sound Test  - Auto Play
</title>
</head>
<body>
<audio id="audio" src="mp3test.mp3" controls="controls" loop="loop">
</audio>
<script type="text/javascript"> 
    window.onload = function() {
        var audioPlayer = document.getElementById("audio");
        audioPlayer.load();
        audioPlayer.play();
    };
    </script> 

</body>
</html>

Véalo en acción aquí: http://www.johncoles.co.uk/ipad/test/1.html (Archivado)

A partir de iOS 4.2, esto ya no funciona. Lo siento.