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

场景:

为了节省页面资源,往往需要将一段小音频循环播放,通常做法是在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内核,比较新的浏览器 

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏张善友的专栏

别再设计易碎的Web API

原文作者Mathieu Fenniak在博文中大呼:不要再设计易碎的Web API 了,否则你的合作伙伴或第三方开发者会因此恨你,而离你远去的。他认为,想设计出...

23180
来自专栏张善友的专栏

弹出式模态窗体选择文本控件

2006年就要到来了,最近比较忙,很少更新blog,今天发一个模态窗体选择文本控件辞旧迎新.新年在发几个asp.net2.0 webPart控件同各位分享: ...

22470
来自专栏张善友的专栏

ASP.NET Web API 处理架构

这篇文章主要是介绍ASP.NET Web API的处理架构:当一个HTTP请求到达直到产生一个请求的过程。ASP.NET Web API 的处理架构图如下,主要...

33480
来自专栏blackheart的专栏

[认证授权] 1.OAuth2授权

1 OAuth2解决什么问题的? 举个栗子先。小明在QQ空间积攒了多年的照片,想挑选一些照片来打印出来。然后小明在找到一家提供在线打印并且包邮的网站(我们叫它P...

48360
来自专栏布尔

后rtx集成时代

基本结构:客户端向服务器发送命令(如给目标rtx号码发送提醒、短信、访问组织和用户信息等)。 ? 1.首先要把原生API做一个基础接口封装,将RTXSDK内部的...

242100
来自专栏菩提树下的杨过

java 邮件发送

步骤1:pom.xml添加依赖项 1 <!--mail--> 2 3 <dependency> 4 ...

37860
来自专栏DeveWork

在链接前面自动添加favicon 图标(jquery)

相信你在一些网站上看过类似的东东,就是在一个可点击外链左侧,会有一个目标链接网站的favicon 图标。这一个小小的设置可能对提升用户体验有不少帮助,一些Wor...

20890
来自专栏偏前端工程师的驿站

JS魔法堂:IE5~9的Drag&Drop API

一、前言                                  《 HTML5魔法堂:全面理解Drag & Drop API》中提到从IE5开始...

203100
来自专栏我有一个梦想

游戏开发之UE4添加角色到场景中

接着上次继续学习,现在我们已经有了一个场景并且运行了,我们需要添加一个角色到场景中。要这样做,我们必须从UE4的GameFramework类继承它。 一. 创建...

43250
来自专栏张善友的专栏

.Net 跨平台可移植类库正在进行

[原文发表地址] Cross-Platform Portable Class Libraries with .NET are Happening [原文发表时间...

22890

扫码关注云+社区

领取腾讯云代金券

年度创作总结 领取年终奖励