HTML 5 audio .play () retraso en el mobile

Acabo de crear una aplicación en time real usando socket.io, donde un usuario "maestro" puede activar sonidos en dispositivos receptores (browseres de escritorio, browseres mobilees). Ese usuario maestro ve una list de files de sonido y puede hacer clic en "Reproducir" en un file de sonido.

La reproducción de audio es instantánea en los browseres. En los mobilees, sin embargo, hay un retraso de 0,5 a 2 segundos (mi Nexus 4 y iPhone 5 duran aproximadamente 1 segundo y el iPhone 3GS tiene 1 o 2 segundos).

He intentado varias cosas para optimizar la reproducción de audio para hacerlo más rápido en los teléfonos mobilees. En este momento (en la mejor "fase" de su optimization, diría), combino todos los mp3 en un solo file de audio (crea files .mp3, .ogg y .mp4). Necesito ideas sobre cómo puedo corregir / mejorar este problema. El cuello de botella realmente parece estar en los methods de audio hmtl 5 como .play() .

En los receptores que uso como tal:

 <audio id="audioFile" preload="auto"> <source src="/output.m4a" type="audio/mp4"/> <source src="/output.mp3" type="audio/mpeg"/> <source src="/output.ogg" type="audio/ogg"/> <p>Your browser does not support HTML5 audio.</p> </audio> 

En mi JS:

 var audioFile = document.getElementById('audioFile'); // Little hack for mobile, as only a user generated click will enable us to play the sounds $('#prepareAudioBtn').on('click', function () { $(this).hide(); audioFile.play(); audioFile.pause(); audioFile.currentTime = 0; }); // Master user triggenetworking a sound sprite to play socket.on('playAudio', function (audioClip) { if (audioFile.paused) audioFile.play(); audioFile.currentTime = audioClip.startTime; // checks every 750ms to pause the clip if the endTime has been reached. // There is a second of "silence" between each sound sprite so the pause is sure to happen at a correct time. timeListener(audioClip.endTime); }); function timeListener(clipEndTime) { this.clear = function () { clearInterval(interval); interval = null; }; if (interval !== null) { this.clear(); } interval = setInterval(function () { if (audioFile.currentTime >= clipEndTime) { audioFile.pause(); this.clear(); } }, 750); } 

También se considera blob para cada sonido, pero algunos sonidos pueden durar minutos, por eso recurrí a la combinación de todos los sonidos para un gran file de audio (mejor que varias tags de audio en la página para cada clip)

2 Solutions collect form web for “HTML 5 audio .play () retraso en el mobile”

Su configuration funciona bien en el escritorio debido al atributo de preload .

Desafortunadamente, aquí está Apple sobre el tema de la preload :

Safari en iOS nunca se precarga.

Y aquí está MDN :

Nota: Este valor a menudo se ignora en las plataforms mobilees.

Las plataforms mobilees están haciendo una compensación para ahorrar batería y el uso de datos solo para cargar medios cuando el usuario interactúa o se reproduce mediante progtwigción (la autoplay generalmente no funciona por motivos similares).

Creo que lo mejor que puedes hacer es combinar tus pistas juntas, como dijiste que hiciste, para que no tengas que pagar el "costo" inicial de carga.

En lugar de pausar / reproducir, simplemente configuro el volumen a 0 cuando no debería estar en reproducción, y de nuevo a 1 cuando debería estar en reproducción. Los methods de Audio currentTime y el volume no ralentizan la reproducción de audio, ni siquiera en un iPhone 3GS.

También agregué el atributo 'loop' al elemento de audio por lo que nunca debe ser .play() 'ed nuevamente.

Fue fructífero combinar todos los sonidos mp3 porque estas soluciones pueden funcionar debido a eso.

Editar: audioElement.muted = true o audioElement.muted = false tiene más sentido.

Edit2: No puedo controlar el volumen en nombre del usuario en iOS, así que debo pausar () y reproducir () el elemento de audio en lugar de simplemente silenciarlo y desactivarlo.

  • Cómo detectar el evento de cambio de contenido en un div
  • La class existe, pero no se encuentra
  • Implementar la window de Jquery en el ipad
  • la respuesta de ajax debe asignarse a un div
  • Crea copos de nieve en jquery
  • ¿Qué es "jQuery.event.special"?
  • Cómo deshabilitar todo el contenido div
  • jQuery comtesting si onClick existe en el elemento
  • ¿Cómo se captura un evento para una URL que se dejó caer en un cuadro de input?
  • Captura todos los cambios en los contenidos de un cuadro de input usando Javascript / jQuery
  • consumiendo REST API en el lado del cliente usando JQuery para la aplicación phonegap
  • ¿Cómo get el text seleccionado en textarea usando jQuery en Internet Explorer 7?
  • Interruptor Bootstrap verificado evento?
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.