Html5 Precisione data/ora audio

Question

Sto lavorando con audio HTML5. Per il mio caso d'uso, ho bisogno di ascoltare la durata audio riprodotta e una volta superata una certa soglia, mettere in pausa l'audio. Quindi, qualcosa di simile a:

$(audio).bind('timeupdate', function() { 
    if (audio.currentTime >= 10){ 
    audio.pause(); 
    } 
}); 

Quello che sto notando è che per il momento il mio gestore viene eseguito, audio.currentTime è intorno 10.12878, 10.34023 ecc e, di conseguenza, qualche piccolo extra audio viene riprodotto prima di essere messo in pausa.

Un altro question sembra aver documentato lo stesso problema. La domanda è datata nel 2012, quindi mi chiedo se lo stato dell'arte è migliorato.

In caso contrario, quali altri modi esistono per eseguire questa operazione con maggiore precisione? Non ho mai lavorato con l'audio molto prima e apprezzerei davvero l'aiuto.

Answer 1

Così ho ricercato la mia strada attraverso questo problema ed è venuto fuori con i seguenti risultati:

1) HTML audio è alcuna dadi per un tale scenario. È un API molto limitato e non offre un controllo audio a grana fine. Le API Web Audio sono la soluzione giusta per questo.

2) L'API Web Audio non è la cosa più facile da leggere/comprendere ed è forse debolmente implementata su vari browser. È meglio trovare un buon wrapper attorno ad esso che ritorni al web audio o flash quando Web Audio non è disponibile in un browser.

3) Alcuni wrapper esistono come howler.js, sound.js e SoundManager2. I tre SoundManager2 sembrano la soluzione migliore a prima vista. Demo 4G a http://www.schillmania.com/projects/soundmanager2/demo/api/ risolve efficacemente un problema molto simile come nello scenario nella domanda.

Aggiornamento: SoundManager2 in realtà non supporta la web audio api. Da technotes:

SM2 attualmente non utilizza l'API Webkit Audio. Potrebbe essere sperimentalmente o più formalmente aggiunto in un momento futuro, quando l'API è più universalmente supportata.

Answer 2

Secondo MDN documentazione, timeupdate evento

La frequenza evento dipende dal carico di sistema, ma sarà gettato tra circa 4 Hz e 66Hz (assumendo che i gestori di eventi non richiedono più di 250 ms per l'esecuzione). Agenti utente sono invitati a variare la frequenza dell'evento in base al carico del sistema e il costo medio di elaborare l'evento ogni volta, in modo che gli aggiornamenti dell'interfaccia utente non siano più frequenti di quello che l'utente possa gestire comodamente mentre decodifica il video.

Per mettere in pausa l'audio allo 10.0nnnnn, è possibile utilizzare requestAnimationFrame; condizione this.currentTime > 9.999 per chiamare .pause() prima di raggiungere 10.000000.Nota: 9.999 può essere impostato su un valore compreso tra 9.9 e 9.99750, che potrebbe anche sospendere temporaneamente l'audio su 9.99nnnn; vale a dire, prima di raggiungere 10.0

var requestAnimationFrame = window.requestAnimationFrame; 

var audio; 

function trackCurrentTime() { 
    // `this` : `audio` 
    console.log(this.currentTime); 
    if (this.currentTime > 9.999) { 
    this.pause(); 
    } else { 
    requestAnimationFrame(trackCurrentTime.bind(this)) 
    } 
} 

var request = new XMLHttpRequest(); 
request.open("GET", "/path/to/audio", true); 
request.responseType = "blob"; 
request.onload = function() { 
    if (this.status == 200) { 
    audio = new Audio(URL.createObjectURL(this.response)); 
    audio.onpause = function(e) { 
     console.log(e.target.currentTime) 
    } 
    audio.load(); 
    audio.play(); 
    trackCurrentTime.call(audio); 
    } 
} 
request.send(); 

jsfiddle http://jsfiddle.net/Lg5L4qso/7/

Answer 3

HTML audio è niente da fare per un tale scenario. È un API molto limitato e non offre un controllo audio a grana fine. Web Audio API è la strada da percorrere per questo.