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

ゝ一世哀愁。 2021-11-19 14:44 305阅读 0赞

**场景：**

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

**解决方案：**

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

<table> 
 <tbody> 
  <tr> 
   <td>事件名称</td> 
   <td>事件作用</td> 
  </tr> 
  <tr> 
   <td>timeupdate</td> 
   <td>当前播放的时长发生改变时触发</td> 
  </tr> 
  <tr> 
   <td>&nbsp;</td> 
   <td>&nbsp;</td> 
  </tr> 
 </tbody> 
</table>

<table> 
 <tbody> 
  <tr> 
   <td>属性名称</td> 
   <td>属性作用</td> 
  </tr> 
  <tr> 
   <td>currentTime &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;</td> 
   <td> 用来获取或控制当前播放的时间，单位为s</td> 
  </tr> 
  <tr> 
   <td>duration</td> 
   <td> 获取媒体文件的总时长，以s为单位，如果无法获取，返回NaN</td> 
  </tr> 
 </tbody> 
</table>

主要监听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