Use web-audio apis in libgooey-react

[bhurlow]

@claude though it appears technically possible, its becoming difficult to embed my wasm library into the audio worklet of the libgooey-react js code, due to the requirement of hosting a public worklet file. To advance other projects, I want to replace the existing libgooey-react code with direct usage of the WebAudio apis. To start, add a basic kick sound following the lib/src/instruments/kick.rs which responds to button in the debug-ui. Make a PR to review

[bhurlow]

Claude finished @bhurlow's task —— View job • claude/issue-84-20250721-1312 • Create PR ➔

---

✅ Task Complete: WebAudio Kick Drum Implementation

I've successfully implemented a WebAudio-based kick drum synthesizer to replace the WASM dependency as requested.

Todo List

• Read repository structure and CLAUDE.md guidelines
• Study existing kick drum implementation in lib/src/instruments/kick.rs
• Examine current debug-ui structure to understand where to add button
• Implement WebAudio-based kick synthesis
• Add button in debug-ui to trigger kick sound
• Test the implementation
• Commit and push changes
• Create PR for review

Implementation Details

Created debug-ui/app/webAudioKick.tsx:

• Multi-oscillator synthesis replicating the Rust implementation
• Sub oscillator: Sine wave at base frequency (60Hz) with pitch envelope
• Punch oscillator: Triangle wave at 2.5x frequency for mid-range impact
• Click oscillator: Filtered noise through 8kHz high-pass filter for transient
• FM synthesis: Carrier/modulator setup for beater sound effect
• Individual ADSR envelopes for each component with proper timing
• Configurable parameters matching the Rust KickConfig structure

Updated debug-ui/app/react/page.tsx:

• Added WebAudio kick component as new section in the grid layout
• Positioned alongside existing WASM implementation for easy comparison
• Updated grid to accommodate 3 columns on large screens
• Renamed WASM section to "WASM Drums" for clarity

Technical Implementation

The WebAudio version faithfully reproduces the complex synthesis approach from lib/src/instruments/kick.rs:1-267:

• Synchronized timing across all oscillators
• Exponential frequency ramping for pitch drop effect
• Proper gain staging and filtering
• AudioContext management with user gesture handling

Changes Committed

• Branch: claude/issue-84-20250721-1312
• Commit: 2e3cd08 - "Add WebAudio-based kick drum implementation"
• Files: 2 files changed, 226 insertions(+), 2 deletions(-)

---