Come si crea una barra di caricamento per un elemento audio HTML5?

Question

Sto provando a creare una barra di caricamento (che mostra la percentuale caricata/bufferizzata) per un elemento audio HTML5.

Per il tag video è possibile calcolare con la seguente:

video.buffered.end(0)/video.duration 

Ma non riesco a farlo funzionare con il tag audio. Restituisce solo un valore fisso.

Qualche idea?

Grazie!

Answer 1

Qual è il valore fisso restituito? Puoi creare un semplice jsfiddle per dimostrare il problema?

Questo html5 doctor tutorial è stato scritto di recente e ha alcune buone informazioni sullo stato attuale di riproduzione di HTML5 Audio. Il seguente a metà strada punta in basso nella pagina sembra che potrebbe essere pertinente nel vostro caso:

Potrebbe essere necessario controllare l'evento durationchange come alcune durate potrebbe cambiamento mentre i media download. Inoltre, a seconda che i metadati siano disponibili , potrebbe essere necessario attendere fino a quando l'audio inizia a suonare su verificarne la durata. In breve, tieni d'occhio l'evento durationchange, e fai attenzione ai valori NaN quando la durata non è ancora nota!

Answer 2

è possibile utilizzare il seguente codice per ottenere lo stato di avanzamento di un elemento audio HTML5 e applicarlo a un elemento <progress>:

var myAudio = document.getElementById('#myAudio'); 
var myProgressBar = document.getElementById('#myProgressBar'); 

myAudio.addEventListener('timeupdate', onLoadProgress); 

function onLoadProgress() { 
    var progress = parseInt(((myAudio.currentTime/myAudio.duration) * 100), 10); 
    myProgressBar.value = progress; 
} 

Answer 3

Calling end metodo su buffered senza controllare è inaffidabile. È possibile che tu stia cercando di chiamare il metodo sul nulla. Controllare questo violino:

document.querySelector('span').innerHTML = document.querySelector('audio').buffered.length;

<audio src="http://myst729.qiniudn.com/within-temptation_pale.mp3" controls autoplay></audio> 
 
<p>Buffered Length: <span></span></p>

Vedi? All'inizio, la lunghezza del buffer è 0 - non è stato caricato nulla. È necessario essere sicuri che la lunghezza del buffer non sia 0 prima di chiamare il metodo start o end.

---

Ogni volta che leggete buffered, è fissato in effetti. Quindi, per ottenere un effetto visivamente "carico", è necessario leggerlo ancora e ancora e ancora.

Qui provo a aggiornare la percentuale caricato e giocato ogni 50 millisecondi:

var audio = document.querySelector('audio'); 
 
var percentages = document.querySelectorAll('span'); 
 

 
function loop() { 
 
    var buffered = audio.buffered; 
 
    var loaded; 
 
    var played; 
 

 
    if (buffered.length) { 
 
    loaded = 100 * buffered.end(0)/audio.duration; 
 
    played = 100 * audio.currentTime/audio.duration; 
 
    percentages[0].innerHTML = loaded.toFixed(2); 
 
    percentages[1].innerHTML = played.toFixed(2); 
 
    } 
 

 
    setTimeout(loop, 50); 
 
} 
 

 
loop();

<audio src="http://myst729.qiniudn.com/within-temptation_pale.mp3" controls autoplay></audio> 
 
<p>Loaded: <span></span>%</p> 
 
<p>Played: <span></span>%</p>

NOTA: Il file MP3 potrebbe non essere accessibile al tuo posto. Se è così, prova un'altra fonte a tuo favore. Altrimenti sentirai una bella voce femminile, e vedere la percentuale cambia continuamente, finendo per finire al 100%.

Answer 4

Non sono abbastanza sicuro di dover capire se il problema è stato risolto.ma qui è un modo che ho usato per calcolare la quantità di audio è tamponato

var audio = document.querySelector('audio'); 
 
var set; 
 
window.onload = function(){set=setInterval(buffer,1000);}; 
 
    function buffer() { 
 
    if(audio.buffered.length>0){ 
 
    var percent = (audio.buffered.end(0)/audio.duration) * 100; 
 
     document.querySelector('p').innerHTML = percent+'%'; 
 
    if(percent === 100){ 
 
      clearInterval(set); 
 
     } 
 
     } 
 
}

<audio src="http://customhtml5video.000webhostapp.com/audio.mp3" controls></audio> 
 
<p></p>