如何监听html5 audio音频是否播放完毕

 jQuery/js   高蒙   阅读(17827)   评论(468)   2016-07-20 13:45:21    html5 音频播放 监听html5 audio播放 


用html5写聊天记录的时候,遇到判断音频是否播放完毕,业务要求是点击的时候,要加载一个闪烁的小喇叭gif图片,当播放结束的就应该自动的去除这个闪烁的动画。

其实,我们只要用js获取到播放完毕的事件就可以了,通过这个事件去改变相应的样式。主要是要用到html5 audio标签的ended这个属性。下面看怎么实现的吧。

我们这里假设,class voice是静止的喇叭图。class voice1 是闪烁的喇叭图。

html5代码:

<div class="voice">
    <audio>
<source src="地址" type="audio/aac" />
    </audio>
</div>

js代码:

$(document).on('click','.voice', function() {
$(this).addClass('voice1');
$(this).find('audio').get(0).play();
$(this).find('audio').bind('ended',function () {
   $('.voice').removeClass('voice1');
});
});

通过上面的代码,可以轻松的监听html5音频是否播放完毕的状态。这里说个题外话,也是我在开发过程中遇到的问题。





相关文章



我要评论


站长昵称:(*)

输入内容:


评论列表


高蒙

男,程序猿一枚

 

人生要是没有理想, 那跟一条咸鱼有什么分别。


关于我

  http://www.shuchengxian.com

高蒙个人博客是以PHP技术为主的程序员个人博客。博客主要发布php开发中遇到的问题以及解决办法,同时个人博客也分享网站模板素材,jquery插件等方面素材。


站点声明:相关侵权、举报、投诉及建议等,请发E-mail:936594075#qq.com(#替换成@)。

Copyright © 2018, www.shuchengxian.com, All rights reserved. 个人博客皖公网安备 34152302000022号 皖ICP备15015490号

关键词:个人博客,PHP博客,PHP博客程序,高蒙博客,高蒙个人博客,php程序员博客,程序员个人博客