一种实现无缝循环播放音乐方案

场景:

为了节省页面资源,往往需要将一段小音频循环播放,通常做法是在audio标签上添加loop属性,但不幸的是,该属性并不能保证无缝循环(gapless looping)播放,明显的感觉到中间的停顿。

解决方案:

使用audio标签的Web API提供的方法和属性进行循环播放,具体如下

事件名称事件作用
timeupdate当前播放的时长发生改变时触发
  
 

属性名称属性作用
currentTime                 用来获取或控制当前播放的时间,单位为s
duration 获取媒体文件的总时长,以s为单位,如果无法获取,返回NaN

主要监听timeupdate事件,然后比较播放时间属性currentTime和音频的时长属性duration,在快要结束的时候,将currentTime属性重新设置为0,代码如下:
// 使用web audio API
var audio_file = new Audio('./videos/bg.mp3');
audio_file.play();
audio_file.addEventListener('timeupdate', function(){
    var buffer = 1.2;
    if(this.currentTime > this.duration - buffer){
        this.currentTime = 0;
        this.play();
    }}, false);
 
使用要求:
(1)音乐尽量是「淡入淡出」型,重音尽量不要在开头或结束位置,否则,即使能将音乐循环播放,也会感觉不衔接;
(2)API接口只能用于webkit内核,比较新的浏览器 

 

转载于:https://www.cnblogs.com/wmhuang/p/5452640.html

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值