I built a JavaScript library that adds hover sounds to any HTML element.

Why it's useful

Instead of just playing audio, I built it to solve real-world edge cases:

data-delay: Prevents accidental sound triggers when users just move the mouse quickly across the screen.

.refresh(): A built-in method to automatically bind events to new elements injected dynamically via AJAX or APIs.

Smart Tab-Switching: It automatically pauses all active audio if the user changes browser tabs, saving battery and performance.

Global Controls: It includes .playAll(), .pauseAll(), and .stopAll() so you can easily build a master "mute" button for your site.

⚠️ The Autoplay Challenge

Keep in mind that modern browsers block audio until the user interacts with the page. RariaSense handles this gracefully without crashing — the hover sounds will start working seamlessly right after the user's first click anywhere on the site!

The project is completely open-source under the MIT License.

Check out the code on my GitHub, play around with it, and let me know: What are your thoughts on using audio to improve web UX? 👇

By Paulo Guerra