howler.js音频控制js库
来源:互联网 发布:阿里云免费版商务礼包 编辑:程序博客网 时间:2024/05/21 06:39
下载地址:https://github.com/goldfire/howler.js
Features
- Defaults to Web Audio API
- Falls back to HTML5 Audio
- Supports multiple file formats to support all browsers
- Automatic caching for Web Audio API
- Implements cache pool for HTML5 Audio
- Per-sound and global mute/unmute and volume control
- Playback of multiple sounds at the same time
- Easy sound sprite definition and playback
- Fade in/out sounds
- Methods can be chained
- Uses no outside libraries, just pure Javascript
- Lightweight, 9kb filesize (3kb gzipped)
Documentation
Examples
Most basic, play an MP3/OGG:
var sound = new Howl({ urls: ['sound.mp3', 'sound.ogg']}).play();
More playback options:
var sound = new Howl({ urls: ['sound.mp3', 'sound.ogg', 'sound.wav'], autoplay: true, loop: true, volume: 0.5, onend: function() { alert('Finished!'); }});
Define and play a sound sprite:
var sound = new Howl({ urls: ['sounds.mp3', 'sounds.ogg'], sprite: { blast: [0, 2000], laser: [3000, 700], winner: [5000, 9000] }});// shoot the laser!sound.play('laser');
Properties
- autoplay:
Boolean
(true
by default) Set totrue
to automatically start playback when sound is loaded. - buffer:
Boolean
(false
by default) Set totrue
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 totrue
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.
// Sound sprite definition format{ key: [offset, duration]}
- volume:
Number
(1.0
by default) The volume of the specific track, from0.0
to1.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. - 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 fails 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.
Methods
- 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.
- sprite:
- pause: Pauses playback of sound, saving the
pos
of playback.- id:
Number
(optional) The play instance ID.
- id:
- stop: Stops playback of sound, resetting
pos
to0
.- id:
Number
(optional) The play instance ID.
- id:
- mute: Mutes the sound, but doesn't pause the playback.
- id:
Number
(optional) The play instance ID.
- id:
- unmute: Unmutes the sound.
- id:
Number
(optional) The play instance ID.
- id:
- fadeIn: Fade in the current sound.
- to:
Number
Volume to fade to (0.0
to1.0
). - duration:
Number
Time in milliseconds to fade. - callback:
Function
(optional) Fires when fade is complete.
- to:
- fadeOut: Fade out the current sound and pause when finished.
- to:
Number
Volume to fade to (0.0
to1.0
). - duration:
Number
Time in milliseconds to fade. - callback:
Function
(optional) Fires when fade is complete. - id:
Number
(optional) The play instance ID.
- to:
- loop: Get/set whether to loop the sound.
- loop:
Boolean
(optional) To loop or not to loop, that is the question.
- loop:
- pos: Get/set the position of playback.
- position:
Number
(optional) The position to move current playback to. - id:
Number
(optional) The play instance ID.
- position:
- sprite: Get/set sound sprite definition.
- sprite:
Object
(optional) See above for sound sprite definition.
- sprite:
- 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 than1.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.
- x:
- volume: Get/set volume of this sound.
- volume:
Number
(optional) Volume from0.0
to1.0
. - id:
Number
(optional) The play instance ID.
- volume:
- urls: Get/set the URLs to be pulled from to play in this source.
- urls:
Array
(optional) Changes the source files for thisHowl
object.
- urls:
- 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.
- event:
- off: Remove custom events that you've set.
- event:
String
Name of event. - function:
Function
(optional) The listener to remove.
- event:
- unload: Unload and destroy a Howl object. This will immediately stop all play instances attached to this sound and remove it from the cache.
Global Methods
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 from0.0
to1.0
.
- volume:
0 0
- howler.js音频控制js库
- 现代浏览器的web音频javascript类库 - Howler.js
- canvas+howler.js
- JS控制音频播放
- JS/JQ控制音频的播放和暂停
- 如何利用js来控制音频的播放次数
- js控制
- JS控制
- JS视频和音频录制
- js实现音频歌词同步
- js音频插件实践应用
- js控制输入框/Js格式控制
- 控制台下的图表库 tcharts.js
- 使用js控制图片尺寸
- 使用js控制图片尺寸
- 用JS控制IE
- js控制media player
- js控制滚动条
- 阿里开源项目Druid
- ThreadLocal及在Android中的应用
- Android 文件目录路径
- 重新发现物理之美(三)
- 第14周实践项目2(2)——两个成员的类模板
- howler.js音频控制js库
- 靠谱iOS开发满足的条件
- 空格替换
- localStorage和sessionStorage
- the left operand of ** is a garbage value
- |NOIOJ|二分|05:派
- 学习wxpython-空的对话框-经过试验验证过
- 阿P正传一
- 判断数独是否合法