Howler.js 基于 Web Audio API 的音频处理插件

Question

Howler.js 是一个新的 JavaScript 库用于处理 Web 中的音频，该库最初是为一个 HTML5 游戏引擎所开发，但也可用于其他的 Web 项目，Howler.js 基于 Google 的 Web Audio API，能够帮助你快速简单全面的控制音频。

浏览器这个玩意儿并不是个新鲜事，但是随着HTML5的发展激起了浏览器技术的巨大发展。但是浏览器上对于音频控制技术来说仍旧非常的落伍。

庆幸的是 Google积极的开发和创建了Web Audio API，这使得基于浏览器的音频控制更加的简单并且直观。但是唯一的问题是浏览器兼容性支持问题！

它使用Google的web audio API，如果浏览器不支持的话，会自动fallback到HTML audio。你可以方便的将声音控制整合到你开发的网站，应用或者web游戏中去。

Howler.js特点

• 缺省使用Web Audio API
• 可以方便的fallback回HTML audio如果浏览器不支持
• 支持不同的音频文件格式来完整的支持不同浏览器
• 针对HTML5 Audio实现了缓存池
• 支持静音和音量控制
• 多声音的同时回放
• 方便定义声音特效
• 支持淡出淡入的播放
• 支持链接方法操作
• 不使用外部类库
• 轻量级7kb（压缩后2kb）

浏览器兼容

Howler.js在下面的浏览器版本中测试通过，由于是使用Audio API，肯定是不兼容旧版本的浏览器了

• Google Chrome 4.0+
• Internet Explorer 9.0+
• Firefox 3.5+
• Safari 4.0+
• Mobile Safari 6.0+ (after user input)
• Opera 10.5+

使用Howler.js

最基本的，一个MP3播放：

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: ['sounds.mp3', 'sounds.ogg'],
  sprite: {
    blast: [0, 1000],
    laser: [2000, 3000],
    winner: [4000, 7500]
  }
});

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

属性

• autoplay: Boolean (false by default) Set to true to automatically start playback when sound is loaded.
• buffer: Boolean (false by default) Set to true to force HTML5 Audio. This should be used for large audio files so that you don't have to wait for the full file to be downloaded and decoded before playing.
• format: String (null by default) howler.js automatically detects your file format from the URL, but you may also specify a format in situations where URL extraction won't work.
• loop: Boolean (false by default) Set to true to automatically loop the sound forever.
• sprite: Object ({} by default) Define a sound sprite for the sound. The offset and duration are defined in milliseconds. A third (optional) parameter is available to set a sprite as looping.

Example:
{
  key: [offset, duration, (loop)]
}

• volume: Number (1.0 by default) The volume of the specific track, from 0.0 to 1.0.
• urls: Array ([] by default) The source URLs to the track(s) to be loaded for the sound. These should be in order of preference, howler.js will automatically load the first one that is compatible with the current browser. If your files have no extensions, you will need to explicitly specify the format using the format property.
• rate: Number (1.0 by default) The rate of playback (Web Audio API only). 1.0 is normal speed, while negative values play in reverse.
• model: String (equalpower by default) Sets the panningModel used by Web Audio API. Usually this should not be touched as howler handles it automatically, but it can be overridden with equalpower or HRTF.
• onend: Function (function(){} by default) Fire when the sound finishes playing (if it is looping, it'll fire at the end of each loop).
• onload: Function (function(){} by default) Fires when the sound is loaded.
• onloaderror: Function (function(){} by default) Fires when the sound is unable to load.
• onpause: Function (function(){} by default) Fires when the sound has been paused.
• onplay: Function (function(){} by default) Fires when the sound begins playing.

方法

• play: Begins playback of sound. Will continue from previous point if sound has been previously paused.
  • sprite: String (optional) Plays from the defined sprite key.
  • callback: Function (optional) Fires when playback begins and returns the soundId, which is the unique identifier for this specific playback instance.
• pause: Pauses playback of sound, saving the pos of playback.
  • id: Number (optional) The play instance ID.
• stop: Stops playback of sound, resetting pos to 0.
  • id: Number (optional) The play instance ID.
• mute: Mutes the sound, but doesn't pause the playback.
  • id: Number (optional) The play instance ID.
• unmute: Unmutes the sound.
  • id: Number (optional) The play instance ID.
• fade: Fade a currently playing sound between two volumes.
  • from: Number Volume to fade from (0.0 to 1.0).
  • to: Number Volume to fade to (0.0 to 1.0).
  • duration: Number Time in milliseconds to fade.
  • callback: Function (optional) Fires when fade is complete.
  • id: Number (optional) The play instance ID.
• [DEPRECATED] fadeIn: Fade in the current sound.
  • to: Number Volume to fade to (0.0 to 1.0).
  • duration: Number Time in milliseconds to fade.
  • callback: Function (optional) Fires when fade is complete.
• [DEPRECATED] fadeOut: Fade out the current sound and pause when finished.
  • to: Number Volume to fade to (0.0 to 1.0).
  • duration: Number Time in milliseconds to fade.
  • callback: Function (optional) Fires when fade is complete.
  • id: Number (optional) The play instance ID.
• loop: Get/set whether to loop the sound.
  • loop: Boolean (optional) To loop or not to loop, that is the question.
• pos: Get/set the position of playback.
  • position: Number (optional) The position to move current playback to (in seconds).
  • id: Number (optional) The play instance ID.
• pos3d: Get/set the 3D position of the audio source. The most common usage is to set the x position to affect the left/right ear panning. Setting the value higher than 1.0 will begin to decrease the volume of the sound as it moves further away. This only works with Web Audio API.
  • x: Number The x-position of the sound.
  • y: Number The y-position of the sound.
  • z: Number The z-position of the sound.
  • id: Number (optional) The play instance ID.
• sprite: Get/set sound sprite definition.
  • sprite: Object (optional) See above for sound sprite definition.
• volume: Get/set volume of this sound.
  • volume: Number (optional) Volume from 0.0 to 1.0.
  • id: Number (optional) The play instance ID.
• urls: Get/set the URLs to be pulled from to play in this source.
  • urls: Array (optional) Changes the source files for this Howl object.
• on: Call/set custom events. Multiple events can be added by calling this multiple times.
  • event: String Name of event to fire/set.
  • function: Function (optional) Define function to fire on event.
• off: Remove custom events that you've set.
  • event: String Name of event.
  • function: Function (optional) The listener to remove.
• unload: Unload and destroy a Howl object. This will immediately stop all play instances attached to this sound and remove it from the cache.

全局方法

The following methods are used to modify all sounds globally, and are called from the Howler object.

• mute: Mutes all sounds.
• unmute: Unmutes all sounds and restores them to their previous volume.
• volume: Get/set the global volume for all sounds.
  • volume: Number (optional) Volume from 0.0 to 1.0.
• codecs: Check supported audio codecs.
  • ext: String File extension. One of: "mp3", "opus", "ogg", "wav", "aac", "m4a", "mp4", "weba".

iOS播放

默认情况下，音频在iOS被锁定到一个声音在用户相互作用，并发挥正常的网页会话的其余部分（苹果的文档）。howler.js的默认行为是企图默默地打开音频播放的第一个touchend事件打一个空缓冲区。这种行为可以被调用：

Howler.iOSAutoEnable = false;

相关链接

• Github地址：https://github.com/goldfire/howler.js
• 项目主页：http://goldfirestudios.com/blog/104/howler.js-Modern-Web-Audio-Javascript-Library