Loud Links, ajouter du son dans votre site web

Loud Links est une petite bibliothèque JavaScript qui permet d’ajouter des interactions sonores et de jouer des sons MP3 / OGG dans votre site Web.

Jouer un son dans un site web

Du son dans vos page web…

La bibliothèque crée un élément audio HTML5 et l’utilise pour jouer des fichiers MP3 / OGG qui sont actuellement pris en charge dans tous les navigateurs.

La mise en place est d’une simplicité enfantine : il suffit de créer 3 répertoires (sounds, mp3, ogg) dans votre arborescence, d’ajouter un « class loud-link-hover » à votre tag (DIV, A, etc)  et l’attribut « data-sound » avec le nom de fichier à jouer. C’est tout !

Include the minified Javascript right before the </body> tag of your page.
<script src="js/loudlinks.min.js"></script>
</body>
</html>
...
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 -->
...
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. -->

Site Internet : Loud Links
Licence : MIT

En savoir plus sur Free Tools

Abonnez-vous pour poursuivre la lecture et avoir accès à l’ensemble des archives.

Continuer la lecture