🔊 Sound System

Web Audio API integration with 20+ retro sound effects and custom hooks for enhanced user experience.

Features

  • 20+ Sound Presets - Button clicks, system alerts, game sounds, and more
  • Custom Hooks - useButtonSounds, useSystemSounds, useGameSounds, etc.
  • Web Audio API - High-quality audio synthesis and effects
  • Sound Categories - Button, Terminal, Form, Modal, System, Game, Typing, Ambient
  • Volume Control - Global and individual sound volume management
  • Performance Optimized - Efficient audio context management

Interactive Demo

Button Sounds

System Sounds

Installation

import { 
  AsciiSoundProvider, 
  useAsciiSound,
  useButtonSounds,
  useSystemSounds 
} from 'react-ascii-ui';

Usage

Basic Setup

function App() {
  return (
    <AsciiSoundProvider defaultVolume={0.5} defaultEnabled={true}>
      <YourComponents />
    </AsciiSoundProvider>
  );
}

Using Sound Hooks

function MyComponent() {
  const { playSound, setVolume } = useAsciiSound();
  const buttonSounds = useButtonSounds();
  const systemSounds = useSystemSounds();

  return (
    <button 
      onClick={() => buttonSounds.playClick()}
      onMouseEnter={() => buttonSounds.playHover()}
    >
      Click me!
    </button>
  );
}

Available Sound Categories

useButtonSounds

  • • click()
  • • hover()
  • • focus()
  • • disabled()

useSystemSounds

  • • success()
  • • error()
  • • warning()
  • • notification()

useTerminalSounds

  • • keyPress()
  • • enter()
  • • backspace()
  • • startup()

useGameSounds

  • • jump()
  • • collect()
  • • powerUp()
  • • gameOver()

useModalSounds

  • • open()
  • • close()
  • • confirm()
  • • cancel()

useTypingSounds

  • • keyTap()
  • • space()
  • • enter()
  • • delete()

Props

PropTypeDefaultDescription
defaultVolumenumber0.5Default volume level (0-1)
defaultEnabledbooleantrueWhether sounds are enabled by default
autoResumebooleantrueAuto-resume audio context on user interaction

💡 Pro Tip

The sound system automatically handles browser audio policies and will request user interaction before playing sounds. All sounds are generated using the Web Audio API for consistent, high-quality retro effects that enhance the ASCII aesthetic.