Toggle for play sound on click (Web Audio); off by default
Sound Effects
Toggle for play sound on click (Web Audio); off by default
Same BEM classes and behavior as Astro, Svelte, and React.
Add this component
The command below includes <strong>Sound Effects</strong>—run it in your project directory to install this component (and the CSS if needed). No prompts.
Choose your package manager — click a tab to select, then copy the command.
npm pnpm yarn bun
bashbash
npx rizzo-css add SoundEffects
bashbash
pnpm dlx rizzo-css add SoundEffects
bashbash
npx rizzo-css add SoundEffects
bashbash
bunx rizzo-css add SoundEffects
Live examples
Vue
Usage
Usage
Full example for each framework (Astro, Vanilla, Svelte, Vue, React). Switch framework via View as or by clicking a Usage tab—both stay in sync.
Astro Vanilla Svelte Vue React
astroastro
---
import SoundEffects from '../components/astro/SoundEffects.astro';
---
<SoundEffects label="Sound on click" client:load />
htmlhtml
<!-- Checkbox with data-sound-effects; script runs on DOMContentLoaded. -->
<label class="checkbox"><input type="checkbox" data-sound-effects /> Sound on click</label>
sveltesvelte
<script>
import { SoundEffects } from '$lib/rizzo';
</script>
<SoundEffects label="Sound on click" />