使用 jQuery 的 HTML5 音频持续时间答案

【问题标题】：HTML5 audio duration using jQuery使用 jQuery 的 HTML5 音频持续时间
【发布时间】：2012-10-29 08:29:40
【问题描述】：

我正在尝试使用 jQuery 获取音频持续时间，但很难获得它。我使用的方法定义如下

var audioElement = document.createElement('audio');            
        audioElement.setAttribute('src','song.mp3');            
           audioElement.play();
           var duration = audioElement.duration;
               $(".songtime").html(duration);

但上面写着nan 有人知道如何解决这个问题吗？

【问题讨论】：

那里没有 jQuery，而且由于您甚至没有设置音频源，您如何期望它有持续时间？！真的是nan吗？ NaN 似乎更有可能。
var audioElement = document.createElement('audio'); audioElement.setAttribute('src','song.mp3'); audioElement.play(); var 持续时间 = audioElement.duration; $(".songtime").html(时长);好看吗
@mat:- 那是 kk mat，但我又不想咄咄逼人，只是想要一些帮助，而且我可能在解释问题时出错了，一个人可以礼貌地让我知道

标签： html

【解决方案1】：

由于音频还没有加载，你需要等到你的元素加载了元数据，有一个简单的方法来做到这一点：

audioElement.addEventListener("loadedmetadata", function(_event) {
    var duration = audioElement.duration;
    //TODO whatever
});

【讨论】：

【解决方案2】：

可能问题不再有效，但问题是音频尚未加载文件。您应该在文件加载时添加事件

 $(audioElement).on("canplay", function () {
        alert(this.duration);
    });

【讨论】：

终于为我工作了！！谢谢。我的问题是 .duration 不适用于 jQuery 对象，只是普通的 JS。

【解决方案3】：

您正在尝试读取音频文件加载之前的持续时间。您必须等到浏览器知道持续时间是多少（即在它有时间下载文件头之后）。

【讨论】：

是的，我做到了，.. 它甚至根本没有阅读它.. 我试图等待几分钟
根本不读取文件？但是你说它正在播放音频，它必须读取文件才能做到这一点。
我的意思是根本没有时间......音频播放正常，让我改变音量......也得到当前时间，但不是实际持续时间......
在阅读持续时间之前添加延迟后，它对我有用。也许您正在使用持续时间未知的音频格式（例如流式音频）。
我在使用 JQuery 1.7 但不是 pre 1.6 时遇到了同样的问题

【解决方案4】：

其他人也遇到过这个问题，如果您的网络服务器未发送正确的 HTTP 标头标签，Safari 似乎会被淘汰。我遇到了同样的问题——我的演示可以正常加载和播放音频，但由于我的本地服务器用于提供 mp3 文件的 http 标头，持续时间总是返回“infiniti”。

基本要点是内容类型应该如下：

Content-Type:audio/mpeg; name="name_of_file.mp3"

代替：

Content-Type:application/octet-stream

有关更多信息，请参阅此处的原始帖子： http://groups.google.com/group/jplayer/browse_thread/thread/256d29fcc158f8ec

【讨论】：