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

2024-07-15 05:41| 来源: 网络整理| 查看: 265

场景：

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

解决方案：

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

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

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

主要监听timeupdate事件，然后比较播放时间属性currentTime和音频的时长属性duration，在快要结束的时候，将currentTime属性重新设置为0，代码如下： // 使用web audio APIvar 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内核，比较新的浏览器

【本文地址】

公司简介

联系我们