Skip to content

MahdiF/loud-links

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

24 Commits
 
 
 
 
 
 
 
 

Repository files navigation

Loud Links

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


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

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •