Question

javascript / jQuery是否有办法知道<audio>标记的源文件是否已被加载？

我正在使用mediaelement.js，但我会接受一个仅适用于常规<audio>代码的答案。目前我正在伪造装载指示：

$("#temp-loading").spin(minySpinner);
setTimeout(function() {
    $('#temp-loading').spin(false);
}, 12000);

（spin()是来自spin.js的函数）。显然这个指标在这种情况下毫无意义，但是当页面加载时人们感到困惑，但音频开始播放大约需要15秒，所以我不得不实施这个临时解决方案。我希望它能够实际指示文件是否仍在加载，所以在较慢的连接上，图标将一直保留，直到文件实际开始播放为止。

另外需要注意的是，我将元素设置为autoplay（没关系，我保证！），所以当页面加载时，它会自动开始“播放”，即使还没有发生实际的音频。这使得很难使用play事件来停止微调器，因为它只是立即停止。因此，我要么必须在音频实际启动时停止微调器，要么不播放直到音频实际准备好播放，如果这是有意义的。

我还注意到，在加载音频文件时，时间指示器显示“00:00”。加载后，它会变为“00:00:00”。所以似乎能够做我需要的东西已经内置，我只需要知道如何使用它。

如果它有所不同，该文件是一个实时流（通过Icecast）。谢谢！

Answer 1

canplay事件怎么样？

修改由于我得到了积分，我最好粘贴砖的后代解决方案：

$("audio").mediaelementplayer({ audioWidth: 150, features: ['playpause','current','volume'], success: function(element) { element.addEventListener('loadeddata', function(){ $("#temp-loading").spin(false); }, false); } });

Answer 2

我用以下方法解决了这个问题：

$("#temp-loading").spin(minnerSpinner);
var audio = document.getElementsByTagName('audio')[0];
audio.addEventListener('loadeddata', function(){
    $("#temp-loading").spin(false);
});

然而，这不是一个跨浏览器的解决方案（适用于Chrome和Safari，而不适用于Firefox）。

编辑我现在正在使用jQuery，但仍然无法使用Firefox（使用mediaelement的Flash后备）。在这一点上，它不再是一个html5问题，这是一个媒体元素问题。

$('audio').bind('loadeddata', function(){
    $("#temp-loading").spin(false);
});

编辑2 我最终按照Tetaxa的建议开始工作......不完全是他/她的建议，但它让我想到了使用success回调：

$("audio").mediaelementplayer({
    audioWidth: 150,
    features: ['playpause','current','volume'],
    success: function(element) { 
        element.addEventListener('loadeddata', function(){
            $("#temp-loading").spin(false);
        }, false);
    }
});

谢谢！

加载HTML5音频标签/ mediaelement.js的指示器

2 个答案: