Important: This documentation covers Yarn 1 (Classic).
For Yarn 2+ docs and migration guide, see yarnpkg.com.

Package detail

howler

goldfire1.4mMIT2.2.4TypeScript support: definitely-typed

Javascript audio library for the modern web.

howler, howler.js, audio, sound, web audio, webaudio, browser, html5, html5 audio, audio sprite, audiosprite

readme

howler.js

Description

howler.js is an audio library for the modern web. It defaults to Web Audio API and falls back to HTML5 Audio. This makes working with audio in JavaScript easy and reliable across all platforms.

Additional information, live demos and a user showcase are available at howlerjs.com.

Follow on Twitter for howler.js and development-related discussion: @GoldFireStudios.

Features

  • Single API for all audio needs
  • Defaults to Web Audio API and falls back to HTML5 Audio
  • Handles edge cases and bugs across environments
  • Supports all codecs for full cross-browser support
  • Automatic caching for improved performance
  • Control sounds individually, in groups or globally
  • Playback of multiple sounds at once
  • Easy sound sprite definition and playback
  • Full control for fading, rate, seek, volume, etc.
  • Easily add 3D spatial sound or stereo panning
  • Modular - use what you want and easy to extend
  • No outside dependencies, just pure JavaScript
  • As light as 7kb gzipped

Browser Compatibility

Tested in the following browsers/versions:

  • Google Chrome 7.0+
  • Internet Explorer 9.0+
  • Firefox 4.0+
  • Safari 5.1.4+
  • Mobile Safari 6.0+ (after user input)
  • Opera 12.0+
  • Microsoft Edge

Live Demos

Documentation

Contents

Quick Start

Several options to get up and running:

  • Clone the repo: git clone https://github.com/goldfire/howler.js.git
  • Install with npm: npm install howler
  • Install with Yarn: yarn add howler
  • Install with Bower: bower install howler
  • Hosted CDN: cdnjs jsDelivr

In the browser:

<script src="/path/to/howler.js"></script>
<script>
    var sound = new Howl({
      src: ['sound.webm', 'sound.mp3']
    });
</script>

As a dependency:

import {Howl, Howler} from 'howler';
const {Howl, Howler} = require('howler');

Included distribution files:

  • howler: This is the default and fully bundled source that includes howler.core and howler.spatial. It includes all functionality that howler comes with.
  • howler.core: This includes only the core functionality that aims to create parity between Web Audio and HTML5 Audio. It doesn't include any of the spatial/stereo audio functionality.
  • howler.spatial: This is a plugin that adds spatial/stereo audio functionality. It requires howler.core to operate as it is simply an add-on to the core.

Examples

Most basic, play an MP3:
var sound = new Howl({
  src: ['sound.mp3']
});

sound.play();
Streaming audio (for live audio or large files):
var sound = new Howl({
  src: ['stream.mp3'],
  html5: true
});

sound.play();
More playback options:
var sound = new Howl({
  src: ['sound.webm', 'sound.mp3', 'sound.wav'],
  autoplay: true,
  loop: true,
  volume: 0.5,
  onend: function() {
    console.log('Finished!');
  }
});
Define and play a sound sprite:
var sound = new Howl({
  src: ['sounds.webm', 'sounds.mp3'],
  sprite: {
    blast: [0, 3000],
    laser: [4000, 1000],
    winner: [6000, 5000]
  }
});

// Shoot the laser!
sound.play('laser');
Listen for events:
var sound = new Howl({
  src: ['sound.webm', 'sound.mp3']
});

// Clear listener after first call.
sound.once('load', function(){
  sound.play();
});

// Fires when the sound finishes playing.
sound.on('end', function(){
  console.log('Finished!');
});
Control multiple sounds:
var sound = new Howl({
  src: ['sound.webm', 'sound.mp3']
});

// Play returns a unique Sound ID that can be passed
// into any method on Howl to control that specific sound.
var id1 = sound.play();
var id2 = sound.play();

// Fade out the first sound and speed up the second.
sound.fade(1, 0, 1000, id1);
sound.rate(1.5, id2);
ES6:
import {Howl, Howler} from 'howler';

// Setup the new Howl.
const sound = new Howl({
  src: ['sound.webm', 'sound.mp3']
});

// Play the sound.
sound.play();

// Change global volume.
Howler.volume(0.5);

More in-depth examples (with accompanying live demos) can be found in the examples directory.

Core

Options

src Array/String [] required

The sources to the track(s) to be loaded for the sound (URLs or base64 data URIs). 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 extension using the format property.

volume Number 1.0

The volume of the specific track, from 0.0 to 1.0.

html5 Boolean false

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.

loop Boolean false

Set to true to automatically loop the sound forever.

preload Boolean|String true

Automatically begin downloading the audio file when the Howl is defined. If using HTML5 Audio, you can set this to 'metadata' to only preload the file's metadata (to get its duration without download the entire file, for example).

autoplay Boolean false

Set to true to automatically start playback when sound is loaded.

mute Boolean false

Set to true to load the audio muted.

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. An easy way to generate compatible sound sprites is with audiosprite.

new Howl({
  sprite: {
    key1: [offset, duration, (loop)]
  },
});

rate Number 1.0

The rate of playback. 0.5 to 4.0, with 1.0 being normal speed.

pool Number 5

The size of the inactive sounds pool. Once sounds are stopped or finish playing, they are marked as ended and ready for cleanup. We keep a pool of these to recycle for improved performance. Generally this doesn't need to be changed. It is important to keep in mind that when a sound is paused, it won't be removed from the pool and will still be considered active so that it can be resumed later.

format Array []

howler.js automatically detects your file format from the extension, but you may also specify a format in situations where extraction won't work (such as with a SoundCloud stream).

xhr Object null

When using Web Audio, howler.js uses an XHR request to load the audio files. If you need to send custom headers, set the HTTP method or enable withCredentials (see reference), include them with this parameter. Each is optional (method defaults to GET, headers default to null and withCredentials defaults to false). For example:

// Using each of the properties.
new Howl({
  xhr: {
    method: 'POST',
    headers: {
      Authorization: 'Bearer:' + token,
    },
    withCredentials: true,
  }
});

