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
Top comments (1)
Some comments may only be visible to logged-in visitors. Sign in to view all comments.