Guide · Open source

How to use howler.js: install, play sounds and sound sprites

Updated 2026-10-29 · written with AI from the project's own documentation and checked against our catalogue data

Howler.js is an open-source JavaScript audio library for websites. It uses the browser's Web Audio API by default, falls back to HTML5 Audio when needed, and gives you one interface to play, loop, fade and control sounds. This guide is for web developers who want to add sound effects or background music, and by the end you will know how to install it, load a sound, and control playback.

howler.jsgoldfire/howler.js · ★ 25.4k · MIT Install options & downloads

Quick start

1Install the package. Run npm install howler or yarn add howler in your project folder.
2Import Howl. Import Howl and Howler from 'howler' in your script, or load the howler.js file with a script tag.
3Create a Howl. Pass a src array with at least one audio file, listing formats in order of preference.
4Play the sound. Call play() on the Howl. Use html5: true for large or streaming files.
5Add a sprite if needed. Define named offsets and durations in milliseconds, then call play with the sprite name.
6Control playback. Use the Sound ID returned by play() to fade, change rate or seek one sound, or use Howler for global settings.

What howler.js does and who it is for

Howler.js is a library for developers, not a finished audio player app. You write JavaScript that creates Howl objects and calls methods on them. The README describes it as a way to make audio in JavaScript easy and reliable across platforms.

Adding sound effects or background music to a browser game or site
Playing several sounds at once and controlling them individually or as groups
Using sound sprites, where many short sounds are packed into one audio file
Supporting many browsers, including older ones, with one API

Install howler.js with npm or Yarn

The README lists several install options. The package-manager route is the simplest. The README does not list any prerequisites.

npm: install it with the command below
Yarn: yarn add howler
Bower, a CDN (cdnjs or jsDelivr) or cloning the repo are also listed in the README

npm install howler

Load howler.js in your project

In a bundled project you import the named exports. In plain HTML you load the howler.js script file directly, then create a Howl. The src property takes a list of files in order of preference, and howler.js loads the first one the current browser can play, so list more than one format.

import {Howl, Howler} from 'howler';

Play your first sound

Create a Howl with a src array and call play(). Passing several formats, such as .webm and .mp3, gives browsers a compatible file to use. For large files or live audio, the README says to set html5: true so the file does not need to be fully downloaded and decoded before playing.

loop: true repeats the sound forever
volume takes a value from 0.0 to 1.0
autoplay: true starts playback when the sound loads
onend runs a function when the sound finishes

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

sound.play();

Use sound sprites for many short sounds

A sound sprite packs many short sounds into one audio file. You define each sound as a key with an offset and a duration in milliseconds, then play it by name. The README suggests the audiosprite tool for generating compatible sprites.

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

Control several sounds at once, fades and rate

Each call to play() returns a unique Sound ID. Pass that ID into any method to control only that sound. Methods such as fade and rate accept an ID as the last argument. Rate ranges from 0.5 to 4.0, with 1.0 as normal speed. Global settings, such as overall volume, are set on Howler.

Fade a sound with fade(from, to, duration, id)
Change speed with rate(value, id)
Change global volume with Howler.volume(0.5)
Listen for events such as load and end with on() and once()

var id1 = sound.play();
var id2 = sound.play();

sound.fade(1, 0, 1000, id1);
sound.rate(1.5, id2);

Know the limits of the README

The README covers playback, volume, rate, seek, fading and panning, plus 3D spatial sound through a plugin, and it says the library has no outside dependencies. It focuses on the modern web, so it is not the tool for server-side or non-browser audio. The README's browser list shows older versions, and it notes that Mobile Safari needs user input before playback.

What people use it for

Sound effects for a browser game, such as shots or pickups played from a sprite file
Background music that loops with a volume setting
Playing several sounds at once and fading one out while another speeds up
Streaming longer audio with html5 mode so playback starts without a full download

Frequently asked questions

Is howler.js free to use?

Yes. The repository is licensed under the MIT License, which is listed on the project page. Check the license file in the repository for the full terms.

How do I install howler.js?

Run npm install howler or yarn add howler in your project. The README also lists Bower, CDN hosting and cloning the repo as options.

What are the requirements for howler.js?

The README lists no prerequisites, and says the library has no outside dependencies and is written in pure JavaScript. It is aimed at browser use.

Does howler.js work in older browsers?

The README lists tested browsers including Internet Explorer 9.0+, Firefox 4.0+, Safari 5.1.4+ and Opera 12.0+, plus Mobile Safari 6.0+ after user input. It falls back to HTML5 Audio when Web Audio is not available.

What are alternatives to howler.js?

The project's comparison list names Tone.js, Pizzicato and the native Web Audio API. Use the native API if you want direct control, or a library like Tone.js for more advanced audio work.

Why does my sound not play on mobile?

The README says Mobile Safari 6.0+ works after user input, so playback usually needs to start from a user action such as a tap. Also make sure your src list includes a format the browser supports.

New agent skills, repos and AI tools — every week

The best new skills and open-source projects, the fastest-growing repos, and one free prompt. Five minutes to read. Unsubscribe anytime.

Our verdict

Howler.js suits web developers who need sound effects, background music, several overlapping sounds or sprite files without writing low-level audio code. It is not a good fit if you want a ready-made audio player with no coding, or if you need audio processing beyond playback, fades, rate, seek and panning, or non-browser audio work. For advanced synthesis, consider Tone.js or the native Web Audio API.

Install options & downloads