CODEWITHSUNDEEP
javascriptjqueryhtml
Studiostefan
Studiostefan

Reputation: 124

Audio and animation in sync in javasctipt loop

I'm using my limited javascript skills to try an piece togheter a script that can play a small animation and a sound clip in a loop. This is what i've got so far:

<script>
function PulseArea() {
    $('.area-pulse').stop();
    $('.area-pulse').css({ width: 38, height: 38, top: 217, left: 77, opacity: 1 });
    $('.area-pulse').animate({ width: 700, height: 700, top: -114, left: -254, opacity:0 }, 4000, null, function () {  setTimeout("PulseArea()", 400); });

}
$(function() {

    var sample = new Audio("audio/water-droplet-1.wav");

    function playSample() {

    sample.pause();
    sample.currentTime = 0;
    sample.play();
}
})
$(document).ready(function() {
for (i=0;i<=5;i++)
{
PulseArea();
playSample();
}    
})
</script>

Related css:

.area-pulse
        {
            display:block;
            width:38px;
            height:38px;
            position:absolute;
            top:217px;
            left:77px;
            background-color:transparent;
            zoom: 1;


        }
            .area-pulse img
            {
                opacity:1;
                width:100%;
                height:100%;
                display:inline-block;   
                filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../img/area_pulse.png', sizingMethod='scale');
                background-color:transparent;
            }

Related HTML:

<div style=" width:954px; height:600px; position:absolute;" class="area-pulse"><img src="img/area_pulse.png" /></div>

It's the sound that is the problem. The animation plays fine. Any suggestions? I've searched StackOverflow, but can't find anything like this.

Thanks for taking an interest!

Upvotes: 0

Views: 1695

Answers (2)

Studiostefan
Studiostefan

Reputation: 124

I don't know what was wrong with the script in my question, but i solved it by rewriting it. I hope someone else can be helped by this. :)

<script>

function PulseArea() {
var audioElement = document.createElement('audio');   
    audioElement.setAttribute('src', 'audio/waterdrop.mp3');
    audioElement.play();
$('.area-pulse').stop();
$('.area-pulse').css({ width: 16, height: 16, top: 227, left: 89, opacity: 1 });
$('.area-pulse').animate({ width: 700, height: 700, top: -114, left: -254, opacity:0 }, 4000, null, function () {  setTimeout("PulseArea()", 400); });

}
$(document).ready(function() {

for (i=0;i<=5;i++)
{
PulseArea();
} 

})

</script>

Upvotes: 0

jbabey
jbabey

Reputation: 46647

Your function playSample is defined inside of anonymous function scope, so it can't be called from the document.ready scope. If you move all of it into the same scope, it will work fine:

$(document.ready(function () {
    function PulseArea() {
        $('.area-pulse').stop();
        $('.area-pulse').css({ width: 38, height: 38, top: 217, left: 77, opacity: 1 });
        $('.area-pulse').animate({ width: 700, height: 700, top: -114, left: -254, opacity:0 }, 4000, null, function () {  setTimeout("PulseArea()", 400); });
    }

    var sample = new Audio("audio/water-droplet-1.wav");

    function playSample() {
        sample.pause();
        sample.currentTime = 0;
        sample.play();
    }

    for (i=0;i<=5;i++) {
        PulseArea();
        playSample();
    }    
});

Upvotes: 1

Related Questions