soundz

Sound Effects Wrapper for React

Built with TypeScript & Powered by Howler.js

✅ Lightweight
✅ Customizable
✅ Animated
✅ Fully-Accessible
✅ Developer-Friendly
✅ Batteries-Included

📖 Documentation

Soundz Docs →

🚀 Quick Usage Example

import { Soundz, SoundzProvider } from 'soundz';

<SoundzProvider theme="pastel" tooltipPosition="bottom">
  <Soundz providedFX="pop" keyboardKey="Enter">
    🔊 Play Pop
  </Soundz>
</SoundzProvider>

🎛 Available Props

• providedFX: [string] — Name of predefined sound (default: boop)
• customFX: [string] — URL to MP3 file
• hoverFX: [string] — Sound to play on hover (Use SoundzProvider for this feature)
• noClickSound: [boolean] — Disable sound on click (ex: Hover Sound Only)
• fetchCooldown: [number] — Delay before re-fetching same sound (ms)
• clickCooldown: [number] — Debounce clicking sound effect (ms)
• keyboardKey: [string] — Trigger sound with key press
• enableHaptics: [boolean] — Vibrate on click if supported
• showTooltip: [boolean] — Show text when sound plays
• tooltipText: [string] — Text shown in tooltip
• tooltipPosition: top | bottom | left | right
• tooltipAnimation: fade | scale | slide
• animationSpeed: [string] — Pulse animation speed
• icon: [object] — Select animated icon (speaker, waves, audioWaves, audioLines, trophy) or omit prop for no icon
• theme: auto | light | dark | neon | pastel | mono
• customTheme: [object] - Declare your own theme and merge/override the defaults (ex: customTheme={{tooltipBg: '#ff1493', tooltipColor: '#ffffff', pulseColor: '#ff1493'}})
• className: [string] — CSS class for wrapper
• style: [CSSProperties] — Inline styles for wrapper
• layout: [string] — CSS layout (e.g. "inline-flex")
• wrap: [string] — Custom CSS class or style block
• loading: [( ) => ReactNode] — Optional loading state component
• apiBaseUrl: [string] — Override the base API URL for sound fetches

💯 Available Icons

{ name: (REQUIRED), size: (OPTIONAL - default=20), strokeWidth: (OPTIONAL - default=2.5) }

• Speaker → icon={{name: "speaker", size: 20, strokeWidth: 2.5}}
• Waves → icon={{name: "waves", size: 20, strokeWidth: 2.5}}
• AudioWaves → icon={{name: "audioWaves", size: 20, strokeWidth: 2.5}}
• AudioLines → icon={{name: "audioLines", size: 20, strokeWidth: 2.5}}
• Trophy → icon={{name: "trophy", size: 20, strokeWidth: 2.5}}

🎧 Provided Sounds

• Boop → providedFX={"boop"}
• Disable → providedFX={"disable"}
• Drums → providedFX={"drums"}
• DunDunDun → providedFX={"dunDunDun"}
• Enable → providedFX={"enable"}
• Error → providedFX={"error"}
• Firework → providedFX={"firework"}
• Glug → providedFX={"glug"}
• GlugA → providedFX={"glugA"}
• GlugB → providedFX={"glugB"}
• Guitar → providedFX={"guitar"}
• Meow → providedFX={"meow"}
• Plunger → providedFX={"plunger"}
• PlungerQuick → providedFX={"plungerQuick"}
• Pop → providedFX={"pop"}
• PopDouble → providedFX={"popDouble"}
• PopHigh → providedFX={"popHigh"}
• PopLow → providedFX={"popLow"}
• Pops → providedFX={"pops"}
• SwitchOff → providedFX={"switchOff"}
• SwitchOn → providedFX={"switchOn"}
• Tap → providedFX={"tap"}
• Tik → providedFX={"tik"}
• Tok → providedFX={"tok"}
• Victory → providedFX={"victory"}
• WaterDrip → providedFX={"waterDrip"}

License

MIT © 2025 Kaycee Ingram

Cheers,