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



  • 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)



Most basic, play an MP3/OGG: 
var sound = new Howl({
  urls: ['sound.mp3', 'sound.ogg']

More playback options: 
var sound = new Howl({
  urls: ['sound.mp3', 'sound.ogg', 'sound.wav'],
  autoplay: true,
  loop: true,
  volume: 0.5,
  onend: function() {

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!'laser');

  • 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.

  • 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.


AudioPlayer.js,一个响应式且支持触摸操作的jquery音频插件 - DragonDean

AudioPlayer.js是一个响应式、支持触摸操作的 HTML5 的音乐播放器。本文是对其官网的说用说明文档得翻译,博主第一次翻译外文。不到之处还请谅解、之处。 JS文件地址: http://o...
  • bboyjoe
  • bboyjoe
  • 2015年08月25日 11:24
  • 742


首先我们先来看看运行截图,源码下载地址在最下方: 下面来看看html代码: 最强电灯泡...
  • llqqxf
  • llqqxf
  • 2016年09月02日 17:17
  • 3583

现代浏览器的web音频javascript类库 - Howler.js

日期:2013-2-6  来源 在线演示 浏览器这个玩意儿并不是个新鲜事,但是随着HTML5的发展激起了浏览器技术的巨大发展。但是浏览器上对于音频控制技术来说仍旧非常的落伍...
  • jjfat
  • jjfat
  • 2013年02月07日 13:49
  • 587


今天在进行订单的web开发的时候,碰到了一个问题,即如何利用js来让提示音播放三次,最终通过在网上查找的资料和不断的尝试,总算是解决了这个问题。 以下是详细代码: 这是写在jsp里面的: div s...


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


  • 2014年05月05日 23:45
  • 601KB
  • 下载

html canvas js音频条动画源码 仿电喵的视频风的频谱

canvas js音频条动画源码 仿电喵的视频风的频谱 音频条动画源码 仿电喵的视频风的频谱...
  • assfafa
  • assfafa
  • 2017年06月18日 17:29
  • 311


  • 2016年10月26日 13:40
  • 12KB
  • 下载


此处首先放一个MDN上关于H5音频播放的文档 使用 HTML5 音频和视频 音频audio标签使用之后是默认带进度条的,所以audio标签中的属性是我们可以定制,选择将其全部隐藏就是了,然后自己实...