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.

  • leer attributes de espacio de nombres con jquery
  • Usar el método submitHandler del complemento de validation de jQuery correctamente
  • Cómo pasar el background: url dinámicamente usando javascript to css?
  • Eliminar styles de text al copyr / cortar con CSS o Javascript
  • ¿Por qué no puedo activar el evento `change` de radio usando jquery?
  • JQuery: ¿alternar una image dentro de un div onclick?
  • Cómo agregar una image de bienvenida / marcador de position para un video de YouTube
  • Javascript o Jquery: desplácese a la position fija div
  • Cómo establecer el margen con jquery?
  • Último segmento de URL
  • Mostrar y ocultar el elemento html en la opción seleccionada cambiar
  • ¿Cómo replace más de una vez?
  • Jquery manipula urls
  • Javascript tiene muchos buenos JS marco (como Node.js AngularJS Vue.js React.js) es el mejor lenguaje de script.