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

Html5音频成功加载jquery检查？

1 个答案: