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>

在javascript循环中同步的音频和动画

2 个答案: