前言
前言前言相信有很多人在写移动端音频播放的时候都踩过不少坑，特别是复杂音频项目在兼容多种设备的时候更是让你抓狂，比如ios端不能一开始就播放音频，必须要用户进行了操作。。。。
偶然间了解到了一个兼容所有设备和浏览器的音频引擎Howler.js 使用了一下非常完美
Howler.js 是一个新的 JavaScript 库用于处理 Web 中的音频，该库最初是为一个 HTML5 游戏引擎所开发，但也可用于其他的 Web 项目，Howler.js 基于 Google 的 Web Audio API，能够帮助你快速简单全面的控制音频。特点及兼容性特点及兼容性特点及兼容性

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

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

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

支持3D游戏

自动缓存

支持淡入淡出效果

轻量

纯JS

无第三方依赖

模块化
Howler.js默认使用Web Audio，但在IE上可以自动转为HTML 5 Audio。这点很是贴心。移动端的Safari和Chrome都禁止网页自动播放声音，必须通过用户的操作，touch, click等触发。Howler.js可以设置成自动捕捉用户操作激活（解禁）声音播放。Howler.js支持很多声音格式以兼容各种浏览器。MP3, MPEG, OPUS, OGG, OGA, WAV, AAC, CAF, M4A, MP4, WEBA, WEBM, DOLBY, FLAC.几乎涵盖了所有格式支持3D游戏自动缓存支持淡入淡出效果轻量纯JS无第三方依赖模块化「特性可以去Github查看 Howler.js」
Howler.js使用方法
使用方法使用方法官网上都有介绍 这里不过多讨论
import {Howl, Howler} from 'howler';

// 初始化一个音频类
const sound = new Howl({
src: ['sound.webm', 'sound.mp3']
});

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

// 改变全局音频声音大小
Howler.volume(0.5);

// 只想改变某个音频的大小可以在初始化的时候修改
const sound = new Howl({
src: ['sound.webm', 'sound.mp3'],
volume:0.5
});


import {Howl, Howler} from 'howler';

// 初始化一个音频类
const sound = new Howl({
src: ['sound.webm', 'sound.mp3']
});

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

// 改变全局音频声音大小
Howler.volume(0.5);

// 只想改变某个音频的大小可以在初始化的时候修改
const sound = new Howl({
src: ['sound.webm', 'sound.mp3'],
volume:0.5
});

使用Howler.js
使用Howler.js使用Howler.js最基本的，一个MP3播放：
var sound = new Howl({
urls: ['sound.mp3']
}).play();

var sound = new Howl({
urls: ['sound.mp3']
}).play();
的播放选项：
var sound = new Howl({
urls: ['sound.mp3', 'sound.ogg', 'sound.wav'],
autoplay: true,
loop: true,
volume: 0.5,
onend: function() {

console.log('Finished!');
}
});

var sound = new Howl({
urls: ['sound.mp3', 'sound.ogg', 'sound.wav'],
autoplay: true,
loop: true,
volume: 0.5,
onend: function() {

console.log('Finished!');
}
});
定义和播放某一部分的音频
var sound = new Howl({
urls: ['sounds.mp3', 'sounds.ogg'],
sprite: {

blast: [0, 1000],

laser: [2000, 3000],

winner: [4000, 7500]
}
});

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


var sound = new Howl({
urls: ['sounds.mp3', 'sounds.ogg'],
sprite: {

blast: [0, 1000],

laser: [2000, 3000],

winner: [4000, 7500]
}
});

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

总结
总结总结自己封装的音频库多多少少会有一些性能和兼容问题，比如音频循环播放的时候Howler就处理的非常好不会有切割的感觉