Howler.js:用于现代 Web 的音频库

阅读数:1487 2018 年 11 月 26 日 00:00

Howler.js:用于现代Web的音频库

Howler.js 提供了一个现代音频库,支持 Web Audio API HTML5 Audio 的回退机制。该项目致力于简化与使用 JavaScript 开发跨平台音频相关的开发工作。

Howler.js 为通过 JavaScript 使用音频提供了一致的 API,可以控制常见的音频模式,包括播放、暂停、搜索速率、淡入淡出和循环播放。在可能的情况下,音频文件会被自动缓存起来,用以提高播放性能。

复制代码
<script src="/path/to/howler.js"></script>
<script>
    var sound = new Howl({
      src: ['sound.webm', 'sound.mp3']
    });
</script>

或者可以利用 ES 模块将 Howler.js 作为依赖导入:

复制代码
import {Howl, Howler} from 'howler';
const {Howl, Howler} = require('howler');
var sound = new Howl({
  src: ['sound.mp3']
});
sound.play();

Howler.js 提供了两个用于处理音频的高级构造:

  • Audio Sprites——使用 Sprite 定义和控制音频文件的片段,以实现精确播放,并可以使用更小的资源;
  • Spatial Audio——提供立体声声像或 3D 游戏音频等音效。

处理音频的一个重大挑战是支持编码解码。Howler.js 支持目前浏览器提供的 14 种不同形式,包括 MP3、OPUS、OGG、WEBM 等。

Howler.js 支持所有现代 Web 浏览器,还支持 Internet Explorer 9,还被用在使用 Cordova 基于 HTML5 的 Facebook Instant Games 平台的的混合移动应用程序中。

众所周知,Web Audio API 的当前实现面临着若干挑战。规范五年多来一直在发生变化,对关键特性进行了几轮的修改。最近通过 AudioWorklets 将音频处理移到一个单独的线程中,类似于 Web Worker。Web Audio 的浏览器支持仍然不一致,Howler.js 可帮助开发人员避开这些问题。

最近的一个挑战是在播放音频剪辑之前引入用户交互。

SitePen 高级软件工程师 Paul Shannon 向 InfoQ 分享了他有关 Howler.js 以及 Web Audio 的现状和未来的想法:

Web Audio 就像音频方面的 Canvas,提供低级别的声音访问。遵循这个逻辑,Howler.js 之于 Web  Audio 就像 Threejs 之于 3D 图形。或许一旦 Web Audio 得到大规模采用,我们就会看到用于音频方面的 Instagram 风格的过滤器出现!

几家大型技术和媒体公司正在使用 Howler.js,包括谷歌、迪士尼、Mozilla 和乐高。

Howler.js 具有模块化架构,gzip 压缩后只有 7KB。Howler.js 基于 MIT 开源许可。欢迎通过 Howler.js GitHub 项目加入贡献行列。

查看英文原文 Howler.js Audio Library for the Modern Web

收藏

评论

微博

用户头像
发表评论

注册/登录 InfoQ 发表评论