/ audio

Howler.js: Enhance your apps with audio feedback

I’ve worked on a couple of audio-centered apps in the last two months with other developers at Fullstack, and one thing I’ve noticed is that audio seems to make some non-musician developers feel intimidated, even if they are interested in or curious about a particular idea for an app that incorporates audio in some way.

“Oh, I’m not a musician” is a common response. These are the same developers who might work on a video or photo app without worrying that they aren’t film directors or photographers. Perhaps it’s the ephemeral nature of audio that makes it seem more mysterious and less approachable.

But from my point of view, you don’t necessarily need to be a music theorist to contribute as a developer to an audio-based project. I’d like to help demystify things a little bit.

To that end, I gave a Tech Talk last week at Fullstack on using Howler.js to enhance web apps with simple audio feedback.

This is completely doable for any web developer. You just need to have your sounds ready to add to your app, and there are plenty of online resources for getting sounds if you don’t want to make your own.

Once you 1) have sounds in a directory in your app and 2) have the Howler.js library included in your app, adding audio can be as easy as this (let’s assume you’re using jQuery):

// document.ready, etc, etc...

var bell = new Howl() {
    src: ['bell.mp3'] // See note below

$('#bell-btn').on('click', function() {

Note: for Howler 1.x, use urls instead of src.

If you think about it, you’d probably already have the #bell-btn click handler in your code, so with the addition of a mere 3 lines of code, you now have audio feedback for a user interaction. Pretty sweet.

And of course from there, you can dive deeper into Howler’s capabilities to handle more complex interactions or refine your sound handling.

Be sure to check out my live examples for this Tech Talk. Try the basic interactions on the page and check out the links to my source code on GitHub, audio resources, and more.

Howler.js: Enhance your apps with audio feedback
Share this