写点什么

JavaScript 音频库 Howler.js 2.0 版改进了 Web 音频的播放

  • 2016-08-02
  • 本文字数:1420 字

    阅读完需:约 5 分钟

JavaScript 音频库 Howler.js 当前已升级到 2.0 版本。该版本的更新中包括了“一系列的功能添加与改进”。

Howler.js 的作者 James Simpson ,也是游戏开发工作室 Goldfire Studios 的创建者,指出该版本是一次“彻底地改写”,并已完全地兼容 HTML5 和 Web Audio API。Simpson 随即指出这归功于数十名项目贡献者的工作。

Simpson 在博客帖子“ Howler.js 2.0 版发布了”中,将 howler.js 描述成“模块化的程序库”。文中提及 howler.js 考虑到去实现“可扩展添加更多高级功能的精益内核,例如若干支持 Web Audio API 扩展部分(空间音频、空间滤波器)的可用工具”。

“现在 Howler.js 已经模块化了。该内核体现了 howler.js 的初始目标,”Simpson 说,“该音频库提供使用 Web Audio API 的空间插件,这样增加了对空间和立体声支持。”

2.0 版本的最大改进是使用一种三层实现方法解决了在多种声音回放时的混淆问题,这也是 1.X 版本系列中的一个显著痛点。

这个改进需要开发人员更改使用 howler.js 处理音频的方法。Simpson 指出:

当前版本中的概念包括:全局(Howler)、组(Howl)和声音个体(Sound)。为对回放具有更好的控制,无论实现中是否使用了 Sprite 类,每个播放的声音都应去获取其可操控的 Sound 对象。这样,对于此后同一组中的一个或多个声音都可使用 Howl 对象的方法调用。

复制代码
Howler (全局) ->
Howl(组) ->
Sound(个体)

此外,在这次 howler.js 的重大升级中所提供的新方法包括:设置具有一旦触发就可自动自我移除特性的事件监听器的 once 方法、对当前正在播放的声音返回真值的 playing 方法、返回音源持续时间的 duration 方法、返回 Howl 对象加载状态的 state 方法,以及全新实现的全局 unload 方法,该方法卸载所有活动 Howl 对象并重置 AudioContext 对象,用于内存的清理。

Howler 2.0 版本还实现了对一些倍受欢迎功能的支持,包括:对 Dolby 音频和 CAFF 音频文件回放的支持,对除了.weba 类型文件以外的.webm 类型文件的支持。

版本中还实现了一些 howler.js 补丁,意图解决该音频库中的若干程序缺陷,其中包括对 ext 选项的改进,这使得该选项更加适用于音频流的播放(并在版本中提供了例子 SoundCloud)。此外,Howler.js 2.0 版解决了 unload 方法使用中潜在的内存泄漏问题,并且该 JavaScipt 库会自动回退到 HTML5 Audio 以兼容 HTTPS 页面内的 HTTP 文件的加载。

在 2.0 版本的所有突破性更新中,一个重要更新是 play 方法不再以回调函数形式使用,而是即时返回当前回放声音的标识符。Simpson 指出这意味着 play 方法将不能再以链接方式使用,但是他也阐明对其它方法的调用并未改变。

复制代码
// 获取给定回放声音的标识符。
var id = sound.play();
// 暂停回放。
sound.pause(id);

另一个重要革新是新版本中弃用了 fadeIn 和 fadeOut 方法,以支持单一的 fade 方法。

复制代码
// 声音淡入。
sound.fade(0, 1, 1000);
// 一旦上一个音频淡化结束,声音淡出。
sound.once('fade', function(){
sound.fade(1, 0, 1000);
});

可在此处查看howler.js 2.0 版的完整的更新日志。Howler.js 使用 MIT 许可发布,当前已经得到包括谷歌、迪斯尼、乐高、Mozilla 以及 NASA 等的应用。

查看英文原文: Audio Library Howler.js Has 2.0 Release to Make Some Noise About


感谢夏雪对本文的审校。

给InfoQ 中文站投稿或者参与内容翻译工作,请邮件至 editors@cn.infoq.com 。也欢迎大家通过新浪微博( @InfoQ @丁晓昀),微信(微信号: InfoQChina )关注我们。

2016-08-02 19:006939
用户头像

发布了 227 篇内容, 共 81.4 次阅读, 收获喜欢 28 次。

关注

评论

发布
暂无评论
发现更多内容

秒云入选2022年成都市新经济梯度培育企业

MIAOYUN

成都市新经济梯度培育企业

30+场技术论坛 1000+科技新品发布 今年云栖大会我们关注什么?

阿里技术

云栖大会

工作四年,靠这份Java面试宝典,跳槽到阿里,月薪直涨12K

收到请回复

Java 面试 语言 & 开发 金九银十

戴尔Precision 3660工作站:设计师手里的金刚钻

科技热闻

navicat的使用与数据库的DML操作

渔戈

MySQL SQL语句 10月月更

Kubernetes fror Flink 硬气功实践

CTO技术共享

flink 个人成长 10月月更

NFT卡牌链游系统开发Web3游戏技术

薇電13242772558

dapp web3

戴尔Latitude5000——回归职场初心

科技热闻

长安链源码分析之网络模块 net-liquid(7)

SUSE 推出业界首个自适应 Linux 平台原型

Anthony

Linux 自适应

手把手教你成为荣耀开发者:如何进行注册与认证?

荣耀开发者服务平台

开发者 手机 新手指南 荣耀 honor

Vue响应式系统原理并实现一个双向绑定

yyds2026

Vue

Vue组件是怎样挂载的

yyds2026

Vue

Vue3的基本指令

渔戈

前端 Vue3 10月月更

外包和自研应该选择呢?教你三招选出最合适自己的平台

千锋IT教育

云安全和传统安全有什么区别?又有什么关系?

行云管家

网络安全 数据安全 云安全

创新引擎,值得信赖的生产力工具PowerEdge T550塔式服务器

科技热闻

分析服务用多维度、多场景的用户分层,带您深度玩转精细化游戏运营

HarmonyOS SDK

分析

文本识别与检测-【技术白皮书】第三章-第二节: 基于分割的场景文本检测方法

合合技术团队

人工智能 神经网络 文字识别 自然语言理解

随需应变,快速开发工作流

力软低代码开发平台

Vue模板是怎样编译的

yyds2026

Vue

长安链源码分析之网络模块 net-liquid(6)

邂逅Vue3

渔戈

前端 Vue3 10月月更

华为架构师亲手操刀,世界五百强都在用的kafka也就那么回事

程序知音

Java kafka 架构 后端技术

ElasticSearch + Kibana for Kubernetes 硬气功实践 2

CTO技术共享

elasticsearch 个人成长 10月月更

SAP | abap的数据对象

暮春零贰

SAP 10月月更 数据对象

EMQ x 阿里云:云上高效构建,IoT 数据一站处理|直播预告

阿里云弹性计算

物联网 IoT 计算巢

LP流动性质押挖矿dapp系统开发详情(案例演示)

开发微hkkf5566

手把手完成智慧路灯的开发,完成设备上云【华为云IoT】

DS小龙哥

10月月更

开源日志收集 肿么选型??

CTO技术共享

个人成长 log 10月月更

分布式事务-引出分布式事务

zarmnosaj

10月月更

JavaScript音频库Howler.js 2.0版改进了Web音频的播放_JavaScript_James Chesters_InfoQ精选文章