howler.js

前端 多媒体
现代浏览器的 Javascript 音频库
2019-04-20 我要评论 3 我要收藏

注意: Work is currently ongoing in the 2.0 branch. No ETA for release as of yet, but the core is fairly stable and is already under heavy production use. Click here to view the 2.0 beta branch.

howler.js

介绍

howler.js 是一个针对现代浏览器的音频库。它默认为 Web Audio API 并且回落到 HTML5 Audio

更多文档,示例和 Demo 能在 howlerjs.com 上找到。

功能特性

  • 默认为 Web Audio API
  • 回落到 HTML5 Audio
  • 支持多种文件格式以支持所有浏览器
  • 针对 Web Audio API 的自动缓存
  • 为 HTML5 Audio 实现缓存池
  • 单曲和全局静音/取消静音和音量控制
  • 多个音频同时播放
  • Easy sound sprite definition and playback
  • 淡入/淡出的声音
  • 支持网络音频3D音效定位
  • 链式方法
  • 不依赖第三方库,仅使用纯粹的Javascript
  • 轻量级, 9kb 大小 (3kb gzip压缩)

浏览器兼容

在以下浏览器/版本 中测试通过:

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

文档

例子

最基本的, 播放 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 ) 设置成 true 后当音频加载完成后就自动开始播放。
  • buffer: Boolean (默认值:false ) 设置成 true 来约束 HTML5 音频。该属性应该被用在大的音频文件上,你不需要等待整个文件下载完成和解码后再播放。
  • format: String (默认值:null ) howler.js 会从 URL 中自动检测文件格式,但是你也可以在 URL 检测不工作的情况下指定一个格式。
  • loop: Boolean (默认值:false ) 设置成 true 来永久自动播放该音频 。
  • sprite: Object (默认值:{} ) 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 播放

By default, audio on iOS is locked until a sound is played within a user interaction, and then it plays normally the rest of the page session (Apple documentation). The default behavior of howler.js is to attempt to silently unlock audio playback by playing an empty buffer on the first touchstart event. This behavior can be disabled by calling:

Howler.iOSAutoEnable = false;

许可

Copyright (c) 2013-2014 James Simpson and GoldFire Studios, Inc.

Released under the MIT License.

howler.js 相关推荐
对于该库,你有要推荐的内容么?点此提交推荐
请文明评论,与人为善,比聪明更重要!
评论