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

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);
    }
});