Javascript 如何将音频媒体组与jquery同步

我希望jquery动画（div的）将在加载sound1和sound2时启动。现在开始播放动画，几秒钟后开始播放音频。 编辑-JSFIDLE的thx for yousef-

演奏音乐
$（文档）.ready（函数（）{
$（“#播放”）。单击（函数（）{
$（“div”）.animate（{left:'250px'}，1000）；
$（“div”）.animate（{left:'10px'}，100）；
});
});
函数playMusic（）{
sound1=新音频文件（'http://www.thesoundarchive.com/starwars/Chewie-chatting.wav');
sound2=新音频文件http://www.thesoundarchive.com/starwars/return/jabba-the-hutt-laughing.wav');
sound1.mediaGroup='soundGroup'；
sound2.mediaGroup='soundGroup'；
声音1.播放（）；
声音2.播放（）；
} 

将playMusic（）放置在单击事件处理程序中

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<button id="play" type="button">Play music</button>
<script> 
$(document).ready(function(){
    $("#play").click(function(){
        playMusic();
        $("div").animate({left: '250px'},1000);
        $("div").animate({left: '10px'},100);
    });
});

function playMusic() { 
    sound1 = new Audio('http://www.thesoundarchive.com/starwars/Chewie-chatting.wav');
    sound2=new Audio('http://www.thesoundarchive.com/starwars/return/jabba-the-hutt-laughing.wav');
    sound1.mediaGroup = 'soundGroup';
    sound2.mediaGroup = 'soundGroup';
    sound1.play(); 
    sound2.play();
} 
</script>

演奏音乐
$（文档）.ready（函数（）{
$（“#播放”）。单击（函数（）{
播放音乐（）；
$（“div”）.animate（{left:'250px'}，1000）；
$（“div”）.animate（{left:'10px'}，100）；
});
});
函数playMusic（）{
sound1=新音频文件（'http://www.thesoundarchive.com/starwars/Chewie-chatting.wav');
sound2=新音频文件http://www.thesoundarchive.com/starwars/return/jabba-the-hutt-laughing.wav');
sound1.mediaGroup='soundGroup'；
sound2.mediaGroup='soundGroup'；
声音1.播放（）；
声音2.播放（）；
} 

在运行动画之前，您必须等待音频加载，如下图所示

$(document).ready(function(){
    $("#play").click(function(){
        playMusic().done(function() {
            $("div").animate({left: '250px'},1000);
            $("div").animate({left: '10px'},100);
        });
    });
});

function playMusic() { 
    var def1   = new $.Deferred();
    var def2   = new $.Deferred();    
    var sound1 = new Audio('http://www.thesoundarchive.com/starwars/Chewie-chatting.wav');
    var sound2 = new Audio('http://www.thesoundarchive.com/starwars/return/jabba-the-hutt-laughing.wav');

    sound1.addEventListener("canplay", function() {
        sound1.play(); 
        def1.resolve();
    });
    sound2.addEventListener("canplay", function() {
        sound2.play(); 
        def2.resolve();
    });

    sound1.addEventListener("error",   def1.reject);
    sound2.addEventListener("error",   def2.reject);

    sound1.mediaGroup = 'soundGroup';
    sound2.mediaGroup = 'soundGroup';

    return $.when(def1.promise(), def2.promise());
} 

---

在声音加载后使用事件侦听器触发动画？也许这可以给你一个想法：它仍然在音频加载之前播放。我试图把它放到JSFIDLE中，但它也不起作用

$(document).ready(function(){
    $("#play").click(function(){
        playMusic().done(function() {
            $("div").animate({left: '250px'},1000);
            $("div").animate({left: '10px'},100);
        });
    });
});

function playMusic() { 
    var def1   = new $.Deferred();
    var def2   = new $.Deferred();    
    var sound1 = new Audio('http://www.thesoundarchive.com/starwars/Chewie-chatting.wav');
    var sound2 = new Audio('http://www.thesoundarchive.com/starwars/return/jabba-the-hutt-laughing.wav');

    sound1.addEventListener("canplay", function() {
        sound1.play(); 
        def1.resolve();
    });
    sound2.addEventListener("canplay", function() {
        sound2.play(); 
        def2.resolve();
    });

    sound1.addEventListener("error",   def1.reject);
    sound2.addEventListener("error",   def2.reject);

    sound1.mediaGroup = 'soundGroup';
    sound2.mediaGroup = 'soundGroup';

    return $.when(def1.promise(), def2.promise());
}