2014-09-03 27 views
7

Sto costruendo un lettore di playlist mp3 con HTML5 e jQuery. A questo giocatore c'è una barra orizzontale che cresce gradualmente in concomitanza con il presente buffer del file mp3.Perché audio.buffered.end (0) ottiene un messaggio di errore quando provo a ottenere il tempo di bufferizzazione

Ecco il mio codice completo: get buffered end

HTML5:

<audio id="music" controls> 
    <source src="https://archive.org/download/musicTestAudio27/Very%20nice%20%2827%29.mp3" type="audio/mpeg"> 
</audio> 
    <br/> 
    <div id="buffered"></div> 

CSS:

#buffered{ 
    border:solid #ccc 1px; 
    height:10px; 
    background:red; 
    display:block; 
    width:1%; 
} 

Javascript:

var track = document.getElementById("music"); 
setInterval(function(){ 
var w = 100*(track.buffered.end(0))/track.duration; 
$('#buffered').css("width",w+"%"); 
}, 1000); 

ma Fir efox darmi un messaggio di errore, ha detto:

IndexSizeError: Index or size is negative or greater than the allowed amount

var w = 100*(track.buffered.end(0))/track.duration;

e Google Chrome, ha detto:

Uncaught IndexSizeError: Failed to execute 'end' on 'TimeRanges': The index provided (0) is greater than or equal to the maximum bound (0).

risposta

5

Credo che l'errore è in arrivo quando si accede buffered.end prima che l'elemento viene inizializzato. si può riscrivere il codice per evitare che

track = document.getElementById("music"); 
track.onprogress = function(){ 
    var w = 100*(track.buffered.end(0))/track.duration; 
    $('#buffered').css("width",w+"%"); 
} 
+0

Thanks a lot. questo è stato molto utile. Ho cercato per quattro giorni. ma ora funziona come un fascino^_^ Ho aggiunto questo: ** 'if (track.onprogress) { var w2 = 100 * (track.buffered.end (0))/track.duration; $ ('# buffered'). Css ("width", w2 + "%"); } '** – user3524045

3

La risposta accettata non risolve il problema per me. Si dovrebbe anche controllare che la pista è stata caricata prima di accedere buffered.end in questo modo:

track.onprogress = function(){ 
    if (track.readyState === 4){ 
     var w = 100*(track.buffered.end(0))/track.duration; 
     $('#buffered').css("width",w+"%"); 
    } 
} 
1
track = document.getElementById("music"); 
track.onprogress = function(){ 
    if(track.buffered.length>0){ 
     var w = 100*(track.buffered.end(0))/track.duration; 
     $('#buffered').css("width",w+"%"); 
    } 
} 
+4

Sebbene questo codice possa essere utile a voi, non vi è alcuna spiegazione su cosa fa o perché risponde alla domanda o cosa fa che è diverso dalle altre risposte. Una buona risposta dovrebbe includere una spiegazione che copre questi argomenti. – AdrianHHH

Problemi correlati