Làm cách nào để nhận thời lượng của âm thanh html5

Question

Tôi có một thẻ html5 <audio> trong trang, nhưng làm cách nào để biết thời lượng của âm thanh?

<audio controls=""> 
    <source src="p4.2.mp3"> 
</audio> 

Answer 1

Trình duyệt bạn đang cố gắng này trên? Trên một số trình duyệt, duration không hoạt động bình thường, trả lại NaN như bạn đã đề cập.

Bạn cũng đảm bảo rằng tệp âm thanh đã được tải trước khi tìm cách truy lục thời lượng?

Answer 2

Tôi tìm thấy bài viết này, có thể hữu ích.

http://neutroncreations.com/blog/building-a-custom-html5-audio-player-with-jquery/

Answer 3

đơn giản audioElement.duration

Dave

Answer 4

var au = document.createElement('audio'); 
au.addEventListener('loadedmetadata',function(){ 
    au.setAttribute('data-time',au.duration); 
},false); 

Answer 5

Trong một nhận xét ở trên, giải pháp được đề cập là ràng buộc xử lý sự kiện với sự kiện loadmetadata. Đây là cách tôi đã làm điều đó -

audio.onloadedmetadata = function() { 
    alert(audio.duration); 
}; 

Answer 6

Tôi đã sử dụng sự kiện "canplaythrough" để có được thời lượng bản nhạc. Tôi có một trường hợp mà tôi có hai người chơi và tôi muốn dừng cầu thủ thứ hai 2 giây trước khi người chơi đầu tiên hoàn thành.

$('#' + _currentPlayerID).on("canplaythrough", function (e) { 
    var seconds = e.currentTarget.duration;  
    var trackmills = seconds * 1000; 
    var subTimeout = trackmills - 2000; //2 seconds before end 

    //console.log('seconds ' + seconds); 
    //console.log('trackmills ' + trackmills); 
    //console.log('subTimeout ' + subTimeout); 

    //Stop playing before the end of thet track 
    //clear this event in the Pause Event 
    _player2TimeoutEvent = setTimeout(function() { pausePlayer2(); }, subTimeout); 

}); 

Answer 7

2018 giải pháp:

Bạn sẽ nhận được undefined hoặc NaN (không phải là số) khi các siêu dữ liệu âm thanh không được tải nêu ra. Do đó, một số người đề xuất sử dụng onloadedmetadata để đảm bảo siêu dữ liệu của tệp âm thanh được tìm nạp trước tiên. Ngoài ra, những gì hầu hết mọi người không đề cập đến là bạn phải nhắm mục tiêu chỉ số đầu tiên của phần tử âm thanh DOM với [0] như thế này:

- Vanilla Javascript:

var audio = $("#audio-1")[0]; 
audio.onloadedmetadata = function() { 
    alert(audio.duration); 
}; 

Nếu điều này sẽ không làm việc thử này, tuy nhiên không quá đáng tin cậy và phụ thuộc vào kết nối người sử dụng:

setTimeout(function() { 
    var audio = $("#audio-1")[0]; 
    console.log("audio", audio.duration); 
}, 100); 

- JQuery:

$(document).ready(function() { 
    var audio = $("#audio-1")[0]; 
    $("#audio-1").on("loadedmetadata", function() { 
     alert(audio.duration); 
    }); 
});