JavaScript Library To Add Interaction Sound Effects To Any Elements – Loud Links

Preview:

Description:

Loud Links is a tiny, zero-dependencies JavaScript library which adds interactive html5 sound effects to any DOM elements. Can be triggered on hover or click.

How to use it:

Place your Html5 audios into ‘mp3’ and ‘ogg’ folders. The file structure should be like this:

sounds/mp3/sound-1.mp3
sounds/ogg/sound-1.ogg

Place the Loud Links JavaScript library at the end of the document.

<script src="js/loudlinks-1.0.min.js"></script>

Add a sound effect to your button that plays on mouse hover.

<button class="loud-link-hover" data-src="audio-name" type="button" name="button">Hover over me</button>

Add a sound effect to your button that plays on click.

<button class="loud-link-click" data-src="audio-name" type="button" name="button">Click me</button>