HTML5 音频持续时间返回“未定义”（jQuery）答案

【问题标题】：HTML5 audio duration returns "undefined" (jQuery)HTML5 音频持续时间返回“未定义”（jQuery）
【发布时间】：2015-08-18 10:32:09
【问题描述】：

我目前正在开发一个需要自定义 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() 时，它返回“未定义”，这意味着它无法获取我的音频元素的持续时间。

在网上寻找解决方案时，我注意到大多数有类似问题的人要么尝试获取文件加载之前的持续时间，要么使用原始 javascript。这使我得出结论，jQuery 选择可能是错误的。我尝试了几种不同的方法来选择持续时间。

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

返回“[object Object]”，并且

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

也产生了“未定义”。

我就是这样结束的，我不知道该尝试什么了。我使用的 jQuery 是用于应用程序开发的 jQuery mobile。如前所述，所有文件路径都是正确的，我可以很好地播放和暂停音乐。希望有人可以帮助我，在此先感谢！ ^^

【问题讨论】：

标签： javascript jquery html audio

【解决方案1】：

您正在尝试读取 jQuery 对象的属性（$('#music')），duration 属性属于 dom 元素。

由于在事件处理程序内部this 引用（默认情况下）处理程序所针对的元素（在本例中为音频元素本身），您可以使用this.duration

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

【讨论】：