Impostazione della posizione audio HTML5

Come passare a determinati offset temporali in elementi HTML5 Audio ?

Dicono che puoi semplicemente impostare la loro proprietà currentTime (enfasi sulla mia):

L’attributo currentTime deve, al momento di ottenere, restituire la posizione di riproduzione corrente, espressa in secondi. Nell’impostazione , se l’elemento multimediale ha un controller multimediale corrente, deve generare un’eccezione INVALID_STATE_ERR; in caso contrario, l’interprete deve cercare il nuovo valore (che potrebbe generare un’eccezione).

Ahimè, non sembra funzionare (ne ho bisogno in Chrome).

Ci sono domande simili, anche se non ci sono risposte.

Funziona sul mio chrome …

 $('#audio').bind('canplay', function() { this.currentTime = 29; // jumps to 29th secs }); 

Per saltare intorno a un file audio, il tuo server deve essere configurato correttamente.

Il client invia richieste di intervallo di byte per cercare e riprodurre determinate regioni di un file, quindi il server deve rispondere in modo adeguato:

Al fine di supportare la ricerca e la riproduzione di regioni dei media non ancora scaricati, Gecko utilizza le richieste di portata di byte HTTP 1.1 per recuperare il supporto dalla posizione di destinazione di ricerca. Inoltre, se non si servono intestazioni X-Content-Duration, Gecko utilizza le richieste dell’intervallo di byte per cercare fino alla fine del supporto (supponendo che si serva l’intestazione Content-Length) per determinare la durata del supporto.

Quindi, se il server risponde alle richieste dell’intervallo di byte correttamente, è ansible impostare la posizione dell’audio tramite currentTime :

 audio.currentTime = 30; 

Vedi MDN’s Configuring servers per Ogg media (lo stesso vale per altri formati, in realtà).

Inoltre, consultare Configurazione dei server Web per video Ogg HTML5 e audio .

È ansible utilizzare la proprietà dell’intervallo di tempo #t URI
e questo è valido sia per i media audio che video .

 stackoverflow.mp3#t=8.5 // Will start playing from the 8.5 sec. 
 var a = new Audio(); a.src= "http://upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg#t=4.5"; a.play(); 

Assicurati di provare a impostare la proprietà currentTime dopo che l’elemento audio è pronto per la riproduzione. È ansible associare la funzione oncanplay evento oncanplay definito nelle specifiche.

Puoi pubblicare un esempio del codice che fallisce?

Una soluzione molto più semplice è

 var element = document.getElementById('audioPlayer'); //first make sure the audio player is playing element.play(); //second seek to the specific time you're looking for element.currentTime = 226; 

Firefox effettua anche richieste di intervallo di byte quando cerca contenuti che non ha ancora caricato, non è solo un problema di Chrome. Impostare l’intestazione di risposta “Accept-Ranges: bytes” e restituire un codice di stato 206 Content parziale per consentire a qualsiasi client di effettuare richieste di intervallo di byte.

Vedere https://developer.mozilla.org/en-US/docs/Web/HTTP/Configuring_servers_for_Ogg_media#Handle_HTTP_1.1_byte_range_requests_correctly

Stavo affrontando il problema che la barra di avanzamento dell’audio non funzionava ma l’audio funzionava correttamente. Questo codice funziona per me. Spero che ti aiuti anche tu. Qui la canzone è l’object del componente audio.

Parte HTML

  

JQuery Part

  $("#seek").bind("change", function() { song.currentTime = $(this).val(); }); song.addEventListener('timeupdate',function (){ $("#seek").attr("max", song.duration); $('#seek').val(song.currentTime); }); 

La risposta di @katspaugh è corretta, ma esiste una soluzione alternativa che non richiede alcuna configurazione aggiuntiva del server. L’idea è di ottenere il file audio come un blob, trasformarlo in dataURL e usarlo come src per l’elemento audio .

Ecco la soluzione per $http angolari, ma se necessario posso aggiungere anche la versione JS vanilla:

 $http.get(audioFileURL, {responseType:'blob'}) .success(function(data){ var fr = new FileReader; fr.readAsDataURL(data); fr.onloadend = function(){ domObjects.audio.src = fr.result; }; }); 

avvertenze

  1. Questa soluzione alternativa non è adatta per file di grandi dimensioni.
  2. Non funzionerà con il cross-origin se il CORS non è impostato correttamente.

Imposta la posizione del tempo a 5 secondi:

 var vid = document.getElementById("myAudio"); vid.currentTime = 5;