某些页面请求操作的音频持续时间NaN

Question

我一直在尝试使用HTML5和Jquery创建自定义媒体播放器.

我遵循不同的方法,并根据我刷新页面的方式遇到了一些麻烦.

第一个案例

$(document).ready(function(){
    duration = Math.ceil($('audio')[0].duration);
    $('#duration').html(duration);
});

在这种情况下,当我通过按ENTER地址栏中的键将页面重定向到同一URL时,持续时间返回NaN .但是,当我使用reload button或按下F5按钮刷新时它完全正常.

第二个案例

我在一些答案中读到,loadedmetadata事件发生后加载持续时间可能有所帮助.所以我尝试了以下方法:

$(document).ready(function(){
    $('audio').on('loadedmetadata', function(){
        duration = Math.ceil($('audio')[0].duration);
        $('#duration').html(duration);
    });
});

令人惊讶的是,在这种情况下,发生了第一种情况的反转.在重定向的情况下,即ENTER在地址栏中按下时,持续时间显示完全正常.但是,在使用F5按钮刷新或者刷新的情况下reload button,持续时间根本不会显示,甚至NaN都不会导致我认为代码根本没有被执行.

---

进一步阅读建议这可能是webkit浏览器中的一个错误,但我找不到任何结论性或有用的.

这种奇特行为背后的原因是什么？如果你能解释一下这个问题,那就太棒了.

编辑:我主要是寻找这种行为差异背后的解释.我想了解在重定向和刷新的情况下渲染页面背后的机制.

Answer 1

听起来问题在于事件处理程序设置得太晚，即音频文件在文档准备好之前就已加载其元数据。

尝试通过删除调用来尽快设置事件处理程序$(document).ready：

$('audio').on('loadedmetadata', function(){
    duration = Math.ceil($('audio')[0].duration);
    $('#duration').html(duration);
});

请注意，这要求<script>标签位于<audio>文档中的标签之后。

或者，您可以稍微调整您的逻辑，以便更新持续时间的代码始终运行（但如果它得到 a ，则会优雅地失败NaN）：

function updateDuration() {
    var duration = Math.ceil($('audio')[0].duration);
    if (duration)
        $('#duration').html(duration);
}

$(document).ready(function(){
    $('audio').on('loadedmetadata', updateDuration);
    updateDuration();
});