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

【问题标题】：Change picture when audio is playing (jQuery, HTML5)播放音频时更改图片（jQuery、HTML5）
【发布时间】：2015-03-17 00:47:22
【问题描述】：

我需要一些帮助：

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

“点击功能”不起作用。我不得不提一下，在先前的 jquery 调用另一个操作之后，音频部分将加载一个 PHP 文件。那么，我能做些什么呢？

谢谢！

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

【问题讨论】：

<audio controls='controls' id='audio'> <source src=". $final_file ." type='audio/mp3'/> </audio>
正确语法：setInterval(swapImages, 5000);现在可以用了吗？
@nevermind：这应该不是问题

标签： javascript php jquery html audio

【解决方案1】：

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

$('body').on('click', '#audio', function() {
  alert("YESSSSSSSSSSSS!");
  setInterval("swapImages()", 5000);
});

【讨论】：

您也没有看到警报？
不.. 但我想我会创建一个按钮或其他东西来调用。因为它适用于其他 div id 的

【解决方案2】：

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

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

p.s：尽量少用 JQuery。只是我的两分钱。

【讨论】：

这工作：$(document.getElementsByTagName("audio")[0]).on("play", function(){