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

Answer 2

我已经用以下方法解决了一半：

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

但这不是跨浏览器解决方案（适用于 Chrome 和 Safari，不适用于 Firefox）。

edit 我现在可以使用 jQuery，但仍然不适用于 Firefox（使用 mediaelement 的 Flash 后备）。现在已经不是 html5 问题了，是 mediaelement 问题。

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

edit 2我最终按照 Tetaxa 的建议让它工作了……不完全是他/她的建议，但它给了我使用 success 回调的想法：

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

谢谢！