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

我希望（div的）jquery动画将在加载sound1和sound2时启动。现在开始播放动画，几秒钟后开始播放音频。为jsfiddle编辑-thxhttp://jsfiddle.net/mohamedyousef1980/r4cs6mqe

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<button id="play" onclick="playMusic()" type="button">Play music</button>
<script> 
$(document).ready(function(){
    $("#play").click(function(){
        $("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> 
</head>
<body>
<div style="background:#000;height:70px;width:10px;position:absolute;"></div>
</body>
</html>

在点击事件处理程序中放置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>

在运行动画之前，您必须等待音频加载，类似于

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

相关内容

最新更新

热门标签：