Skip to content
master
Go to file
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
 
 
 
 

README.md

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

Step 1

Include the minified Javascript right before the </body> tag of your page.

...
<script src="js/loudlinks.min.js"></script>
</body>
</html>

Step 2

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

<div class=“loud-link-hover”> ... </div> <!-- sound on hover -->
<div class=“loud-link-click”> ... </div> <!-- sound on click -->

Step 3

Add the attribute data-sound” to the element with absolute URL of your sound file, substituting {{type}} for where mp3 or ogg would be (e.g. http://example.com/audio/noise.{{type}} ), or just the name of your sound file without the extension if your files are located at the root of your website under sounds/ folder with mp3/ and ogg/ subdirectories.

<div class=“loud-link-hover” data-sound="http://example.com/audio/noise.{{type}}"> ... </div> <!-- For absolute URLs, {{type}} will be replaced with '.mp3' and '.ogg' -->
<div class=“loud-link-hover” data-sound="noise"> ... </div> <!-- Look for /sounds/mp3/noise.mp3 and /sounds/ogg/noise.ogg at the root of your website directory. -->

License

See the LICENSE file for license rights and limitations (MIT).

About

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

Resources

License

Releases

No releases published

Contributors 4

  •  
  •  
  •  
  •  
You can’t perform that action at this time.