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

Category: Javascript , Recommended | February 1, 2016
Author: MahdiF
Views Total: 3,648
Official Page: Go to website
Last Update: February 1, 2016
License: MIT

Preview:

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

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>

You Might Be Interested In:


One thought on “JavaScript Library To Add Interaction Sound Effects To Any Elements – Loud Links

  1. deltadan79

    Thanks for the code! Worked like a charm. Had to mod it a little to get it to work without the data attribute. Awesome!

    Reply

Leave a Reply