Javascript 播放音频时更改图片（jQuery、HTML5）

我需要一些帮助：

<script>
    $(window).load(function(){  
        function swapImages(){
            var $active = $('#myGallery .active');
            var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
            $active.fadeOut(function(){
                $active.removeClass('active');
                $next.fadeIn().addClass('active');
            });
        }

        $('#audio').click(function() {
            alert("YESSSSSSSSSSSS!");
            setInterval("swapImages()", 5000);
        });
    });
 </script>

$（窗口）.load（函数（）{
函数swapImages（）{
var$active=$（'#myGallery.active'）；
var$next=（$（'#myGallery.active'）.next（）.length>0）？$（'#myGallery.active'）.next（）：$（'#myGallery img:first'）；
$active.fadeOut（函数（）{
$active.removeClass（'active'）；
$next.fadeIn（）.addClass（'active'）；
});
}
$（“#音频”）。单击（函数（）{
警惕（“是的！”）；
设置间隔（“swapImages（）”，5000）；
});
});

“点击功能”不起作用。我必须提到，音频部分将在前一个jquery调用之后加载一个PHP文件以进行另一个操作。那么，我能做什么

谢谢

<audio controls='controls' id='audio'> 
   <source src=". $final_file ." type='audio/mp3'/> 
</audio>

---

如果音频文件是在稍后阶段加载的，则使用.on（）而不是.click（）进行加载

---

我假设您想在播放歌曲时更改背景，您可以尝试以下代码

<script>
$(window).load(function(){  
    function swapImages(){
        var $active = $('#myGallery .active');
        var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
        $active.fadeOut(function(){
            $active.removeClass('active');
            $next.fadeIn().addClass('active');
        });
    }

    var aud= document.getElementById('audio');
    aud.addEventListener('play', onStart);
    aud.addEventListener('pause', onEnded); 
    aud.addEventListener('ended', onEnded);
    function onEnded(){
        clearInterval(window.audInterval);
    }
    function onStart(){
        alert('Started playing...');
        window.audInterval = setInterval(swapImages, 5000);
    }
});
</script>

$（窗口）.load（函数（）{
函数swapImages（）{
var$active=$（'#myGallery.active'）；
var$next=（$（'#myGallery.active'）.next（）.length>0）？$（'#myGallery.active'）.next（）：$（'#myGallery img:first'）；
$active.fadeOut（函数（）{
$active.removeClass（'active'）；
$next.fadeIn（）.addClass（'active'）；
});
}
var aud=document.getElementById（'audio'）；
aud.addEventListener（“播放”，开始）；
aud.ADDEVENTLISTER（'pause'，ONENED）；
aud.addEventListener（“结束”，未命名）；
函数onEnded（）{
clearInterval（window.audInterval）；
}
函数onStart（）{
警报（'开始播放…'）；
window.audInterval=setInterval（swapImages，5000）；
}
});

---

p、 s：根据需要尽量少使用JQuery。只要我的两分钱。

正确的语法：setInterval（swapImages，5000）；它现在工作了吗？@nevermind:这应该不是问题你也没有看到警报？没有。。但我想我会创建一个按钮或东西来调用。因为它与其他div id一起工作：

$（document.getElementsByTagName（“audio”）[0]）。在（“play”，function（）{

<script>
$(window).load(function(){  
    function swapImages(){
        var $active = $('#myGallery .active');
        var $next = ($('#myGallery .active').next().length > 0) ? $('#myGallery .active').next() : $('#myGallery img:first');
        $active.fadeOut(function(){
            $active.removeClass('active');
            $next.fadeIn().addClass('active');
        });
    }

    var aud= document.getElementById('audio');
    aud.addEventListener('play', onStart);
    aud.addEventListener('pause', onEnded); 
    aud.addEventListener('ended', onEnded);
    function onEnded(){
        clearInterval(window.audInterval);
    }
    function onStart(){
        alert('Started playing...');
        window.audInterval = setInterval(swapImages, 5000);
    }
});
</script>