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);
});