// Only changing the method.
new Howl({
  xhr: {
    method: 'POST',
  }
});

onload Function

Fires when the sound is loaded.

onloaderror Function

Fires when the sound is unable to load. The first parameter is the ID of the sound (if it exists) and the second is the error message/code.

The load error codes are defined in the spec:

  • 1 - The fetching process for the media resource was aborted by the user agent at the user's request.
  • 2 - A network error of some description caused the user agent to stop fetching the media resource, after the resource was established to be usable.
  • 3 - An error of some description occurred while decoding the media resource, after the resource was established to be usable.
  • 4 - The media resource indicated by the src attribute or assigned media provider object was not suitable.

    onplayerror Function

    Fires when the sound is unable to play. The first parameter is the ID of the sound and the second is the error message/code.

    onplay Function

    Fires when the sound begins playing. The first parameter is the ID of the sound.

    onend Function

    Fires when the sound finishes playing (if it is looping, it'll fire at the end of each loop). The first parameter is the ID of the sound.

    onpause Function

    Fires when the sound has been paused. The first parameter is the ID of the sound.

    onstop Function

    Fires when the sound has been stopped. The first parameter is the ID of the sound.

    onmute Function

    Fires when the sound has been muted/unmuted. The first parameter is the ID of the sound.

    onvolume Function

    Fires when the sound's volume has changed. The first parameter is the ID of the sound.

    onrate Function

    Fires when the sound's playback rate has changed. The first parameter is the ID of the sound.

    onseek Function

    Fires when the sound has been seeked. The first parameter is the ID of the sound.

    onfade Function

    Fires when the current sound finishes fading in/out. The first parameter is the ID of the sound.

    onunlock Function

    Fires when audio has been automatically unlocked through a touch/click event.

Methods

play([sprite/id])

Begins playback of a sound. Returns the sound id to be used with other methods. Only method that can't be chained.

  • sprite/id: String/Number optional Takes one parameter that can either be a sprite or sound ID. If a sprite is passed, a new sound will play based on the sprite's definition. If a sound ID is passed, the previously played sound will be played (for example, after pausing it). However, if an ID of a sound that has been drained from the pool is passed, nothing will play.

pause([id])

Pauses playback of sound or group, saving the seek of playback.

  • id: Number optional The sound ID. If none is passed, all sounds in group are paused.

stop([id])

Stops playback of sound, resetting seek to 0.

  • id: Number optional The sound ID. If none is passed, all sounds in group are stopped.

mute([muted], [id])

Mutes the sound, but doesn't pause the playback.

  • muted: Boolean optional True to mute and false to unmute.
  • id: Number optional The sound ID. If none is passed, all sounds in group are stopped.

volume([volume], [id])

Get/set volume of this sound or the group. This method optionally takes 0, 1 or 2 arguments.

  • volume: Number optional Volume from 0.0 to 1.0.
  • id: Number optional The sound ID. If none is passed, all sounds in group have volume altered relative to their own volume.

fade(from, to, duration, [id])

Fade a currently playing sound between two volumes. Fires the fade event when complete.

  • 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.
  • id: Number optional The sound ID. If none is passed, all sounds in group will fade.

rate([rate], [id])

Get/set the rate of playback for a sound. This method optionally takes 0, 1 or 2 arguments.

  • rate: Number optional The rate of playback. 0.5 to 4.0, with 1.0 being normal speed.
  • id: Number optional The sound ID. If none is passed, playback rate of all sounds in group will change.

seek([seek], [id])

Get/set the position of playback for a sound. This method optionally takes 0, 1 or 2 arguments.

  • seek: Number optional The position to move current playback to (in seconds).
  • id: Number optional The sound ID. If none is passed, the first sound will seek.

loop([loop], [id])

Get/set whether to loop the sound or group. This method can optionally take 0, 1 or 2 arguments.

  • loop: Boolean optional To loop or not to loop, that is the question.
  • id: Number optional The sound ID. If none is passed, all sounds in group will have their loop property updated.

state()

Check the load status of the Howl, returns a unloaded, loading or loaded.

playing([id])

Check if a sound is currently playing or not, returns a Boolean. If no sound ID is passed, check if any sound in the Howl group is playing.

  • id: Number optional The sound ID to check.

duration([id])

Get the duration of the audio source (in seconds). Will return 0 until after the load event fires.

  • id: Number optional The sound ID to check. Passing an ID will return the duration of the sprite being played on this instance; otherwise, the full source duration is returned.

on(event, function, [id])

Listen for events. Multiple events can be added by calling this multiple times.

  • event: String Name of event to fire/set (load, loaderror, playerror, play, end, pause, stop, mute, volume, rate, seek, fade, unlock).
  • function: Function Define function to fire on event.
  • id: Number optional Only listen to events for this sound id.

once(event, function, [id])

Same as on, but it removes itself after the callback is fired.

  • event: String Name of event to fire/set (load, loaderror, playerror, play, end, pause, stop, mute, volume, rate, seek, fade, unlock).
  • function: Function Define function to fire on event.
  • id: Number optional Only listen to events for this sound id.

off(event, [function], [id])

Remove event listener that you've set. Call without parameters to remove all events.

  • event: String Name of event (load, loaderror, playerror, play, end, pause, stop, mute, volume, rate, seek, fade, unlock).
  • function: Function optional The listener to remove. Omit this to remove all events of type.
  • id: Number optional Only remove events for this sound id.

load()

This is called by default, but if you set preload to false, you must call load before you can play any sounds.

unload()

Unload and destroy a Howl object. This will immediately stop all sounds attached to this sound and remove it from the cache.

Global Options

usingWebAudio Boolean

true if the Web Audio API is available.

noAudio Boolean

true if no audio is available.

autoUnlock Boolean true

Automatically attempts to enable audio on mobile (iOS, Android, etc) devices and desktop Chrome/Safari.

html5PoolSize Number 10

Each HTML5 Audio object must be unlocked individually, so we keep a global pool of unlocked nodes to share between all Howl instances. This pool gets created on the first user interaction and is set to the size of this property.

autoSuspend Boolean true

Automatically suspends the Web Audio AudioContext after 30 seconds of inactivity to decrease processing and energy usage. Automatically resumes upon new playback. Set this property to false to disable this behavior.

ctx Boolean Web Audio Only

Exposes the AudioContext with Web Audio API.

masterGain Boolean Web Audio Only

Exposes the master GainNode with Web Audio API. This can be useful for writing plugins or advanced usage.

Global Methods

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

mute(muted)

Mute or unmute all sounds.

  • muted: Boolean True to mute and false to unmute.

volume([volume])

Get/set the global volume for all sounds, relative to their own volume.

  • volume: Number optional Volume from 0.0 to 1.0.

stop()

Stop all sounds and reset their seek position to the beginning.

codecs(ext)

Check supported audio codecs. Returns true if the codec is supported in the current browser.

  • ext: String File extension. One of: "mp3", "mpeg", "opus", "ogg", "oga", "wav", "aac", "caf", "m4a", "m4b", "mp4", "weba", "webm", "dolby", "flac".

unload()

Unload and destroy all currently loaded Howl objects. This will immediately stop all sounds and remove them from cache.

Plugin: Spatial

Options

orientation Array [1, 0, 0]

Sets the direction the audio source is pointing in the 3D cartesian coordinate space. Depending on how directional the sound is, based on the cone attributes, a sound pointing away from the listener can be quiet or silent.

stereo Number null

Sets the stereo panning value of the audio source for this sound or group. This makes it easy to setup left/right panning with a value of -1.0 being far left and a value of 1.0 being far right.

pos Array null

Sets the 3D spatial position of the audio source for this sound or group relative to the global listener.

pannerAttr Object

Sets the panner node's attributes for a sound or group of sounds. See the pannerAttr method for all available options.

onstereo Function

Fires when the current sound has the stereo panning changed. The first parameter is the ID of the sound.

onpos Function

Fires when the current sound has the listener position changed. The first parameter is the ID of the sound.

onorientation Function

Fires when the current sound has the direction of the listener changed. The first parameter is the ID of the sound.

Methods

stereo(pan, [id])

Get/set the stereo panning of the audio source for this sound or all in the group.

  • pan: Number A value of -1.0 is all the way left and 1.0 is all the way right.
  • id: Number optional The sound ID. If none is passed, all in group will be updated.

pos(x, y, z, [id])

Get/set the 3D spatial position of the audio source for this sound or group relative to the global listener.

  • x: Number The x-position of the audio source.
  • y: Number The y-position of the audio source.
  • z: Number The z-position of the audio source.
  • id: Number optional The sound ID. If none is passed, all in group will be updated.

orientation(x, y, z, [id])

Get/set the direction the audio source is pointing in the 3D cartesian coordinate space. Depending on how directional the sound is, based on the cone attributes, a sound pointing away from the listener can be quiet or silent.

  • x: Number The x-orientation of the source.
  • y: Number The y-orientation of the source.
  • z: Number The z-orientation of the source.
  • id: Number optional The sound ID. If none is passed, all in group will be updated.

pannerAttr(o, [id])

Get/set the panner node's attributes for a sound or group of sounds.

  • o: Object All values to update.
    • coneInnerAngle 360 A parameter for directional audio sources, this is an angle, in degrees, inside of which there will be no volume reduction.
    • coneOuterAngle 360 A parameter for directional audio sources, this is an angle, in degrees, outside of which the volume will be reduced to a constant value of coneOuterGain.
    • coneOuterGain 0 A parameter for directional audio sources, this is the gain outside of the coneOuterAngle. It is a linear value in the range [0, 1].
    • distanceModel inverse Determines algorithm used to reduce volume as audio moves away from listener. Can be linear, inverse or exponential. You can find the implementations of each in the spec.
    • maxDistance 10000 The maximum distance between source and listener, after which the volume will not be reduced any further.
    • refDistance 1 A reference distance for reducing volume as source moves further from the listener. This is simply a variable of the distance model and has a different effect depending on which model is used and the scale of your coordinates. Generally, volume will be equal to 1 at this distance.
    • rolloffFactor 1 How quickly the volume reduces as source moves from listener. This is simply a variable of the distance model and can be in the range of [0, 1] with linear and [0, ∞] with inverse and exponential.
    • panningModel HRTF Determines which spatialization algorithm is used to position audio. Can be HRTF or equalpower.
  • id: Number optional The sound ID. If none is passed, all in group will be updated.

Global Methods

stereo(pan)

Helper method to update the stereo panning position of all current Howls. Future Howls will not use this value unless explicitly set.

  • pan: Number A value of -1.0 is all the way left and 1.0 is all the way right.

pos(x, y, z)

Get/set the position of the listener in 3D cartesian space. Sounds using 3D position will be relative to the listener's position.

  • x: Number The x-position of the listener.
  • y: Number The y-position of the listener.
  • z: Number The z-position of the listener.

orientation(x, y, z, xUp, yUp, zUp)

Get/set the direction the listener is pointing in the 3D cartesian space. A front and up vector must be provided. The front is the direction the face of the listener is pointing, and up is the direction the top of the listener is pointing. Thus, these values are expected to be at right angles from each other.

  • x: Number The x-orientation of listener.
  • y: Number The y-orientation of listener.
  • z: Number The z-orientation of listener.
  • xUp: Number The x-orientation of the top of the listener.
  • yUp: Number The y-orientation of the top of the listener.
  • zUp: Number The z-orientation of the top of the listener.

Group Playback

Each new Howl() instance is also a group. You can play multiple sound instances from the Howl and control them individually or as a group (note: each Howl can only contain a single audio file). For example, the following plays two sounds from a sprite, changes their volume together and then pauses both of them at the same time.

var sound = new Howl({
  src: ['sound.webm', 'sound.mp3'],
  sprite: {
    track01: [0, 20000],
    track02: [21000, 41000]
  }
});

// Play each of the track.s
sound.play('track01');
sound.play('track02');

// Change the volume of both tracks.
sound.volume(0.5);

// After a second, pause both sounds in the group.
setTimeout(function() {
  sound.pause();
}, 1000);

Mobile/Chrome Playback

By default, audio on mobile browsers and Chrome/Safari 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 touchend event. This behavior can be disabled by calling:

Howler.autoUnlock = false;

If you try to play audio automatically on page load, you can listen to a playerror event and then wait for the unlock event to try and play the audio again:

var sound = new Howl({
  src: ['sound.webm', 'sound.mp3'],
  onplayerror: function() {
    sound.once('unlock', function() {
      sound.play();
    });
  }
});

sound.play();

Dolby Audio Playback

Full support for playback of the Dolby Audio format (currently support in Edge and Safari) is included. However, you must specify that the file you are loading is dolby since it is in a mp4 container.

var dolbySound = new Howl({
  src: ['sound.mp4', 'sound.webm', 'sound.mp3'],
  format: ['dolby', 'webm', 'mp3']
});

Facebook Instant Games

Howler.js provides audio support for the new Facebook Instant Games platform. If you encounter any issues while developing for Instant Games, open an issue with the tag [IG].

Format Recommendations

Howler.js supports a wide array of audio codecs that have varying browser support ("mp3", "opus", "ogg", "wav", "aac", "m4a", "m4b", "mp4", "webm", ...), but if you want full browser coverage you still need to use at least two of them. If your goal is to have the best balance of small filesize and high quality, based on extensive production testing, your best bet is to default to webm and fallback to mp3. webm has nearly full browser coverage with a great combination of compression and quality. You'll need the mp3 fallback for Internet Explorer.

It is important to remember that howler.js selects the first compatible sound from your array of sources. So if you want webm to be used before mp3, you need to put the sources in that order.

If you want your webm files to be seekable in Firefox, be sure to encode them with the cues element. One way to do this is by using the dash flag in ffmpeg:

ffmpeg -i sound1.wav -dash 1 sound1.webm

Sponsors

Support the ongoing development of howler.js and get your logo on our README with a link to your site [become a sponsor]. You can also become a backer at a lower tier and get your name in the BACKERS list. All support is greatly appreciated!

GoldFire Studios

License

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

Released under the MIT License.

changelog

2.2.3 (September 20, 2023)

  • FIXED Invalid regex detection of Opera versions 100+ (#1676).
  • FIXED The pannerAttr method wouldn't set the values the first time it was called (#1497).
  • FIXED Error when refreshing the buffer on a sound that has already been unloaded (#1508).

2.2.3 (June 30, 2021)

  • FIXED Fatal error in Chrome for iOS (#1491).

2.2.2 (June 27, 2021)

The README has been updated with more examples and various clarifications. PRs/issues with suggestions for further improvements are appreciated.

  • CHANGED Include keydown event when unlocking audio (#1417).
  • CHANGED The audio state is changed to loading while the player is buffering (#1444).
  • FIXED Looping sounds wouldn't always work correctly in recent versions of Firefox desktop (#1445).
  • FIXED Disabled WebM in Safari 14 until bug in Safari is resolved (#1476).
  • FIXED Error when calling seek() on audio that hasn't loaded (#1423).
  • FIXED Before a sound had loaded, calling pause() after seek() didn't have the intended behavior (#1439).

2.2.1 (Oct 25, 2020)

  • FIXED The latest Safari 14 changed how WAV support was detected (#1415).
  • FIXED Edge case that could cause an infinite loop while fading (#1369).
  • FIXED Calling seek without a seek value while a file was still loading no longer adds it to the queue and correctly returns 0 (#1189).
  • FIXED Correctly handle finite audio files that return Infinity duration in Safari (#658).

2.2.0 (May 17, 2020)

  • ADDED New xhr property that allows setting custom headers (such as for auth), changing the withCredentials setting and specifying the HTTP method for the request. These only apply to Web Audio (#997).
  • ADDED New Howler.stop() global stop method to stop all sounds at once (#1308).
  • ADDED Support for m4b audio format (#1170).
  • CHANGED Allow passing metadata string to preload option to only preload the metadata (#1140).
  • FIXED Correctly handle AudioContext interrupted state causing stuck suspending state (#1106).
  • FIXED The volume method would sometimes return incorrect values when using very short fade lengths (#1045).
  • FIXED Error that HowlerGlobal was not defined when using jsdom-global (#1331).
  • FIXED Memory leak in Safari when an audio context can't be unlocked (#1338).

Breaking Changes

  • The xhrWithCredentials property is now included in the xhr property object with key withCredentials.

2.1.3 (December 24, 2019)

  • FIXED Don't try to obtain HTML5 audio if there is no audio support (#1191).
  • FIXED The x/y/z orientations for the top of the listener weren't being set properly (#1221).
  • FIXED Race condition that could prevent looping audio from always looping (#1225).
  • FIXED Race condition that could cause the main volume to be reset to 1 if called before unlockAudio (#1210).

2.1.2 (April 19, 2019)

  • FIXED Removed browser check for auto play unlock since all major browsers now implement this.
  • FIXED Live streams now stop downloading when they are stopped, also fixing issue in Chrome with stopping twice (#1129).
  • FIXED Prevent error in Edge when Audio isn't supported (#1147).

2.1.1 (December 21, 2018)

  • FIXED Regression that broke simple play/pause usage in certain edge cases (#1101).
  • FIXED Loading and unloading multiple Howls with the same src could cause them all to unload (#1103).

2.1.0 (December 12, 2018)

  • ADDED Howler now maintains a general pool of HTML5 Audio nodes that are unlocked on first user input, which fixes issues with subsequent HTML5 Audio plays not working (#1008).
  • ADDED New global html5PoolSize option that allows setting the default size of the HTML5 Audio object pool (#1008).
  • CHANGED Since locking of audio is no longer mobile-only, mobileAutoEnable has been renamed to autoUnlock.
  • FIXED Playing a sound with locked audio in Chrome or elsewhere could cause playing() to return true (#939).
  • FIXED Correctly use setPosition instead of setOrientation in Safari (#1033).
  • FIXED Prevent error on seek or duration being negative (#1034).
  • FIXED Force fade values to be numbers to prevent errors (#1027).
  • FIXED An InvalidStateError could sometimes be thrown in Internet Explorer (#1052).
  • FIXED Prevent silent failure of AudioContext creation in Safari (#1021).
  • FIXED Changing rate and seek on a paused sound could cause seek to end up at the wrong position (#1088).
  • FIXED Calling play twice before a sound had loaded could lead to both sounds having the same ID (#1060).

Breaking Changes

  • If you are directly setting Howler.mobileAutoEnable (it defaults to true), then you should change this to Howler.autoUnlock.
  • The new HTML5 Audio object pool shouldn't change anything for 99% of use-cases, but if for whatever reason you don't want to use the pool, you can set html5PoolSize to 0 to bypass using the pool.

2.0.15 (August 24, 2018)

  • FIXED Errors with touch events and blocked click events in Chrome (#1003 #1011 #1025 #1026).
  • FIXED Audio decoding error wasn't always handled correctly (#1019).
  • FIXED Potential error during playback in Internet Explorer 11 (#1016).

2.0.14 (July 12, 2018)

  • CHANGED Auto unlocking of audio now runs on Chrome to fix issue with HTML5 Audio needing user interaction.
  • CHANGED Added a new unlock event that is fired when the auto unlock happens.
  • CHANGED A playerror now gets fired when HTML5 Audio fails to play due to lack of user interaction.
  • FIXED Improved HTML5 Audio play lock checks to prevent race conditions (#995).
  • FIXED Intermittent error in Chrome when decoding audio data (#988).
  • FIXED Error when trying to loop spatial audio without a sprite (#985).
  • FIXED Instantly fire the end event when a sound is seeked past its duration (#963).
  • FIXED Another issue in Safari where spatial orientation was throwing an error.

2.0.13 (June 22, 2018)

  • FIXED Prevent stop event from firing alongside end when using HTML5 Audio (#974).
  • FIXED Correctly reset a Sound after using spatial audio (#962).
  • FIXED Remove a Howl from cache when unloaded after failing to load (#978).
  • FIXED Race condition could lead to error when cleaning the buffer.

2.0.12 (May 9, 2018)

  • FIXED The previous Chrome deprecation fixes broke spatial positioning in Safari.

2.0.10 (May 5, 2018)

  • FIXED Fixed another Chrome deprecation warning when using panning methods (#923).
  • FIXED Playback rate wasn't working correctly in Internet Explorer when defined in the Howl constructor (#936).
  • FIXED Looped audio would only play twice in Internet Explorer (#921).

2.0.9 (February 10, 2018)

  • FIXED More accurate HTML5 Audio end timer and fix for Firefox streams ending early (#883).
  • FIXED Prevent play events from duplicating in certain instances (#899).
  • FIXED Add second parameter to HTML5 Audio playback promise to fix Safari error (#896).
  • FIXED Refactored the internal queue system to fix various edge cases.

2.0.8 (January 19, 2018)

  • CHANGED Fades now use elapsed time to be more accurate when intervals are inconsistent (#885).
  • CHANGED Improve timing of short fades (#884).
  • FIXED Fixed another Chrome deprecation when setting playback rate.
  • FIXED Prevent onplay from firing when first setting stereo value (#843).

2.0.7 (December 18, 2017)

  • FIXED Accidental const was included in the previous version.

2.0.6 (December 15, 2017)

  • FIXED Replaced deprecated gain.value and gain.pan.value with setValueAtTime (#856).
  • FIXED Audio sprites weren't ending correctly in Internet Explorer 11 (#841).
  • FIXED Correctly set group volume when fading (#539).
  • FIXED Cancel fade on sound when mute is called (#666).
  • FIXED Uncaught error when play() request was interrupted by a call to pause() (#835).
  • FIXED Incorrect reference to global _scratchBuffer (#834).

2.0.5 (October 6, 2017)

  • ADDED Add support for withCredentials to Web Audio XHR requests (#610).
  • ADDED Add playerror event for when mobile HTML5 audio is unable to play (#774).
  • FIXED Refactor fade method to eliminate bind memory allocations (no change to API).
  • FIXED Prevent seeking after sound has been unloaded (#797).
  • FIXED Check for paused instead of ended on HTML5 end check to correctly handle data URI's (#775).
  • FIXED Fix unlocking of mobile audio on iOS when user swipes instead of taps (#808).
  • FIXED pannerAttr values can now be set via object as the documentation originally specified.
  • FIXED Various corrections and improvements to the spatial audio documentation.

2.0.4 (June 9, 2017)

  • CHANGED Removed the resuming state, which wasn't actually being used and was leading to a bug on Android (#679).
  • CHANGED Any playback initiated before the sound has loaded will now go into the queue to fix various race conditions (#714).
  • FIXED Correctly initialize an AudioContext with the global mute status (#714).
  • FIXED AudioContext unlocks on user interaction within a cross-domain iframe on Android Chrome (#756).
  • FIXED Stopping/pausing a group of sounds now behaves as expected in edge cases (#734).
  • FIXED Sound ID's now start at 1000 instead of 0 to avoid rate collisions (#764).
  • FIXED Prevent unknown mime errors on Internet Explorer when unloading a sound (#720).
  • FIXED Correctly clean up error event listeners (#720).
  • FIXED Audio clipping in Internet Explorer when network latency is present with HTML5 Audio (#720).
  • FIXED Allow passing just an event and ID to turn off listener (#767).
  • FIXED npm warning caused by invalid license definition (#763).

2.0.3 (March 11, 2017)

  • CHANGED Unloading a sound no longer fires the end event (#675).
  • FIXED Remove setTimeout wrapper on HTML5 play call to fix issues on mobile browsers (#694).
  • FIXED Remove rare possibility of duplicate sound ID's by using global counter (#709).
  • FIXED Support fades with 2+ decimal places (#696).
  • FIXED Error in Firefox caused by invalid silent WAV on unload (#678).
  • FIXED Check for and warn about missing file extension (#680).
  • FIXED Regression in Firefox relating to spatial audio (#664).

2.0.2 (December 4, 2016)

  • FIXED Wait to begin playback until AudioContext has resumed (#643).
  • FIXED Run noAudio check on initial setup instead of waiting for first Howl (#619).
  • FIXED Add play event to start of queue when autoplay is used (#659).
  • FIXED Make sure seek and duration are always >= 0 to prevent errors (#682).
  • FIXED Audio test wouldn't work in IE11 Enhanced Security Mode (#631).
  • FIXED Ensure AudioContext exists on unload (#646).
  • FIXED Always fire pause event even if sound is already paused (#639).

2.0.1 (October 14, 2016)

  • ADDED Support for FLAC audio files.
  • FIXED Improve fading performance when short fade times are used (#621).
  • FIXED Correctly handle fades from 0 to 0 volume (#575).
  • FIXED Prevent a load error from blocking all future playback (#613).
  • FIXED Reset noAudio to false when a sound is unloaded (#617).
  • FIXED Stop a sound even if it is not playing (#595).
  • FIXED Emit stop event before returning from stop (#616).
  • FIXED Improve codec checks by removing x- prefix (#576).
  • FIXED Set correct loop start/end when calling loop on a sprite (#604).

2.0.0 (July 19, 2016)

This major release contains just a few breaking changes outlined below. Howler.js has been rewritten from the ground up using the knowledge and work since the initial release. There's a long list of additions and improvements, which I urge you to read through as the library has evolved quite a bit over this time.

The biggest change is how you should think about your audio when using howler.js. There is now the concept of global (Howler), group (Howl) and single sound (Sound). Each sound that is played gets its own Sound object that can be manipulated, giving much greater control over playback, whether using sprites or not. Howl method calls can then apply to one sound or all in the group.

Howler (global) ->
        Howl (group) ->
                Sound (single)

Howler.js now also has the concept of plugins. The core represents 100% compatibility across hTML5 Audio and Web Audio, adhering to the initial goals of the library. There is also a new Spatial Plugin that adds 3D and stereo audio support only available in the Web Audio API.

Read more about the update in this blog post.

Breaking Changes

  • The buffer option is now named html5. Use this to force HTML5 Audio usage.
  • The urls option is now named src to specify the audio file(s) to play.
  • The pos method has been renamed to seek.
// Change the seek position of a sound (in seconds).
sound.seek(10);
  • mute and unmute have been consolidated into mute.
// Mute a sound (or all sounds).
sound.mute(true);
Howler.mute(true);

// Unmute a sound (or all sounds).
sound.mute(false);
Howler.mute(false);
  • The play method no longer takes a callback and immediately returns the playback sound id (this means you can no longer chain onto the play method, but all others work the same).
// Get sound id for a specific playback.
var id = sound.play();

// Pause this playback.
sound.pause(id);
  • The deprecated fadeIn and fadeOut methods have been removed in favor of the single fade method.
// Fade in a sound.
sound.fade(0, 1, 1000);

// Fade out the sound once the previous fade has ended.
sound.once('fade', function(){
  sound.fade(1, 0, 1000);
});

New Features

  • Lots of general code cleanup, simplification and reorganization.
  • Howler.js is now modularized. The core represents the initial goal for howler.js with 100% compatibility across HTML5 Audio and Web Audio. The spatial plugin adds spatial and stereo support through Web Audio API.
  • The new structure allows for full control of sprite playback (this was buggy or didn't work at all before).
  • New once method to setup event listeners that will automatically remove themselves once fired.
  • New playing method that will return true if the specified sound is currently playing.
  • New duration method that will return the duration of the audio source.
  • New state method that will return the loaded state of the Howl.
  • New preload option to allow disabling the auto-preload functionality.
  • New events: fade, stop, mute, volume, rate, seek.
  • New rate method that allows changing playback rate at runtime.
  • New global unload method that unloads all active Howls and resets the AudioContext to clear memory.
  • New pool option to allow setting the inactive sound pool size (for advanced use, still defaults to 5).
  • Support for playback of Dolby Audio files.
  • Support for .webm extension in addition to .weba.
  • Support for playback of CAFF audio files.
  • (Spatial) New Howler listener methods stereo, pos and orientation.
  • (Spatial) New Howl methods stereo, pos, orientation and pannerAttr to control stereo and spatial audio of single sounds or groups of sounds.
  • (Spatial) pannerAttr allows for control of coneInnerAngle, coneOUterAngle, coneOuterGain, distanceModel, maxDistance, panningModel, refDistance and rolloffFactor.
  • Third parameter to on, once and off to allow listening or removing events for only a specific sound id.
  • The following methods now alter all sounds within a Howl group when no id is passed: pause, stop, volume, fade, mute, loop, rate.
  • New codec recommendations and notes have been added to the documentation.
  • Web Audio AudioContext now automatically suspends and resumes to lower processing and power usage.

Bug Fixes

  • Improved the ext option and made it especially usefully for playing streams (for example, SoundCloud).
  • The fade method now uses native Web Audio fading when in that mode.
  • Fades are now automatically stopped when a new one is started, volume is changed or the sound is paused/stopped.
  • Moved any needed try/catch statements into own methods to prevent de-optimization in V8 and others.
  • Automatically checks for disabled audio in Internet Explorer.
  • An internal event queue is now used to fix issues caused by multiple actions pre-load.
  • When using Web Audio, a panner node is only added when spatial audio is used.
  • The rate option now changes the playback rate on both Web Audio and HTML5 Audio.
  • The event system has been overhauled to be more reliable.
  • Methods called before a sound has loaded no longer cause events to stick in the queue.
  • The end event correctly fires at the end of each loop when using Web Audio.
  • Several issues with playback of sprites.
  • Several issues with playback timing after pausing sounds.
  • Improved support for seeking a sound while it is playing.
  • When playback rate is changed, the end event now fires at the correct time.
  • Potential memory leak when using the unload method.
  • Calling pause on a sound that hasn't yet loaded now works correctly.
  • Muting a sound while it is fading now works.
  • Playback of base64 encoded sounds in Internet Explorer 9.
  • MIME check for some base64 encoded MP3's.
  • Now tries to automatically unlock audio on mobile browsers besides Mobile Safari.
  • Falls back to HTML5 Audio when loading an HTTP file on an HTTPS page (avoids Mixed Content errors).
  • Stopping a stream is now possible, along with various other fixes.
  • Audio on Chrome for Android no longer gets stuck after a period of inactivity.
  • Crash in iOS <9 webview.
  • Bug in iOS that can cause audio distortion when opening/closing browser.
  • Only setup AudioContext after first Howl is setup so that background audio on mobile devices behaves as expected.

1.1.29 (January 22, 2016)

  • ADDED Error messages added onto each loaderror event (thanks Philip Silva).
  • FIXED Various edge-case bugs by no longer comparing functions by string in .off() (thanks richard-livingston).
  • FIXED Edge case where multiple overlapping instances of the same sound won't all fire end (thanks richard-livingston).
  • FIXED end event now fires correctly when changing the rate of a sound.

1.1.28 (October 22, 2015)

  • FIXED Typo with iOS enabler that was preventing it from working.

1.1.27 (October 2, 2015)

  • FIXED Automatic audio unlocking on iOS 9 by switching to touchend from touchstart.

1.1.26 (April 21, 2015)

  • FIXED Looping in Chrome due to a change in the Web Audio spec implemented in Chrome 42.

1.1.25 (July 29, 2014)

  • ADDED The AudioContext is now available on the global Howler object (thanks Matt DesLauriers).
  • FIXED When falling back to HTML5 Audio due to XHR error, delete cache for source file to prevent multi-playback issues.

1.1.24 (July 20, 2014)

  • FIXED Improved performance of loading files using data URIs (thanks Rob Wu).
  • FIXED Data URIs now work with Web Audio API (thanks Rob Wu).
  • FIXED Omitting the second parameter of the off method now correctly clears all events by that name (thanks Gabriel Munteanu).
  • FIXED Fire end event when unloading playing sounds.
  • FIXED Small error fix in iOS check.

1.1.23 (July 2, 2014)

  • FIXED Playing multiple sprites rapidly with HTML5 Audio cause the sprite to break due to a v1.1.22 update.
  • FIXED Don't run the iOS test if there is no audio context, which prevents a breaking error.

1.1.22 (June 28, 2014)

  • ADDED Howler will now automatically attempt to unlock audio on iOS (thanks Federico Brigante).
  • ADDED New codecs global Howler method to check for codec support in the current browser (thanks Jay Oster).
  • FIXED End timers are now correctly cleaned up when a sound naturally completes rather than being forced to stop.

1.1.21 (May 28, 2014)

  • ADDED Support for npm and bower (thanks Morantron).
  • ADDED Support for audio/aac, audio/m4a and audio/mp4 mime types (thanks Federico Brigante).
  • FIXED Calculation of duration after pausing a sprite that was sometimes causing unexpected behavior.
  • FIXED Clear the event listener when creating a new HTML5 Audio node.

1.1.20 (April 18, 2014)

  • ADDED When using Web Audio API, the panningModel now defaults to 'equalpower' to give higher quality sound. It then automatically switches to 'HRTF' when using 3D sound. This can also be overridden with the new model property.
  • FIXED Another bug causing issues in CocoonJS (thanks Olivier Biot).
  • FIXED Issue that could have caused invalid state errors and a memory leak when unloading in Internet Explorer.
  • FIXED The documentation has been updated to include the rate property.

1.1.19 (April 14, 2014)

  • ADDED Added CocoonJS support (thanks Olivier Biot).
  • FIXED Several issues with pausing sprite instances by overhauling how end timers are tracked and cleared internally.
  • FIXED Prevent error when using a server-side require where window is absent (thanks AlexMost).

1.1.18 (March 23, 2014)

  • FIXED Muting a looping sound now correctly keeps the sound muted when using HTML5 Audio.
  • FIXED Wrap AudioContext creation in try/catch to gracefully handle browser bugs: Chromium issue (thanks Chris Buckley).
  • FIXED Listen for HTML5 Audio errors and fire loaderror if any are encountered (thanks digitaltonic).

1.1.17 (February 5, 2014)

  • FIXED Another bug in Chrome that would throw an error when pausing/stopping when a source is already stopped.
  • ADDED CommonJS support for things like Browserify (thanks Michal Kuklis).
  • ADDED Support for playback mp4 files.
  • ADDED Expose the noAudio variable to the global Howler object.
  • FIXED A rounding error that was causing HTML5 Audio to cut off early on some environments.
  • FIXED The onend callback now correctly fires when changing the pos of a sound after it has started playing and when it is using HTML5 Audio.

1.1.16 (January 8, 2014)

  • FIXED Prevent InvalidStateError when unloading a sound that has already been stopped.
  • FIXED Bug in unload method that prevented the first sound from being unloaded.

1.1.15 (December 28, 2013)

  • FIXED Bug that prevented master volume from being set to 0.
  • FIXED Bug that prevented initial volume from being set to 0.
  • FIXED Update the README to accurately show autoplay as defaulting to false.
  • FIXED Call loaderror when decodeAudioData fails.
  • FIXED Bug in setting position on an active playing WebAudio node through 'pos(position, id)' (thanks Arjun Mehta).
  • FIXED An issue with looping after resuming playback when in WebAudio playback (thanks anzev).

1.1.14 (October 18, 2013)

  • FIXED Critical bug fix that was breaking support on some browsers and some codecs.

1.1.13 (October 17, 2013)

  • FIXED Code cleanup by removing redundant canPlay object (thanks Fabien).
  • FIXED File extensions are now detected correctly if there is a query string with dots in the filename (thanks theshock).
  • FIXED Fire onloaderror if a bad filename is passed with the urls property.

1.1.12 (September 12, 2013)

  • UPDATED Changed AMD definition to anonymous module and define it as global always (thanks Fabien).
  • ADDED Added the rate property to Howl object creation, allowing you to specify the playback rate. This only works when using Web Audio (thanks Qqwy).
  • FIXED Prevent some instances of IE9 from throwing "Not Implemented" error (thanks Tero Tilus).

1.1.11 (July 28, 2013)

  • FIXED Bug caused by trying to disconnect audio node when using HTML5 Audio.
  • FIXED Correctly return the sound's position when it is paused.
  • FIXED Another bug that caused looping sounds to not always correctly resume after a pause.

1.1.10 (July 26, 2013)

  • ADDED New unload method to destroy a Howl object. This will stop all associated sounds instantly and remove the sound from the cache.
  • FIXED When using Web Audio, loop from the correct position after pausing the sound halfway through.
  • FIXED Always return a number when getting a sound's position with the pos method, and always return the reference to the sound when setting a sound that hasn't loaded.

1.1.9 (July 11, 2013)

  • FIXED Issue where calling the volume method before a sound had loaded prevented the volume from being changed.

1.1.8 (July 10, 2013)

  • FIXED urls method now works again, and can take a string rather than an array if only one url is being passed.
  • FIXED Make node.play async when not using webAudio (thanks Alex Dong).

1.1.7 (May 30, 2013)

  • FIXED Hotfix for a missing parameter that somehow missed the 1.1.6 commit in global muting.

1.1.6 (May 30, 2013)

  • ADDED A general fade method that allows a playing sound to be faded from one volume to another.
  • DEPRECATED The fadeIn and fadeOut methods should no longer be used and have been deprecated. These will be removed in a future major release.
  • FIXED No longer require the sprite parameter to be passed into the play method when just passing a callback function.
  • FIXED Cleaned up global muting code. (thanks arnorhs).

1.1.5 (May 3, 2013)

  • ADDED Support for the Ogg Opus codec (thanks Andrew Carpenter).
  • ADDED Semver tags for easy package management (thanks Martin Reurings).
  • ADDED Improve style/readability of code that discovers which audio file extension to use (thanks Fabien).
  • ADDED The onend event now passes the soundId back as the 2nd parameter of the callback (thanks Ross Cairns).
  • FIXED A few small typos in the comments. (thanks VAS).

1.1.4 (April 28, 2013)

  • FIXED A few small bugs that broke global mute and unmute when using HTML5 Audio.

1.1.3 (April 27, 2013)

  • FIXED Bug that prevented global mute from working 100% of the time when using HTML5 Audio.

1.1.2 (April 24, 2013)

  • FIXED Calling volume before play now works as expected.
  • FIXED Edge case issue with cache cleaning.
  • FIXED Load event didn't fire when new URLs were loaded after the initial load.

1.1.1 (April 17, 2013)

  • ADDED onloaderror event fired when sound fails to load (thanks Thiago de Barros Laceda).
  • ADDED format property that overrides the URL extraction of the file format (thanks Kenan Shifflett).
  • FIXED AMD implementation now only defines one module and removes global scope (thanks Kenan Shifflett).
  • FIXED Broken chaining with play method.

1.1.0 (April 11, 2013)

  • ADDED New pos3d method that allows for positional audio (Web Audio API only).
  • ADDED Multi-playback control system that allows for control of specific play instances when sprites are used. A callback has been added to the play method that returns the soundId for the playback instance. This can then be passed as the optional last parameter to other methods to control that specific playback instead of the whole sound object.
  • ADDED Pass the Howl object reference as the first parameter in the custom event callbacks.
  • ADDED New optional parameter in sprite definitions to define a sprite as looping rather than the whole track. In the sprite definition array, set the 3rd value to true for looping (spriteName: [pos, duration, loop]).
  • FIXED Now all audio acts as a sound sprite internally, which helps to fix several lingering bugs (doesn't affect the API at all).
  • FIXED Improved implementation of Web Audio API looping.
  • FIXED Improved implementation of HTML5 Audio looping.
  • FIXED Issue that caused the fallback to not work when testing locally.
  • FIXED Fire onend event at the end of fadeOut.
  • FIXED Prevent errors from being thrown on browsers that don't support HTML5 Audio.
  • FIXED Various code cleanup and optimizations.

1.0.13 (March 20, 2013)

  • ADDED Support for AMD loading as a module (thanks @mostlygeek).

1.0.12 (March 28, 2013)

  • ADDED Automatically switch to HTML5 Audio if there is an error due to CORS.
  • FIXED Check that only numbers get passed into volume methods.

1.0.11 (March 8, 2013)

  • ADDED Exposed usingWebAudio value through the global Howler object.
  • FIXED Issue with non-sprite HTML5 Audio clips becoming unplayable (thanks Paul Morris).

1.0.10 (March 1, 2013)

  • FIXED Issue that caused simultaneous playback of audio sprites to break while using HTML5 Audio.

1.0.9 (March 1, 2013)

  • ADDED Spec-implementation detection to cover new and deprecated Web Audio API methods (thanks @canuckistani).

1.0.8 (February 25, 2013)

  • ADDED New onplay event.
  • ADDED Support for playing audio from base64 encoded strings.
  • FIXED Issue with soundId not being unique when multiple sounds were played simultaneously.
  • FIXED Verify that an HTML5 Audio Node is ready to play before playing it.
  • FIXED Issue with onend timer not getting cleared all the time.

1.0.7 (February 18, 2013)

  • FIXED Cancel the correct timer when multiple HTML5 Audio sounds are played at the same time.
  • FIXED Make sure howler.js is future-compatible with UglifyJS 2.
  • FIXED Duration now gets set correctly when pulled from cache.
  • FIXED Tiny typo in README.md (thanks @johnfn).

1.0.6 (February 8, 2013)

  • FIXED Issue with global mute calls happening before an HTML5 Audio element is loaded.

1.0.5 (February 7, 2013)

  • FIXED Global mute now also mutes all future sounds that are played until unmute is called.

1.0.4 (February 6, 2013)

  • ADDED Support for WebM audio.
  • FIXED Issue with volume changes when on HTML5 Audio.
  • FIXED Round volume values to fix inconsistencies in fade in/out methods.

1.0.3 (February 2, 2013)

  • FIXED Make sure self is always defined before returning it.

1.0.2 (February 1, 2013)

  • ADDED New off method that allows for the removal of custom events.
  • FIXED Issue with chaining the on method.
  • FIXED Small typo in documentation.

1.0.1 (January 30, 2013)

  • ADDED New buffer property that allows you to force the use of HTML5 on specific sounds to allow streaming of large audio files.
  • ADDED Support for multiple events per event type.
  • FIXED Issue with method chaining before a sound was ready to play.
  • FIXED Use self everywhere instead of this to maintain consistency.

1.0.0 (January 28, 2013)

  • First commit