Cyber Audio (useCyberAudio)

Stable

Zero-dependency Web Audio API sound synthesizer hook for futuristic SiberUI interfaces. Realtime oscillator acoustic cues without external MP3 asset downloads.

Installation

$pnpm add @siberui/react

Import

tsx

import { useCyberAudio } from '@siberui/react';

Interactive Cyberpunk Soundboard

Eight signature sci-fi UI acoustic cues generated in micro-seconds natively via browser AudioContext oscillators without downloading any audio files.

MASTER VOL: 35%

tsx

const { play, isMuted, toggleMute, volume, setVolume } = useCyberAudio();

// Trigger sound effects
play('click');
play('scan');
play('granted');
play('denied');

UI Kit Integration (Buttons & Haptics)

Attach acoustic cues to components like Button, KillSwitch, or BiometricScanner.

SYS // AUDIO_FEED

AUDIO-ENHANCED TERMINAL

Tactile acoustic feedback integrated directly on actions.

tsx

const { play } = useCyberAudio();

<ChamferCard signal="cyan" glow tag="SYS // AUDIO_FEED" statusDot="cyan">
  <ChamferCardHeader>
    <ChamferCardTitle>AUDIO-ENHANCED TERMINAL</ChamferCardTitle>
    <ChamferCardDescription>Tactile acoustic feedback integrated directly on actions.</ChamferCardDescription>
  </ChamferCardHeader>
  <ChamferCardContent className="flex flex-wrap gap-3">
    <Button onClick={() => play('click')}>TACTICAL CLICK</Button>
    <Button variant="primary" onClick={() => play('granted')}>CONFIRM ACTION</Button>
    <Button variant="danger" onClick={() => play('denied')}>ABORT COMMAND</Button>
  </ChamferCardContent>
</ChamferCard>

Zero-Asset Oscillator Architecture

Zero Network Overhead: No external .mp3 or .wav assets required; all tones are synthesized mathematically in client memory using Web Audio oscillators.
SSR & Autoplay Policy Safe: Safely noops on the server and lazily initializes / resumes the AudioContext upon the first user interaction.

API Reference

PROPERTIES (5)← swipe to inspect →

Property	Description	Type	Default
play	Plays the specified synthesized cyberpunk audio cue.	(type: CyberSoundType, customVolume?: number) => void	-
isMuted	Boolean flag indicating whether audio output is currently muted.	boolean	-
toggleMute	Toggles master audio mute state.	() => void	-
volume	Current master volume level (0.0 to 1.0).	number	0.3
setVolume	Sets the master volume level.	(volume: number) => void	-