Howler.js HTML5声音引擎-Toy模板网

这篇具有很好参考价值的文章主要介绍了Howler.js HTML5声音引擎。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

介绍

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

1. 官网
https://howlerjs.com/
GitHub
https://github.com/goldfire/howler.js

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. 其他特点
支持3D游戏、自动缓存、支持淡入淡出效果、轻量、纯JS、无第三方依赖、模块化

日常开发中，解决一些细节问题

1. 苹果手机、安卓手机，自动播放的问题
如果尝试在页面上自动播放音频，可以侦听playerror 活动然后等待unlock 再次尝试播放音频:

var sound = new Howl({
  src: ['sound.mp3'],
  autoplay: true,
  loop: true,
  // volume: 0.5,
  onplayerror: function() {
    sound.once('unlock', function() {
      sound.play();
    });
  }
});
// sound.play(); // autoplay: true, 时此行可以不用设置

经测试，苹果手机、安卓手机在微信浏览器中均可自动播放背景音乐，但Chrome浏览器中需要在页面中点击后才可以播放音乐。

2. 播放延迟处理
- 苹果手机点击按钮音频播放延迟
- 普通H5游戏如接物游戏，当接到物品得分失分音效衔接播放时，延迟不连贯
- 普通H5声音循环周期间衔接往往有延迟不连贯
使用 Howler.js 对于延迟处理效果比较不错

例：

var soundYes = new Howl({
  src: ['game/yes.mp3']
});
var soundNo = new Howl({
  src: ['game/no.mp3']
});
......
......
if(this.down_img.score > 0){
  soundYes.play();
}else{
  soundNo.play();
}
......

安装 Howler.js

npm 安装: npm install howler
Yarn 安装: yarn add howler
Bower 安装: bower install howler
从属关系:
import {Howl, Howler} from 'howler';
或
const {Howl, Howler} = require('howler');

使用

项目中引入、使用 Howler.js
import {Howl} from 'howler';
基础示例:

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

<script> 中引入、使用 Howler.js
CDN引用或下载: https://cdnjs.com/libraries/howler
最新版本下载 howler.js | howler.min.js: https://github.com/goldfire/howler.js/tree/master/dist
基础示例:

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

示例

最基本的播放MP3:

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

sound.play();

流音频(用于现场音频或大型文件):

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

sound.play();

更多播放选项:

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

定义并演奏一个声音精灵:

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

sound.play('laser');

侦听事件:

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

// 第一次执行后清除侦听器
sound.once('load', function(){
  sound.play();
});

// 当声音播放完毕时
sound.on('end', function(){
  console.log('Finished!');
});

控制多重声音:

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

// Play返回可以传递的唯一声音ID
// 进入Howl上的任何方法来控制特定的声音
var id1 = sound.play();
var id2 = sound.play();

// 淡出第一个声音，加快第二个声音
sound.fade(1, 0, 1000, id1);
sound.rate(1.5, id2);

ES6:

import {Howl, Howler} from 'howler';

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

// 播放声音
sound.play();

// 更改全局音量
Howler.volume(0.5);

方法

play([sprite/id])
开始播放声音。返回要与其他方法一起使用的声音标识。
sprite/id :String/Number 可选获取一个参数，该参数可以是精灵或声音ID。如果传递了精灵，将根据精灵的定义播放新的声音。如果通过了声音ID，则会播放以前播放的声音（例如，在暂停后）。但是，如果通过了从池中排出的声音的ID，则不会播放任何内容。

pause([id])
暂停声音或组的播放，保存播放的搜索。
id :Number 可选声音标识。如果没有,组中的所有声音都暂停。

stop([id])
停止播放声音。
id :Number 可选声音标识。如果没有,组内的所有声音都会停止。

mute([muted], [id])
减少声音,但不暂停播放。
muted :Boolean 可选布尔可选True用于静音，false用于取消静音。
id :Number 可选声音标识。如果没有,组内的所有声音都会停止。

