Question

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!

Answer 1

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>