Ajuste del nivel de detalle del evento de audio 'timeupdate' HTML5

Question

Estoy intentando crear una operación de bucle sencillo el uso de audio HTML5 y tener una solución muy primitiva de la siguiente manera:

$(audio).bind('timeupdate', function() { 
    if (audio.currentTime >= 26){ 
    var blah = audio.currentTime; 
    audio.currentTime = 23; 
    console.log(blah); 
    } 
}) 

Esto funciona bien, pero el único problema aquí es que el evento timeupdate no se dispara de manera muy consistente. Por ejemplo, la console.log anterior regresó: 26,14031982421875

26,229642868041992

26,13462257385254

26,21796226501465

... etc. (Usted consigue la idea ... tiempos incoherentes)

Obviamente esto no funcionará para una aplicación donde el tiempo es importante (aplicaciones de música). Así que la solución obvia para mí sería aumentar la granularidad con la que se desencadena el evento timeupdate. No he podido encontrar ningún documento de la API ... pero me encantaría saber si hay alguna forma de hacerlo.

Answer 1

Lo siento, pero así es como funciona. Desde el html5 specs:

cada 15 a 250 ms, o cada vez que cambia la posición del regulador de medios del MediaController, lo que ocurra con menos frecuencia, el agente de usuario debe colocar en fila una tarea para disparar un evento simple llamado timeupdate en el MediaController.

Además,

El evento por lo tanto no debe ser más rápido que disparó sobre 66Hz o más lento que 4 Hz (asumiendo que los controladores de eventos no tome más de 250 ms para funcionar). Se recomienda a los agentes de usuario que varíen la frecuencia del evento según la carga del sistema y el costo promedio de procesar el evento cada vez, de modo que las actualizaciones de UI no sean más frecuentes de lo que el agente de usuario puede manejar cómodamente al decodificar el video.

Si usted lee a través de la especificación, se puede obtener la idea de que timeupdate evento es algo de una especie de "mejor esfuerzo" del evento. Se disparará cuando sea posible y siempre y cuando no afecte demasiado al rendimiento.

Puede filtrar los eventos descartando algunos de vez en cuando para suavizar los tiempos de llegada, pero me temo que no es posible hacer lo contrario.

Answer 2

Debe tener en cuenta que puede leer la propiedad CurrentTime de un video con mucha más frecuencia. Si el tiempo es realmente crítico y puede vivir con un poco de incertidumbre, puede intentarlo en su lugar.

Sin embargo, es mucho menos elegante que usar el evento propio de la etiqueta timeupdate.

setInterval(function() { 
    console.log(audio.currentTime); // will get you a lot more updates. 
}, 30); 

En este caso, usted tendrá que gestionar el intervalo de usted mismo, asegúrese de que desactiva antes null ing el elemento de audio. Pero es una posibilidad.

Estoy usando este enfoque en un elemento de video, pero debería aplicarse también aquí.