bonbonpiment/loud-links

♫ A simple tiny Javascript library to add interaction sounds to your website.

Loud Links

The library creates HTML5 audio element and uses it to play mp3/ogg audio files which is currently supported in all browsers.

Demo

Download

Usage

It’s super simple, attach the library to your project and follow these 3 steps:

Step 1

At the root of your website directory create a folder named “sounds” with 2 more folders inside it with the names “mp3” & “ogg”.

---

Step 2

Add the class “loud-link-hover” to any link/element that you want to give a sound on hover.

<div class=“loud-link-hover”></div>

Or add the class “loud-link-click” to any link/element that you want to give a sound on click.

<div class=“loud-link-click”></div>

---

Step 3

Add the attribute data-src” to the element & write in it the name of your sound without the extension.

<div class=“loud-link-hover” data-src=“sound”></div>

---

Done & Done

Demo

Download