Etiqueta de audio HTML5 en Safari tiene un retraso

Estoy tratando de lograr un comportamiento simple similar a un doodle, donde suena un sonido mp3/ogg al hacer clic, usando la etiqueta html. Se supone que funciona con Firefox, Safari y Safari El iPad es muy deseable.Etiqueta de audio HTML5 en Safari tiene un retraso

he probado muchos enfoques y han llegado a esto:

HTML

<span id="play-blue-note" class="play blue" ></span> 
    <span id="play-green-note" class="play green" ></span> 


    <audio id="blue-note" style="display:none" controls preload="auto" autobuffer> 
     <source src="blue.mp3" /> 
     <source src="blue.ogg" /> 
     <!-- now include flash fall back --> 
    </audio> 

    <audio id="green-note" style="display:none" controls preload="auto" autobuffer> 
     <source src="green.mp3" /> 
     <source src="green.ogg" /> 
    </audio>

function addSource(elem, path) { 
    $('<source>').attr('src', path).appendTo(elem); 
} 

$(document).ready(function() { 


    $('body').delegate('.play', 'click touchstart', function() { 
     var clicked = $(this).attr('id').split('-')[1]; 

     $('#' + clicked + '-note').get(0).play(); 



    }); 

});

En realidad se puede ver toda la demo en IGN .com.uy/loog/

Parece que funciona bien en Firefox, pero Safari parece tener un retraso cada vez que hace clic, incluso cuando hace clic varias veces y el archivo de audio se ha cargado. En Safari en iPad, se comporta de manera casi impredecible.

Además, el rendimiento de Safari parece mejorar cuando pruebo localmente, supongo que Safari está descargando el archivo cada vez. es posible? ¿Cómo puedo evitar esto? Gracias!

Fuente

2012-03-21 Nacho

¿Alguna información sobre el problema de Safari? : S – Nacho

Las respuestas actuales son correctas y, en función de su disposición, completamente en línea con [esta respuesta anterior] (http://stackoverflow.com/a/7972609/517815) en un hilo similar. La solución más efectiva, según lo citado por el autor y en [esta respuesta en este hilo] (http: // stackoverflow.com/a/9960247/517815), es para destruir todos tus comportamientos en un solo archivo y llamar a él en diferentes marcos. Es mucho trabajo extra, pero eso es lo que sucede cuando Apple toma una decisión de diseño con la que todos los demás se ven obligados a cumplir. (Avíseme si prefiere esto como respuesta.) – MrGomez

@ign ¿logró reproducir varios audios a la vez en Safari de escritorio? Estoy experimentando retraso con el escritorio Safari, lamentablemente. FF y Chrome funcionan bien. – trainoasis

Acabo de responder otra pregunta de iOS/<audio> hace unos minutos. Parece aplicar también aquí:

La precarga de <audio> y <video> en dispositivos iOS está desactivada para ahorrar ancho de banda.

en Safari en iOS (para todos los dispositivos, incluyendo iPad), donde el usuario puede estar en una red celular y se cargará por unidad de datos, la precarga y reproducción automática están desactivados. No se cargan datos hasta que el usuario lo inicia.

Fuente: Safari Developer Library

Fuente

2012-03-21 19:24:47 j08691

Gracias. Entonces, supongo que no hay manera de lograr retroalimentación casi en tiempo real en el iPad, ¿verdad? ¿Alguna idea sobre Safari? – Nacho

El problema con Safari es que pone una solicitud cada vez que el archivo de audio que se está reproduciendo. Puede intentar crear un manifiesto de caché HTML5. Lamentablemente, mi experiencia ha sido que solo puede agregar a la caché un archivo de audio a la vez. Una solución podría consistir en fusionar secuencialmente todos sus archivos de audio en un único archivo de audio y comenzar a reproducir en una posición específica según el sonido que se necesite. Puede crear un intervalo para seguir la posición de reproducción actual y pausarla una vez que ha alcanzado una marca de tiempo determinada.

Más información acerca de la creación de una memoria caché de HTML5 manifiesta aquí:

http://www.html5rocks.com/en/tutorials/appcache/beginner/

http://www.whatwg.org/specs/web-apps/current-work/multipage/offline.html

espero que ayude!

Fuente

2012-03-31 22:28:02 Reinaldo

Gracias por su visión. Sin embargo, parece demasiada molestia para una tarea simple que estoy tratando de implementar. – Nacho

No creo que tenga razón sobre la solicitud cada vez, pero creo que puede hacer un buen punto al poner todos los efectos de sonido en un solo archivo y reproducir en desplazamientos en diferentes contextos, como se describe en la sección Especificación del rango de reproducción en https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_HTML5_audio_and_video. Me pregunto qué tan bien funcionaría esto con múltiples elementos

Esto significa que con sonidos que se repiten rápidamente, como el disparo del jugador, impactos de bala, etc., las repeticiones a menudo no se reproducen. Otra posible solución podría consistir en tener varios elementos

Apple decidió (para ahorrar dinero en celluar) no precargar <audio> y <video> elementos HTML.

De the Safari Developer Library:

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

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

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

No creo que se puede pasar por alto esta restricción, pero es posible que pueda a.

Recuerde: Google es su mejor amigo.

Actualización: Después de algunos experimentos, he encontrado una manera de jugar el <audio> con JavaScript:

var vid = document.createElement("iframe"); 
vid.setAttribute('src', "http://yoursite.com/yourvideooraudio.mp4"); // replace with actual source 
vid.setAttribute('width', '1px'); 
vid.setAttribute('height', '1px'); 
vid.setAttribute('scrolling', 'no'); 
vid.style.border = "0px"; 
document.body.appendChild(vid);

Nota: yo sólo probamos con <audio>.

Actualización 2:jsFiddle here. Parece funcionar.

Fuente

2012-04-02 20:00:12

La pregunta no es cómo reproducir el audio, es por eso que hay un retraso. – j08691

@ j08691 Dije que –

Su respuesta es solo una regurgitación de lo que ya he publicado y un fragmento de cómo reproducir un archivo de audio. ¿Me estoy perdiendo algo nuevo o diferente de lo que estás contribuyendo que realmente responde la pregunta? – j08691

sus archivos de audio se cargan una vez y luego almacenado en caché .. jugar los sonidos en varias ocasiones, incluso después de actualización de la página, no causó más solicitudes HTTP en Safari ..

sólo tenía un vistazo a uno de sus sonidos en una editor de audio: hubo una pequeña cantidad de silencio al principio del archivo ... esto se manifestará como latencia ...

es la opción viable para usted?

Fuente

2012-04-02 21:49:57 Lloyd

Gracias, no creo que la demora sea causada por el silencio en el archivo, sin embargo. Comprobaré en Web Audio API. – Nacho

Tengo este mismo problema. Lo que es extraño es que estoy precargando el archivo. Pero con WiFi funciona bien, pero en los datos del teléfono, hay una gran demora antes de comenzar. Pensé que tenía algo que ver con las velocidades de carga, pero no empiezo a reproducir mi escena hasta que se cargan todas las imágenes y el archivo de audio. Cualquier sugerencia seria genial. (Sé que esta no es una respuesta, pero pensé que era mejor hacer una publicación en el dúo).

Fuente

2013-11-04 04:23:43

Etiqueta de audio HTML5 en Safari tiene un retraso

Respuesta

Cuestiones relacionadas