Custom audio player with waveform visualization
Created by: jedmund
Summary
- Custom audio player component with waveform visualization, replacing the default
<audio>element - Waveform data is computed once and cached in the editor node attributes so it doesn't recompute on every render
- Audio players are hydrated in post, project, and universe views via
hydrateAudioPlayers - Media toolbar now floats via Tippy.js so it isn't clipped by overflow containers (inline composer, scroll areas)
Test plan
-
Insert audio via /audioin the inline composer — toolbar should float above the composer boundary -
Insert audio in the full editor — waveform renders, play/pause works, progress scrubbing works -
Hover over any media (image, audio, video) — toolbar appears at top-right, buttons work -
Check published posts/projects with audio — player hydrates correctly with waveform -
Media at edge of scroll area — toolbar flips placement instead of clipping