日常的开发中,我们可能会碰到对音频操作的业务逻辑。原生的 Audio 并不是很好用,所以我们需要一个第三方的支持,这一节,我们来说说音频插件 Howler。

一、关于 Howlerjs

Audio library for the modern web.
howler.js makes working with audio in JavaScript easy and reliable across all platforms.

二、能做什么

features

三、安装

1.npm 安装

1
npm install howler

2.yarn 安装

1
yarn add howler

3.bower 安装

1
bower install howler

四、简单使用

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

1
<script src="/path/to/howler.js"></script>

实例化 Howl

1
2
3
4
5
var sound = new Howl({
src: ['sound.webm', 'sound.mp3']
});
sound.play();

2.初始化更多数据

1
2
3
4
5
6
7
8
9
var sound = new Howl({
src: ['sound.webm', 'sound.mp3', 'sound.wav'],
autoplay: true,
loop: true,
volume: 0.5,
onend: function() {
console.log('Finished!');
}
});

3.事件监听

1
2
3
4
5
6
7
8
9
10
11
12
13
var sound = new Howl({
src: ['sound.webm', 'sound.mp3']
});
// Clear listener after first call.
sound.once('load', function(){
sound.play();
});
// Fires when the sound finishes playing.
sound.on('end', function(){
console.log('Finished!');
});

4.多个声音如何控制

1
2
3
4
5
6
7
8
9
10
11
12
var sound = new Howl({
src: ['sound.webm', 'sound.mp3']
});
// Play returns a unique Sound ID that can be passed
// into any method on Howl to control that specific sound.
var id1 = sound.play();
var id2 = sound.play();
// Fade out the first sound and speed up the second.
sound.fade(1, 0, 1000, id1);
sound.rate(1.5, id2);

五、更多参数

属性支持

  • src Array [] required
    资源路径,支持数组
  • volume Number 1.0
    设置声音大小,从 0.01.0
  • html5 Boolean false
    开启 HTML5 Audio
  • loop Boolean false
    是否循环播放
  • preload Boolean true
    定义 Howl 之后,就会开始自动化下载 audio 文件
  • autoplay Boolean false
    音频下载完毕,是否自动播放
  • mute Boolean false
    柔和过渡声音
  • sprite Object {}
    音频剪辑

    1
    2
    3
    {
    key: [offset, duration, (loop)]
    }
  • rate Number 1.0
    声音播放速度

  • pool Number 5
    缓存池大小,存放激活的音频,从而提升性能
  • format Array []
    从扩展名自动检测文件格式
  • xhrWithCredentials Boolean false
    XHR 请求的时候,是否启用 withCredentials

事件支持

  • onload Function
    当音频加载完毕执行
  • onloaderror Function
    当音频加载异常的时候执行
  • onplayerror Function
    播放音频异常时触发
  • onplay Function
    播放音频时触发
  • onend Function
    音频播放完毕时触发
  • onpause Function
    音频暂停时触发
  • onstop Function
    音频停止播放时触发
  • onmute Function
    音频是否柔和过渡
  • onvolume Function
    更改了音频声音时触发
  • onrate Function
    更改音频速度时触发
  • onseek Function
    找到音频时触发
  • onfade Function
    音频播放完毕渐出时触发

可用方法

  • play([sprite/id])
  • pause([id])
  • stop([id])
  • mute([muted], [id])
  • volume([volume], [id])
  • fade(from, to, duration, [id])
  • rate([rate], [id])
  • seek([seek], [id])
  • loop([loop], [id])
  • state()
  • playing(id)
  • on(event, function, [id])
  • duration([id])
  • once(event, function, [id])
  • off(event, [function], [id])
  • load()
  • unload()

详细 API 请移步:文档地址