播放音頻時更改圖片（jQuery，HTML5）

Question

我需要一些幫助：

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

Answer 1

如果音頻文件是在以后加載的，請使用.on（）而不是.click（）進行加載

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

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

ps：嘗試並根據需要使用盡可能少的JQuery。 只是我的兩分錢。