Làm cách nào để tạo thanh tải cho phần tử âm thanh HTML5?

Question

Tôi đang cố gắng tạo thanh tải (hiển thị phần trăm được tải/đệm) cho phần tử âm thanh HTML5.

Đối với các thẻ video nó có thể tính toán bằng cách sử dụng sau đây:

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

Nhưng tôi không thể có được điều này để làm việc với các thẻ âm thanh. Nó chỉ trả về một giá trị sửa chữa.

Bất kỳ ý tưởng nào?

Cảm ơn!

Answer 1

Giá trị cố định mà nó trả về là gì? Bạn có thể tạo một đơn giản jsfiddle để chứng minh sự cố không?

Điều này được viết gần đây html5 doctor tutorial và có một số thông tin tốt về trạng thái phát hiện tại của Âm thanh HTML5. Mẹo sau nửa chừng dưới trang trông giống như nó có thể thích hợp trong trường hợp của bạn:

Bạn có thể cần kiểm tra sự kiện thay đổi thời lượng vì một số khoảng thời gian có thể thay đổi trong khi tải xuống phương tiện. Ngoài ra, tùy thuộc vào việc siêu dữ liệu có sẵn là hay không, bạn có thể cần đợi cho đến khi âm thanh bắt đầu phát đến kiểm tra thời lượng của siêu dữ liệu. Tóm lại, hãy theo dõi sự kiện thay đổi thời lượng, và xem các giá trị NaN khi thời lượng chưa được biết!

Answer 2

Bạn có thể sử dụng đoạn mã sau để có được sự tiến bộ của một phần tử âm thanh HTML5 và áp dụng nó vào một yếu tố <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 phương pháp trên buffered mà không kiểm tra là không đáng tin cậy. Có thể bạn đang cố gắng gọi phương thức trên không có gì. Kiểm tra fiddle này:

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>

Thấy không? Vào lúc bắt đầu đầu tiên, độ dài đệm là 0 - không có gì được tải. Bạn cần phải chắc chắn rằng độ dài đệm không phải là 0 trước khi gọi phương thức start hoặc end.

---

Mỗi khi bạn đọc buffered, nó thực sự là cố định. Vì vậy, để đạt được hiệu ứng "tải" trực quan, bạn cần phải đọc nó một lần nữa và một lần nữa và một lần nữa.

Ở đây tôi cố gắng cập nhật tỷ lệ tải và chơi mỗi 50 phần nghìn giây:

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>

LƯU Ý: Các tập tin MP3 có thể không thể truy cập tại chỗ của bạn. Nếu đó là trường hợp, chỉ cần thử một nguồn khác có lợi cho bạn. Nếu không, bạn sẽ nghe thấy một giọng nữ rất đẹp, và thấy tỷ lệ phần trăm thay đổi liên tục, cuối cùng kết thúc lên 100%.

Answer 4

Tôi không hoàn toàn chắc chắn nếu tôi làm undestand prob của bạn.nhưng đây là một cách tôi được sử dụng để tính toán bao nhiêu âm thanh được đệm

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>