P5-02: Audio playback sync

[socialawy]

Summary

Synchronize audio playback with the sequence preview timeline using the Web Audio API.

Acceptance Criteria

• Web Audio API integration: Load audio file into an AudioBuffer, play through AudioBufferSourceNode
• Play/pause sync: Audio starts/stops in sync with preview playback controls
• Seek: Jumping to a specific time in the preview also seeks the audio to the matching position
• Audio offset: If audio.offset is set in the spec, audio playback begins at that point in the sequence timeline (e.g., offset=2 means audio starts 2 seconds into the sequence)
• Volume control: audio.volume from the spec controls GainNode value in real-time
• Cleanup: AudioContext and all buffers are properly released when:
  • Project is closed
  • User switches to a different project
  • Component unmounts

Tests (Vitest)

• Sync accuracy: play, pause, resume — audio position matches timeline position
• Seek: jump to 5s → audio is at 5s (minus offset if applicable)
• Offset handling: offset=3 means audio is silent for first 3 seconds, then plays
• Cleanup: after project close, no lingering AudioContext or buffer references
• Volume: changing volume in spec updates GainNode value

Architecture Notes

• src/engine/ — Audio playback engine (AudioContext management, buffer loading, sync logic)
• src/store/ — Playback state (isPlaying, currentTime) already exists; audio sync hooks into it
• src/composer/ — Volume slider wired to store
• Keep audio engine decoupled from renderer — communicate through Zustand store

Dependencies

• P5-01: Audio file slot #14 (P5-01: Audio file slot — schema + file loading)

Priority

Phase 5, Item 02 — Jules priority queue position: 4