介绍

howler.js是现代网络的音频库。它默认为Web Audio API，而向后兼容为HTML5 Audio。这使得在所有平台上使用JavaScript进行音频操作变得轻松可靠。

Github

https://github.com/goldfire/howler.js

功能特性

• 单个API满足所有音频需求
• 默认为Web Audio API，向后兼容为HTML5 Audio
• 处理跨环境的极端情况和错误
• 支持所有编解码器以全面支持跨浏览器
• 自动缓存以提高性能
• 单独，分组或全局控制声音
• 一次播放多种声音
• 简单的声音元素定义和播放
• 完全控制衰落，速率，搜寻，音量等
• 轻松添加3D空间声音或立体声声像
• 模块化-使用你想要的内容并易于扩展
• 没有外部依赖，只有纯JavaScript
• 压缩后7kb大小

浏览器支持情况

• Google Chrome 7.0+
• Internet Explorer 9.0+
• Firefox 4.0+
• Safari 5.1.4+
• Mobile Safari 6.0+ (after user input)
• Opera 12.0+
• Microsoft Edge

Demo

截图体验不佳，可以直接看demo

开始使用

• 安装

npm install howler
#或
yarn add howler
#或
bower install howler
//使用
<script src="/path/to/howler.js"></script>
<script>var sound = new Howl({
      src: ['sound.webm', 'sound.mp3']
    });
</script>
import {Howl, Howler} from 'howler';
const {Howl, Howler} = require('howler');

范例

最基本播放mp3

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

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

// Shoot the laser!
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']
});

// 播放返回可以传递的唯一声音ID
//
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);

ES6语法

import {Howl, Howler} from 'howler';

// 设置新的 Howl.
const sound = new Howl({
  src: ['sound.webm', 'sound.mp3']
});

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

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

总结

howler.js让Web音频开发变得简单可靠，是一个值得推荐的音频库，如果你有这方面的需求，不妨尝试一下！