Sound Effects Component — Astro

Sound Effects Component

The SoundEffects component is a checkbox that toggles “Play sound on click”. When enabled, a short click sound plays on primary (left) clicks only on links, buttons, tabs, dropdowns, and other interactive elements (with a short throttle so one interaction doesn’t play twice). Off by default for accessibility. The preference is stored in localStorage (key soundEffects). The layout script loads /assets/sfx/click.mp3 then /assets/sfx/click.wav (add your file(s) to public/assets/sfx/, or to src/assets/sfx/ and run pnpm build:css); if neither is found, a built-in Web Audio tone is used.

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

Usage

Use the component standalone or inside Settings. The component script initializes every [data-sound-effects] checkbox (load/save localStorage.soundEffects).

---
import SoundEffects from '../components/astro/SoundEffects.astro';
---

<SoundEffects />
<!-- Optional: hide help text -->
<SoundEffects showHelp={false} />

<!-- Checkbox with data-sound-effects; script runs on DOMContentLoaded. -->
<!-- Include the layout sound script so clicks play the sound when soundEffects === 'true'. -->

<script>
  import { SoundEffects } from '$lib/rizzo';
</script>

<SoundEffects />

<script setup>
import SoundEffects from '@/components/rizzo/SoundEffects.vue';
</script>

<template>
  <SoundEffects />
</template>

import { SoundEffects } from './components/react';

<SoundEffects />

Features

• Checkbox “Play sound on click” with optional help text.
• Persists in localStorage (key soundEffects: true or false). Default: off (no key or false).
• The click sound is played by a global script in the layout that listens for primary clicks on buttons, links, tabs, options, and other interactive elements (throttled). The script loads /assets/sfx/click.mp3 then /assets/sfx/click.wav (add to public/assets/sfx/); if neither is found, a Web Audio tone is used. Include that script (see Layout.astro) for the sound to play when the user has enabled it.

Other frameworks: Vanilla · Svelte · Vue · React