日常的开拓中,我们可能会碰到对音频操作的业务逻辑。原生的 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.直接在浏览器中利用,首先引入类库文件:
<script src=\"大众/path/to/howler.js\"大众></script>
实例化 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.HTML5之多线程(Web Worker)
2.JS 根本|搞懂 typeof 和 instanceof
3.深入理解 CSS 三大特性