如何將音頻媒體組與jQuery同步

Question

我希望當sound1和sound2加載時開始（div的）jQuery動畫。 現在開始動畫，幾秒鍾后開始播放音頻。 jsfiddle的yousef的Editthx-
http://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>

Answer 1

將playMusic（）放置在click事件處理程序中

<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>

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

如何將音頻媒體組與jQuery同步

問題描述

2 個解決方案

解決方案1
0 2016-01-04 15:32:54

解決方案2
0 2016-01-04 15:44:54

如何將音頻媒體組與jQuery同步

問題描述

2 個解決方案

解決方案1 0 2016-01-04 15:32:54

解決方案2 0 2016-01-04 15:44:54

解決方案1
0 2016-01-04 15:32:54

解決方案2
0 2016-01-04 15:44:54