cuelume
Cuelume is a curated sound palette, not an audio engine. It gives buttons, links, toggles, and completed actions clear feedback without asking developers to design sounds themselves. Add an attribute, call bind(), done.
What is it?
What it is
Cuelume is a curated palette of fourteen interaction sounds for the web, synthesized live with the Web Audio API and delivered as a zero‑dependency ESM module.
Why it exists
To give developers instant, polished audio feedback for UI interactions (hover, press, release, toggle, success, etc.) without requiring them to design or host sound files, keeping bundles tiny and integration trivial.
Who should use it
Frontend developersUI/UX designers with coding skillsWeb application developersCreative technologists
Who should avoid it
Developers requiring heavy audio enginesDevelopers needing complex sound synthesis controlProjects requiring CommonJS support
How it works
A quick walkthrough in plain English
How cuelume works
Step 1 of 3
You interact with it
Open cuelume, send a request, or connect it to your stack.
Features
Advantages
- Open source (MIT)
- Active TypeScript ecosystem
- Self-hosted deployment options
Disadvantages
- Requires operational ownership for self-hosted setups
- Community support varies by project maturity
Installation
native
npm install cuelume
FAQ
How do I add sounds to my HTML elements?
You can add data attributes to your markup, such as `data-cuelume-hover` or `data-cuelume-toggle`. After adding the attributes, call the `bind()` function once in your JavaScript to activate the interactions.
Does Cuelume require any audio files?
No. Cuelume uses the Web Audio API to synthesize all fourteen interaction sounds live in the browser, meaning there are zero runtime dependencies and no audio files to host.
Can I use Cuelume in a React or Vue application?
Yes. Cuelume works in any framework that uses HTML. For React, it is recommended to call `bind()` inside a `useEffect` hook after the component mounts.
How do I prevent sounds from playing if a user prefers silence?
You can use the `setEnabled(false)` function to make future sound playback attempts no-ops. Note that Cuelume does not persist this setting to local storage; your application must manage the user's preference.
Is Cuelume compatible with Server-Side Rendering (SSR)?
Yes, Cuelume is SSR-safe. While you can safely import it on the server, sound playback only occurs in the browser where the Web Audio API is available.
What happens if I try to play a sound that doesn't exist?
Cuelume is designed to be safe; invalid sound names or blocked Web Audio contexts will result in a silent no-op rather than throwing an error.
Featured in Videos
YouTube tutorials and walkthroughs for cuelume
Alternatives
Similar projects ranked by category, topics, and text overlap.
