播放音频时更改图片(jQuery、HTML5)

Posted

技术标签:

【中文标题】播放音频时更改图片(jQuery、HTML5)【英文标题】:Change picture when audio is playing (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>

【问题讨论】:

&lt;audio controls='controls' id='audio'&gt; &lt;source src=". $final_file ." type='audio/mp3'/&gt; &lt;/audio&gt; 正确语法:setInterval(swapImages, 5000);现在可以用了吗? @nevermind:这应该不是问题 【参考方案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()

以上是关于播放音频时更改图片(jQuery、HTML5)的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 html5 和 jQuery 播放所有音频源

HTML5/Javascript/jQuery 音频播放器不响应事件?

在 html5 音频元素到达播放结束前 5 秒执行 Javascript 代码

HTML5 音频播放器。无法更改 src 元素

带有 jquery 的音频 html5 播放下一首曲目

如何停止 HTML5 的音频标签播放的音频