Add UI sounds in your web apps in a heartbeat
I was reading the article Sounds on The Web by Raphael Salaja the other day. The article explains the importance of sounds in web applications and how integrating them just enough can dramatically enhance user experience by providing feedback and improving usability.
It’s a really well-written piece that I highly recommend you to read. But I was wondering what they are using under the hood to add these sounds since the article itself doesn’t mention any libraries or tools. So, like always, I dug the source code, and I found there’s this magic library called SND (also open-source) is being used to add these sounds.
Now, it’s pretty interesting because SND is a tiny JavaScript library that makes it super easy to add UI sounds to your web applications. It provides a simple API to play sounds for various UI interactions like button clicks, notifications, warnings, errors, and more.
And as the article title suggests, it literally takes just a “heartbeat” to add sounds to your web apps with SND.
SND takes an interesting approach to use the sounds where once the library is included in your app, you just need to add predefined classes to the HTML elements where you want the sounds to be played.
SND lets you choose from three audio kits, all of which have different sound signatures: sine, piano, and industrial
So, for instance, you can include the SND library with the sine kit like this:
<script src="https://cdn.jsdelivr.net/gh/snd-lib/snd-lib@v1.2.4/dist/browser/snd.js?kit=01"></script>
Here, the kit=01 query parameter indicates that we want to use the sine kit. Similarly, you can use kit=02 for the piano kit and kit=03 for the industrial kit.
Next, if you want to play a click sound when a button is clicked, you just need to add the class snd__button to the button element like this:
<button class="snd__button">Click Me</button>
And the button starts playing a click sound on every click, just like that. No additional JavaScript code is needed!
Here’s a CodePen demo that I created to showcase how SND works.
See the Pen SND lib demo for UI sounds by Amit Merchant (@amit_merchant) on CodePen.
The good thing here is that even on repeated clicks, the sound plays without any delay or interruption. All the nitty-gritty of handling audio playback is taken care of by the library itself.
Also, if you want finer-grained control over the sounds, you can use the JavaScript API provided by SND. For example, you can play a sound programmatically like this:
const snd = new Snd();
snd.load(Snd.KITS.SND01).then(() => {
// you can add listeners to UI events:
document.getElementById("btn").addEventListener("click", () => {
// snd.play(Snd.SOUNDS.CELEBRATION);
snd.playNotification();
});
});
One more thing I noticed about SND is that it uses something called audio sprites (like image stripes) to optimize the loading and playback of sounds. Instead of loading individual sound files for each UI interaction, SND combines multiple sounds into a single audio file (sprite) and plays specific segments of that file as needed. This approach reduces the number of HTTP requests and improves performance.
Overall, I’m quite impressed with SND and would definitely consider using it in my future web projects that require UI sounds.
👋 Hi there! This is Amit, again. I write articles about all things web development. If you enjoy my work (the articles, the open-source projects, my general demeanour... anything really), consider leaving a tip & supporting the site. Your support is incredibly appreciated!
