howler.js音频控制js库

转载 2016年05月31日 18:12:38

下载地址: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 
  • autoplayBoolean (true by default) Set to true to automatically start playback when sound is loaded.
  • bufferBoolean (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.
  • formatString (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.
  • loopBoolean (false by default) Set to true to automatically loop the sound forever.
  • spriteObject ({} by default) Define a sound sprite for the sound. The offset and duration are defined in milliseconds.
// Sound sprite definition format
{
  key: [offset, duration]
}
  • volumeNumber (1.0 by default) The volume of the specific track, from 0.0 to 1.0.
  • urlsArray ([] 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.
  • onendFunction (function(){} by default) Fire when the sound finishes playing (if it is looping, it'll fire at the end of each loop).
  • onloadFunction (function(){} by default) Fires when the sound is loaded.
  • onloaderrorFunction (function(){} by default) Fires when the sound fails to load.
  • onpauseFunction (function(){} by default) Fires when the sound has been paused.
  • onplayFunction (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.
    • spriteString (optional) Plays from the defined sprite key.
  • pause: Pauses playback of sound, saving the pos of playback.
    • idNumber (optional) The play instance ID.
  • stop: Stops playback of sound, resetting pos to 0.
    • idNumber (optional) The play instance ID.
  • mute: Mutes the sound, but doesn't pause the playback.
    • idNumber (optional) The play instance ID.
  • unmute: Unmutes the sound.
    • idNumber (optional) The play instance ID.
  • fadeIn: Fade in the current sound.
    • toNumber Volume to fade to (0.0 to 1.0).
    • durationNumber Time in milliseconds to fade.
    • callbackFunction (optional) Fires when fade is complete.
  • fadeOut: Fade out the current sound and pause when finished.
    • toNumber Volume to fade to (0.0 to 1.0).
    • durationNumber Time in milliseconds to fade.
    • callbackFunction (optional) Fires when fade is complete.
    • idNumber (optional) The play instance ID.
  • loop: Get/set whether to loop the sound.
    • loopBoolean (optional) To loop or not to loop, that is the question.
  • pos: Get/set the position of playback.
    • positionNumber (optional) The position to move current playback to.
    • idNumber (optional) The play instance ID.
  • sprite: Get/set sound sprite definition.
    • spriteObject (optional) See above for sound sprite definition.
  • 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.
    • xNumber The x-position of the sound.
    • yNumber The y-position of the sound.
    • zNumber The z-position of the sound.
    • idNumber (optional) The play instance ID.
  • volume: Get/set volume of this sound.
    • volumeNumber (optional) Volume from 0.0 to 1.0.
    • idNumber (optional) The play instance ID.
  • urls: Get/set the URLs to be pulled from to play in this source.
    • urlsArray (optional) Changes the source files for this Howl object.
  • on: Call/set custom events. Multiple events can be added by calling this multiple times.
    • eventString Name of event to fire/set.
    • functionFunction (optional) Define function to fire on event.
  • off: Remove custom events that you've set.
    • eventString Name of event.
    • functionFunction (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.

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.
    • volumeNumber (optional) Volume from 0.0 to 1.0.

HTML5声音引擎Howler.js简介

Howler.js是一个不错的HTML5声音引擎。功能强大,性能不错,用起来也很方便。 1. 官网 https://howlerjs.com/ 其代码托管在GitHub上。 2. 兼容性 Ho...
  • time1812
  • time1812
  • 2018年01月28日 08:15
  • 168

微信——H5实现微信摇一摇

项目终于如约上线,但是在春节前又有一个新的活动要做,类似微信的摇一摇活动。也一直在做微信公众号的东西,但是要调用微信摇一摇的接口还是有些困难,因为只提供了摇一摇周边,附近的人以及一系列的红包页面,相对...
  • xdd19910505
  • xdd19910505
  • 2016年01月28日 09:39
  • 8678

[前端] JS控制音乐播放

基于audio的音乐播放js控制 (需要一个mp3文件) HTML布局: div class="bgsound"> span class="status">span> audio...
  • u010081689
  • u010081689
  • 2015年05月26日 16:49
  • 2115

纯js实现波形图

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 1...
  • yazi1297
  • yazi1297
  • 2014年09月25日 15:17
  • 1556

canvas绘制音频波形-纯js自写

  • 2016年11月04日 18:46
  • 4.22MB
  • 下载

howler.js音频控制js库

下载地址:https://github.com/goldfire/howler.js Features  Defaults to Web Audio APIFalls back to ...
  • u013216667
  • u013216667
  • 2016年05月31日 18:12
  • 2488

cryptico.js使用技巧

cryptico.js这个加密算法库很全,很适合在前端用到各种加密解密算法的需求。但是美中不足的是,它的RSA加密不支持PEM格式,所以如果你后端用java或者python生成的公钥不能直接用PEM的...
  • muxiayayoumei
  • muxiayayoumei
  • 2015年12月03日 18:01
  • 1355

Voix.js语音控制JS类库

Voix.js语音控制JS类 原文参见: http://www.gbtags.com/gb/share/2580.htm
  • shenzhenNBA
  • shenzhenNBA
  • 2013年12月18日 18:38
  • 3213

10个优秀的Javascript的音频库

Web和Web浏览器在过去几年取得了快速的进步,这些进步与新技术通常被认识是HTML5达到的惊人的成果。然而,在这些新技术中,音频任然是不足的。尽管谷歌开了WEB音频API,使我们上网得到方便,但是只...
  • u012612399
  • u012612399
  • 2015年11月27日 16:20
  • 1042

github上实用、常用的插件和库

本文整合罗列一些平时工作或者练手项目中很可能用到的、github上实用、轻量级、无依赖的插件和库,包括功能插件、UI组件、炫酷动画、前沿技术等,让你在少造轮子的同时,享受快速开发的畅快体验。 我...
  • andyliulin
  • andyliulin
  • 2017年10月16日 10:15
  • 891
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:howler.js音频控制js库
举报原因:
原因补充:

(最多只允许输入30个字)