volume([volume], [id])
获取/设置此声音或组的音量。此方法可选地接受0、1或2个参数。
volume :Number 可选数量0.0 到1.0
id :Number 可选声音标识。如果没有,组中的所有声音都相对于它们自己的音量改变.

fade(from, to, duration, [id])
在两个音量之间衰减当前播放的声音。完成后激发淡入淡出事件。
from :Number 要从（0.0到1.0）淡入的数字音量。
to :Number 要淡入的数量音量（0.0到1.0）。
duration :Number 数字淡入淡出的时间（以毫秒为单位）。
id :Number 可选声音标识。如果没有,组中的所有声音都会消失。

rate([rate], [id])
获取/设置声音的播放速率。此方法可选地接受0、1或2个参数。
rate :Number 可选播放速率。0.5至4.0，1.0为正常速度。
id :Number 可选声音标识。如果没有,组中所有声音的播放速率就会改变。

seek([seek], [id])
获取/设置声音的播放位置。此方法可选地接受0、1或2个参数。
seek :Number 可选将当前播放移动到的位置（以秒为单位）。
id :Number 可选声音标识。如果没有,将查找第一个声音。

loop([loop], [id])
获取/设置是循环播放声音还是分组。此方法可以选择采用0、1或2个参数。
loop :Boolean 可选循环或不循环。
id :Number 可选声音标识。如果没有,组中的所有声音都将更新其循环属性。

state()
检查Howl的加载状态,返回unloaded ,loading 或loaded

playing([id])
检查声音是否正在播放,返回Boolean.如没有发出声音标识,请检查组中是否有声音正在播放。
id :Number 可选要检查的声音标识。

duration([id])
获取音频源的持续时间（以秒为单位）。将返回0，直到加载事件激发之后。
id :Number 可选要检查的声音id。传递ID将返回在该实例上播放的精灵的持续时间；否则，将返回完整的源持续时间。

on(event, function, [id])
侦听事件发生。可以通过多次调用来添加多个事件。
event :String 字符串要激发/设置的事件的名称(load ,loaderror ,playerror ,play ,end ,pause ,stop ,mute ,volume ,rate ,seek ,fade ,unlock ).
function :Function 函数定义要在事件中激发的函数。
id :Number 可选只为这个声音标识侦听事件。

once(event, function, [id])
与on相同 ,但在回调启动后它会自动删除（删除自己）。
event :String 字符串要激发/设置的事件的名称(load ,loaderror ,playerror ,play ,end ,pause ,stop ,mute ,volume ,rate ,seek ,fade ,unlock ).
function :Function 函数定义要在事件中激发的函数。
id :Number 可选只为这个声音标识侦听事件。

off(event, [function], [id])
删除您设置的事件侦听器。无参数调用删除所有事件。
event :String 字符串事件名称(load ,loaderror ,playerror ,play ,end ,pause ,stop ,mute ,volume ,rate ,seek ,fade ,unlock ).
function :Function 可选要删除的侦听器。忽略此项可删除类型的所有事件。
id :Number 可选只为这个声音标识删除事件。

load()
这是默认情况下调用的，但如果将preload设置为false，则必须调用load才能播放任何声音。

unload()
卸载并销毁Howl对象。这将立即停止所有附加到此声音的声音，并将其从缓存中删除。

全局方法

mute(muted)
将所有声音静音或取消静音。
muted: Boolean True表示静音，false表示取消静音。

volume([volume])
获取/设置所有声音相对于其自身音量的全局音量。
volume: Number 数量0.0 到1.0

stop()
停止所有声音并将它们的搜索位置重置为起始位置。

codecs(ext)
检查支持的音频编解码器。如果当前浏览器支持编解码器，则返回true。
ext: 字符串文件扩展名。其中之一: "mp3", "mpeg", "opus", "ogg", "oga", "wav", "aac", "caf", "m4a", "m4b", "mp4", "weba", "webm", "dolby", "flac"

unload()
卸载并销毁所有当前加载的Howl对象。这将立即停止所有声音并将其从缓存中删除。文章来源地址https://www.toymoban.com/news/detail-721608.html

到了这里，关于Howler.js HTML5声音引擎的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！