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.duration

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

HTML5音频持续时间返回“undefined”（jQuery）

1 个答案: