音频和动画在javasctipt循环中同步

Question

我正在使用我有限的javascript技能尝试编写一个可以循环播放小动画和声音片段的脚本。这就是我目前所掌握的：

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

相关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;
            }

相关HTML:

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

问题出在声音上。动画播放得很好。有什么建议吗？我已经搜索了StackOverflow，但找不到类似的内容。

感谢您的关注！

Answer 1

您的函数playSample是在匿名函数范围内定义的，因此不能从document.ready范围调用它。如果你把所有的东西都移到同一个范围内，它会很好地工作：

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

Answer 2

我不知道问题中的脚本出了什么问题，但我通过重写它解决了它。我希望其他人能从中得到帮助。：）

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