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

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

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

如何确保音频成功加载？

最佳答案

根据指向非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;
});