jquery - jQuery中的HTML5音频成功加载检查？

Question

我有一个音频元素，我通过单击另一个元素来运行它，并且该元素会在播放声音并返回后记时改变样式。

<audio preload="auto" id="axxx">
  <source type="audio/mpeg" src="sound/xxx.mp3"></source>
  <source type="audio/ogg" src="sound/xxx.ogg"></source>
  Not supported
</audio>

但是对于某些元素，我没有音频，所以我想检查一下，音频元素是否已成功加载。我试图检查持续时间，但条件总是错误的。

$("#lxxx").click(function () {
    if ($('#axxx').duration > 0) {
        $('#axxx').get(0).play();
        $('#lxxx').css("background-color", "orange");
    }
});
$('#axxx').on('ended', function () {
    $('#lxxx').removeAttr('style');
});

如果音频已成功加载，有什么方法可以确保？

Answer 1

根据非jquery答案的链接，使用了这个解决方案——主要是使用事件'canplay'和'canplaythrough'：

var axxxplay = false;
$("#lxxx").click(function () 
{
    if (axxxplay) 
    { 
        $('#axxx').get(0).play();
        $('#lxxx').css("background-color", "orange");
    }
});
$('#axxx').on('canplay canplaythrough', function() 
{    
    axxxplay = true;
});