日常的开发中，我们可能会碰到对音频操作的业务逻辑。原生的 Audio 并不是很好用，所以我们需要一个完美的第三方支持。

这一节，我们来说说音频插件 Howler。

一、关于 Howlerjs

Audio library for the modern web.

howler.js makes working with audio in JavaScript easy and reliable across all platforms.

简单来说 Howlerjs 是一个跨平台的 JS 音频库，不但支持各种浏览器，而且非常灵活。

二、能做什么

1.简洁的 API 操作。

2.使用音频精灵轻松定义和控制文件段，以实现更精确的播放和更低的资源。

3.无论是简单的立体声声像还是高级3D游戏音频，howler.js都可以轻松保持直观。

4.全音频格式支持。

5.默认为Web Audio并退回到 HTML5 Audio，以提供包括IE9和Cordova在内的所有浏览器和平台的完全覆盖。

6.控制从播放，暂停和跳转、速率，淡入淡出和循环的所有内容，等等。

7.加载的声音会自动缓存并在后续调用中重复使用，以获得更好的性能和带宽。

8.仅使用新模块化架构所需的内容，轻松扩展库以添加自定义功能。

9.howler.js 通过 Gzip 压缩，大小只有 7KB。纯 JS 实现，没有外部依赖或插件

三、安装

1.npm 安装

npm install howler

2.yarn 安装

yarn add howler

3.bower 安装

bower install howler
 

四、简单使用

1.直接在浏览器中使用，首先引入类库文件：

实例化 Howl：

2.初始化更多数据

3.事件监听

4.多个声音如何控制

五、更多属性

通过上文的示例，我们已经了解基本用法。

Howlerjs 远比想象中的强大，我们来看看更多的属性支持：

1.src Array [] required：资源路径，支持数组

2.volume Number 1.0：设置声音大小，从 0.0 到 1.0

3.html5 Boolean false：开启 HTML5 Audio

4.loop Boolean false：是否循环播放

5.preload Boolean true：定义 Howl 之后，就会开始自动化下载 audio 文件

6.autoplay Boolean false：音频下载完毕，是否自动播放

7.mute Boolean false：柔和过渡声音

8.sprite Object {}：音频剪辑

{
 key: [offset, duration, (loop)]
}

9.rate Number 1.0：声音播放速度

10.pool Number 5：缓存池大小，存放激活的音频，从而提升性能

11.format Array []：从扩展名自动检测文件格式

12.xhrWithCredentials Boolean false：在 XHR 请求的时候，是否启用 withCredentials

六、支持事件

属性允许我们去做一些定义，真正控制音频的时候，就需要用到如下的事件了：

1.onload Function：当音频加载完毕执行

2.onloaderror Function：当音频加载异常的时候执行

3.onplayerror Function：播放音频异常时触发

4.onplay Function：播放音频时触发

5.onend Function：音频播放完毕时触发

6.onpause Function：音频暂停时触发

7.onstop Function：音频停止播放时触发

8.onmute Function：音频是否柔和过渡

9.onvolume Function：更改了音频声音时触发

10.onrate Function：更改音频速度时触发

11.onseek Function：找到音频时触发

12.onfade Function：音频播放完毕渐出时触发

七、API 方法

好了，到这里我们已经完全掌握了 Howlerjs ，简单的来回顾一下吧。

方法名基本可以看出它的作用，所以就不再赘述了。

1.play([sprite/id])

2.pause([id])

3.stop([id])

4.mute([muted], [id])

5.volume([volume], [id])

6.fade(from, to, duration, [id])

7.rate([rate], [id])

8.seek([seek], [id])

9.loop([loop], [id])

10.state()

11.playing(id)

12.on(event, function, [id])

13.duration([id])

14.once(event, function, [id])

15.off(event, [function], [id])

16.load()

17.unload()

详细 API 请移步：

https://github.com/goldfire/howler.js#documentation

1.

2.

3.

閱讀更多 F2EAwesome 的文章

關鍵字: 音频 浏览器 JavaScript