HTML5: Cách nhận currentTime và thời lượng Audio Tag theo mili giây

Question

Tôi đang sử dụng thẻ âm thanh HTML5 để phát tệp âm thanh trong mẫu của mình. Đối với một số mục đích tôi cần phải theo dõi thời gian hiện tại và thời gian hiển thị tối đa mili giây. Bây giờ tôi có thể nhận được các giá trị chỉ trong vài giây. Có phương pháp nào có thể không? Dưới đây là mã của tôi:

HTML 
<audio controls id="track" src="<path-to-soundtrack>" 
    ontimeupdate="TrackAudio(this)"> 
<p>Your browser does not support the audio element</p> 
</audio> 


JAVASCRIPT 
function TrackAudio(element){ 
var curTime = Math.floor(element.currentTime); 
console.log(curTime) //Value in seconds. 
} 

Answer 1

Bạn có thể sử dụng:

<audio id="track" controls> 
    <source src="your.mp3" type="audio/mpeg"> 
    <source src="your.ogg" type="audio/ogg"> 
</audio> 
<script type="text/javascript"> 
var audio = document.getElementById('track'); 
audio.addEventListener('timeupdate',function(){ 
    var currentTimeMs = audio.currentTime*1000; 
    console.log(currentTimeMs); 
},false); 
</script> 

Bạn có thể đọc ở đây để biết thêm thông tin về độ chính xác của timeupdate event. Nó phụ thuộc vào việc thực hiện trình duyệt vì vậy hãy nhớ rằng bạn sẽ nhận được kết quả khác nhau từ một trình duyệt/thiết bị khác.

Bạn nên sử dụng phương thức addEventListener thay vì thuộc tính ontimeupdate - nó có thể duy trì được nhiều hơn.

Ngoài ra nếu bạn cần bảo hiểm trình duyệt, tốt nhất là sử dụng cả tệp ogg và mp3 âm thanh làm nguồn.