Sound Effects — Vanilla

Sound Effects

Checkbox that toggles “Play sound on click”. Persists in localStorage (key soundEffects). The actual click sound is played by a global script in the layout (see Astro doc).

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

bash bash Copy code

npx rizzo-css add SoundEffects

bash bash Copy code

pnpm dlx rizzo-css add SoundEffects

bash bash Copy code

npx rizzo-css add SoundEffects

bash bash Copy code

bunx rizzo-css add SoundEffects

Live example

The toggle below is a working example (same Astro component). Enable it and click any button or link on the page.

HTML

Copy the markup below. Wire the checkbox with a script that reads/writes localStorage.soundEffects. Include the layout sound script for the click sound to play.

<label class="settings__checkbox-label">
  <input type="checkbox" class="settings__checkbox" data-sound-effects aria-label="Play sound on click" />
  <span>Play sound on click</span>
</label>
<p class="settings__help-text">Short click sound when you interact with buttons and links. Off by default.</p>

Other frameworks: Astro · Svelte · Vue · React

← Back to Vanilla components