How to sync audio mediagroup with jquery

Question

I want that the jquery animation(of the div) will start when the sound1 and sound2 will loaded. Now its start the animation and after a few seconds its start the audio. Edit- thx for yousef for the jsfiddle-
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>

Use an event listener when the sound has loaded to trigger the animation? Maybe this can give you an idea: http://stackoverflow.com/q/5313646/3293843 — faerin, Jan 04 '16 at 15:57

score 0 · Answer 1 · answered Jan 04 '16 at 15:32

Place playMusic() within the click event handler

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

Its still play it before the audio loaded – jaldk Jan 04 '16 at 15:38 — jaldk, Jan 04 '16 at 15:38

adeneo · Answer 2 · 2016-01-04T15:52:31.317

You'll have to wait for the audio to load before you run the animations, something like this

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

I tried to put it in the jsfiddle but it didn't work either – jaldk Jan 04 '16 at 16:14 — jaldk, Jan 04 '16 at 16:14

How to sync audio mediagroup with jquery

2 Answers2