Automatic audio feedback for every UI action. Three themes, zero dependencies.
GitHub$ npm i ui-sounds
$ pnpm add ui-sounds
$ yarn add ui-sounds
$ bun add ui-sounds
<script src="https://cdn.jsdelivr.net/npm/ui-sounds/dist/index.global.js"></script>
$ npx skills add buburdin/ui-sounds
import { useUISound } from 'ui-sounds/react';
function App() {
const { play } = useUISound('playful');
return (
<button onClick={() => play('click')}>
Save
</button>
);
}
import { playSound, setVolume } from 'ui-sounds';
// Play a sound with any theme
playSound('click', 'minimal');
playSound('success', 'playful');
playSound('error', 'futuristic');
// Control volume
setVolume(0.3);
<script setup>
import { useUISound } from 'ui-sounds/vue';
const { play } = useUISound('calm');
</script>
<template>
<button @click="play('click')">Save</button>
</template>
<script>
import { createUISound } from 'ui-sounds/svelte';
import { onDestroy } from 'svelte';
const { play, destroy } = createUISound('natural');
onDestroy(destroy);
</script>
<button on:click={() => play('click')}>Save</button>
| Action | Sound | Duration |
|---|---|---|
| click | Short percussive tap | 30–120ms |
| navigation | Frequency sweep / whoosh | 80–450ms |
| success | Ascending tone | 100–300ms |
| error | Vibrato alert | 150–600ms |
| loading | Repeating pulse | 20–200ms |
| hover | Subtle presence | 15–45ms |
| delete | Descending warning | 80–300ms |