feat(audio): Web Audio Synthesizer with Value-to-Pitch Frequency Mapping

[Sanan507]

Overview

Upgrade the audio system into a polyphonic Web Audio API sound synthesizer that maps array values to musical pitches (e.g. pentatonic scale 220Hz - 880Hz). When elements are compared or swapped, the visualizer generates real-time audio tones, creating classic algorithm soundscapes.

Implementation Details & File Reference

• Audio Engine: Update frontend/src/context/AudioContext.tsx using native AudioContext and OscillatorNode.
  • Function playToneForValue(value: number, minValue: number, maxValue: number, type: 'compare' | 'swap').
  • Map normalized value (val - min) / (max - min) to a pentatonic scale frequency range.
• Playback Integration: Wire sound calls inside playback step hooks in frontend/src/hooks/usePlayback.ts.
• User Settings: Add a volume control slider and pitch toggle in frontend/src/pages/SettingsPage.tsx.

Definition of Done

• Toggling audio plays real-time harmonic tones during sorting and searching races.
• Swaps produce higher velocity tones than comparisons.
• Volume slider in Settings controls gain level smoothly without distortion.

Skill Level

Hard — requires Web Audio API synthesis, oscillator management, and non-blocking playback integration.