首页 » 前端技术 » 如何监听html5 audio音频是否播放完毕

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

高蒙 2016/07/20 13:45 2.3w浏览 0评论 jQuery/js


用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音频是否播放完毕的状态。这里说个题外话,也是我在开发过程中遇到的问题。





相关文章

我有话说

站长昵称:(*)

输入内容:

选个头像:

评论列表

    ...

    高蒙

    男, PHP程序猿

    文章

    484

    标签

    41

    热度

    10w+

    南京, 江苏, 中国

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