Discover the Best JavaScript Audio Library: Howler.js

By . in Toolkit. Updated on .

Outdated audio players are a thing of the past thanks to modern HTML5 audio and the rapid adoption of browser support. But web designers can go one step further with a pure audio library such as Howler.js.

This free open source JS library lets you play audio files from standard formats embedded with custom players. Howler comes with a full API, so you can build a simple audio player, a large playlist, or looping background music for an in-browser HTML5 game.

Howler was first created back in early 2013 and has gone through many iterations. Currently, the project sits at v2.x with over 7k stars on GitHub.

Recommended Reading: Web Design: How to Create A Sleek Web Audio Player

The project was created by a game studio that uses Howler in their web games for sound FX and background music. It supports a wide array of file types & codecs including MP3, OGG, WAV, AAC, CAF, M4A, MP4, WEBA, FLAC… name an audio file and I guarantee it’s supported.

howler,js demo
Howler.js demos

If you just want a simple audio player then HTML5 might be enough. But Howler comes with many features you can’t get natively with HTML, such as fading out/in with each track, or automatic caching for music files to decrease load times.

Howler is a pure JavaScript library with no dependencies and it supports all major browsers including:

  • Chrome 7+
  • Internet Explorer 9+
  • Firefox 4+
  • Mobile Safari 6+
  • Opera 12+
  • Microsoft Edge (all versions)

Older browsers default to the HTML5 audio player, so it has reasonable fallback options.

Everything in Howler.js is modular, so you can choose which features to include and which to leave out. This can greatly reduce HTTP requests making audio players a lot easier to use.

You can find the full documentation in the GitHub repo along with live demos on the main site.

This is by far the most extensive audio library on the web. It includes game sound FX for browser games and repeatable sprites that can be called whenever the user hovers or clicks something on the page.

Below, you can see a bass tuning web app from CodePen that demonstrates a small fraction of what Howler can do. And, if you wanna learn more visit the Howler GitHub repo to find documentation and download links for the latest version.

Recommended Reading: How to Stream Truncated Audio Using MediaSource API

WebsiteFacebookTwitterInstagramPinterestLinkedInGoogle+YoutubeRedditDribbbleBehanceGithubCodePenWhatsappEmail