HTML5声音引擎Howler.js简介

宗啸

2023-12-01

Howler.js是一个不错的HTML5声音引擎。功能强大，性能不错，用起来也很方便。

1. 官网

https://howlerjs.com/ 其代码托管在GitHub上。

2. 兼容性

Howler默认使用Web Audio，但在IE上可以自动转为HTML 5 Audio。这点很是贴心。

3. 声音激活

移动端的Safari和Chrome都禁止网页自动播放声音，必须通过用户的操作，touch, click等触发。Howler可以设置成自动捕捉用户操作激活（解禁）声音播放。

4. 声音格式

Howler.js支持很多声音格式以兼容各种浏览器。MP3, MPEG, OPUS, OGG, OGA, WAV, AAC, CAF, M4A, MP4, WEBA, WEBM, DOLBY, FLAC.

5. 声音精灵

Howler 支持声音精灵。GitHub上的audiosprite，一个基于ffmpeg的声音编译工具（https://github.com/tonistiigi/audiosprite）直接支持生成Howler格式的声音精灵，而且有诸多参数可选，可同时输出多种格式，Howler.js可以根据浏览器的支持来选择用哪个声音格式。注意Howler.js选择声音格式的顺序是声音精灵json描述文件的顺序，即你生成声音精灵时写的顺序。

6. 循环点处理

我们自己手动写的声音循环在循环一次和下一次的衔接往往有些延迟，造成不连贯，Howler.js对于循环点的处理性能不错，延迟比较小。

6. 其他特点

支持3D游戏
自动缓存
支持淡入淡出效果
轻量
纯JS
无第三方依赖
模块化

7. 官网上的简单样例

7.1 嵌入网页

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

7.2 播放mp3

var sound = new Howl({
  src: ['sound.mp3']
});

sound.play();

7.3 更多播放选项

var sound = new Howl({
  src: ['sound.webm', 'sound.mp3', 'sound.wav'],
  autoplay: true,
  loop: true,
  volume: 0.5,
  onend: function() {
    console.log('Finished!');
  }
});

7.4 定义及播放声音精灵

var sound = new Howl({
  src: ['sounds.webm', 'sounds.mp3'],
  sprite: {
    blast: [0, 3000],
    laser: [4000, 1000],
    winner: [6000, 5000]
  }
});

// Shoot the laser!
sound.play('laser');

7.5 事件监听

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!');
});

7.6 控制多个声音

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);

7.7 使用ES6

import {Howl, Howler} from 'howler';

// Setup the new Howl.
const sound = new Howl({
  src: ['sound.webm', 'sound.mp3']
});

// Play the sound.
sound.play();

// Change global volume.
Howler.volume(0.5);