Claudio.js

A lightweight JavaScript library to easily add sound effects to your web elements.

Demo

<img src="bell.svg" cl-audio="bell.ogg">

<div cl-audio="piano_c.ogg" cl-on="pointerdown">C</div>

<textarea cl-audio="typewriter.ogg" cl-on="keydown"></textarea>

1. Download the claudio.js file and include it in your project.

2. Add the following script tag to your HTML file:

<script src="path/to/claudio.js"></script>

3. Create a folder named claudio inside your static assets directory to store your sound files.

🎵 cl-audio: Specifies the sound file to play.

(optional) 🎵 cl-on: Defines the event that triggers the sound. Defaults to click.

🎵 soundname: Name of your sound file.

(optional) 🎵 event: JavaScript event that triggers the sound.

<element cl-audio="soundname" cl-on="event">