Audio System
Relevant source files
The following files were used as context for generating this wiki page:
The Audio System in pcstyledev provides a reactive, synthesized sound environment designed to enhance the cyberpunk aesthetic of the platform. It utilizes the Web Audio API to generate real-time sound effects (blips) and provides visual feedback through frequency analysis. The system is centralized in the application root and distributed via React context to various interactive components like the Terminal and Project Cards.
Sources: App.tsx:20, utils/audio.ts, components/ui/AudioVisualizer.tsx
Core Architecture
The system is built around a Synth class (or object created by createSynth) that manages the Web Audio AudioContext, an AnalyserNode for visualization, and a GainNode for volume control.
Audio Provider and Initialization
The audio engine is initialized at the top level of the application using useMemo to ensure a single instance of the synthesizer exists throughout the application lifecycle.
The synthesizer instance and the user's sound preference (soundEnabled) are passed down through the Layout component and React Router's Outlet context.
Sources: App.tsx:132, App.tsx:180-189, pages/Terminal.tsx:112
The Synthesizer Interface
The system relies on a standardized Synth type that exposes methods for audio playback and data analysis.
| Feature | Description | File Reference |
|---|---|---|
playBlip | Generates a short synthesized sound with configurable frequency and waveform. | App.tsx:185 |
analyser | A Web Audio AnalyserNode used to extract real-time frequency data. | components/ui/AudioVisualizer.tsx:17 |
createSynth | Factory function to initialize the AudioContext and signal chain. | utils/audio.ts |
Sources: App.tsx:6, components/ui/AudioVisualizer.tsx:2
Audio Interaction Logic
Audio triggers are integrated into the user interface to provide haptic-like feedback for navigational and system events.
Interaction Triggers
Sound effects are primarily triggered by three types of events:
- Navigation: Clicking on navigation links plays a blip at 600Hz.
- Input Feedback: Typing in the Terminal or interacting with UI elements.
- System Events: Special sequences like the Konami Code trigger higher frequency sawtooth waves (1200Hz).
Sources: App.tsx:67-70, App.tsx:149, App.tsx:185
Terminal Integration
In the Terminal component, audio is used to simulate hardware feedback during command execution and data entry.
- Form Submission: Triggers an 800Hz square wave blip with a 0.05s duration.
- System Notifications: Audio is often paired with
addNotificationcalls to alert the user of state changes.
Sources: pages/Terminal.tsx:327, App.tsx:185
Visual Analysis
The AudioVisualizer component provides a real-time graphical representation of the audio signal.
Frequency Visualization Flow
The visualizer uses a requestAnimationFrame loop to poll the AnalyserNode for byte frequency data.
Rendering Specifications
- Theme Consistency: Bars are rendered with a magenta fill
rgba(255, 0, 255, alpha), where transparency scales with frequency intensity. - Performance Optimization: The visualizer respects a "Low Performance Mode" via the
usePerformanceModehook, disabling animations if the system is under stress. - Dimensions: The visualizer is fixed to 80x32 pixels, styled as a 20x8 unit in the UI.
Sources: components/ui/AudioVisualizer.tsx:24-44, App.tsx:87
State and Persistence
The user's preference for audio is persisted to ensure a consistent experience across sessions.
- Storage: The
soundEnabledboolean is stored inlocalStorageunder the keypcstyle_sound. - Global Toggle: A dedicated button in the header allows users to toggle
soundEnabled, which also triggers a "SYSTEM_NOTIFICATION" (e.g.,AUDIO_LIVEorMUTE_ACTIVE).
Sources: App.tsx:88-96, App.tsx:162-170
Summary
The Audio System serves as a core sensory component of the pcstyledev platform. By combining a centralized Web Audio synthesizer with reactive UI components and a real-time frequency visualizer, the system creates an immersive, "living" OS environment. The implementation prioritizes user preference through persistence and ensures system stability by utilizing React's useMemo and performance-aware rendering hooks.
Sources: App.tsx, components/ui/AudioVisualizer.tsx