Add looping background audio for effect previews

[smcga]

Motivation

• Generated and pending-effect previews were static because no song audio was playing, which prevents audio-reactive effects from animating correctly.
• Provide a lightweight preview audio source that starts at a fixed anchor and loops a short segment so previews animate consistently without starting the full demo.

Description

• Add src/effectPreviewAudio.ts implementing EffectPreviewAudioController with exact anchors and loop bounds (start 05:12.850, loop 05:39.940 → 05:50.786) and reduced preview volume (0.2).
• Wire the controller into the effect generator modal in src/main.ts so the controller starts when the modal opens, stops when it closes, and supplies live AudioFeatures to generated-effect rendering.
• Wire the same controller into the moderation preview page in src/effectReview.ts so approval previews use the same looping audio and live features.
• Add setVolume() to src/audio/audioPlayer.ts to allow quiet preview playback and add lifecycle/cleanup logic (stop/destroy on unload and when sources change).
• Update README.md to document the new preview-audio behavior and add src/effectPreviewAudio.test.ts unit tests covering loop timing behavior.

Testing

• Ran unit tests: npm test -- src/effectPreviewAudio.test.ts src/effectReview.test.ts src/style.test.ts and all tests passed (3 files, 8 tests total).
• Built production bundle with npm run build which completed successfully.

---

Codex Task

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
codexperimental	Ready	Preview, Comment	Apr 5, 2026 5:43am