HTML5音頻持續時間返回“ undefined”（jQuery）

Question

我目前正在開發需要自定義HTML5音頻播放器的移動應用。 這是播放器的基本HTML：

<div data-enhance="false">
    <audio id="music" preload="true">
        <source src="./testfiles/track_t.wav" type="audio/wav">
        <source src="./testfiles/track_t.mp3" type="audio/mpeg">
    </audio>
    <div id="audioplayer">
        <button id="pButton" class="play"></button>
        <div id="timeline">    
            <div id="playhead"></div>
        </div>
    </div>
</div>

到目前為止，我可以正常播放和暫停音樂，但是在嘗試使播放頭沿時間軸移動時遇到了一個問題。

當我想測試用來使其移動的功能時，我注意到它沒有用。 首先，我以為我的功能是錯誤的，但是一切似乎都還不錯，所以我將問題追根溯源。 這是我用來獲取持續時間的javascript代碼：

var dur;
$('#music').bind('canplay', function(){
    dur = $('#music').duration;
    alert($('#music').duration);
});

如您所見，那里有一個alert（） ，我注意到了問題所在。 執行此alert（）時，它返回“ undefined”，這意味着它無法獲取我的音頻元素的持續時間。

在網上尋找解決方案時，我注意到大多數有類似問題的人要么嘗試獲取文件加載前的持續時間，要么使用原始javascript。 這使我得出結論，即jQuery選擇可能是錯誤的。 我嘗試了幾種不同的方式來選擇持續時間。

$('#music').html('duration');

返回“ [object Object]”，並且

$('#music').attr('duration');

也產生“未定義”。

這就是我到這里結束的方式，我不知道要嘗試什么。 我正在使用的jQuery是用於應用程序開發的jQuery mobile。 如上所述，所有文件路徑都是正確的，我可以播放和暫停音樂。 希望有人可以幫助我，在此先感謝！ ^^

Answer 1

您正在嘗試讀取jQuery對象的屬性（ $('#music') ）， duration屬性屬於dom元素。

由於在事件處理程序內部， this默認情況下是指處理程序this的元素（在本例中為音頻元素本身），因此可以使用this.duration

$('#music').bind('canplay', function(){
    dur = this.duration;
    alert(this.duration);
});