Jak utworzyć pasek ładowania dla elementu audio HTML5?

Question

Próbuję utworzyć pasek ładowania (pokazujący procent załadowany/buforowany) dla elementu audio HTML5.

dla tagu wideo jest to możliwe do obliczenia przy użyciu następujących:

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

Ale nie mogę uzyskać to do pracy z tagu audio. Po prostu zwraca poprawioną wartość.

Każdy pomysł?

Dzięki!

Answer 1

Jaka jest ustalona wartość, którą zwraca? Czy możesz stworzyć prosty jsfiddle, aby zademonstrować problem?

Ten numer html5 doctor tutorial został napisany całkiem niedawno i zawiera dobre informacje na temat aktualnego stanu gry HTML5 Audio. Poniższa wskazówka w połowie drogi w dół strony wygląda to może być istotne w przypadku:

Być może trzeba sprawdzić zdarzenie durationchange jak niektóre trwania mógłby zmiana while Media. Ponadto w zależności od tego, czy dostępne są metadane: , może być konieczne poczekać na rozpoczęcie odtwarzania dźwięku, aby sprawdzić jego czas trwania. W skrócie, miej oko na czas trwania wydarzenia, i uważaj na wartości NaN, gdy czas nie jest jeszcze znany!

Answer 2

Można użyć następującego kodu, aby uzyskać postęp elementu dźwiękowego HTML5 i zastosować go do elementu <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

Wywołanie end sposób na buffered bez sprawdzania jest zawodna. Możliwe, że próbujesz wywołać metodę na niczym. Sprawdź ten skrzypce:

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>

zobaczyć? Na samym początku buforowana długość wynosi 0 - nic nie zostało załadowane. Musisz mieć pewność, że długość buforowana nie wynosi 0, zanim zadzwonisz pod metodę start lub end.

---

Za każdym razem, gdy czytasz buffered, jest to naprawione. Aby uzyskać wizualnie "ładujący" efekt, trzeba go czytać raz za razem.

Tutaj staram się aktualizować załadowanego i grał procentowego co 50 milisekund:

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>

UWAGA: plik MP3 może nie być dostępna w miejscu. Jeśli tak jest, po prostu spróbuj innego źródła na twoją korzyść. W przeciwnym razie usłyszysz bardzo przyjemny kobiecy wokal i zobaczysz zmiany procentowe w sposób ciągły, ostatecznie skończysz w 100%.

Answer 4

Nie jestem całkiem pewien, czy nie podważam twojego prob.ale tutaj jest sposób, w jaki wykorzystano do obliczenia ile dźwięk jest buforowane

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>