Skip to content

Custom audio player with waveform visualization

jedmund requested to merge feature/custom-audio-player into main

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 /audio in 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

Merge request reports

Loading