Audio player design
A polished, accessible audio player with waveform visualization and playlist management.
Core layout
The player uses a three-column grid on desktop, collapsing to a single stack on mobile. The left column holds album art and metadata, the center displays the waveform and transport controls, and the right column contains the playlist queue.
Waveform rendering
Audio data is decoded via the Web Audio API into a Float32Array of amplitude samples. A canvas element draws vertical bars scaled to the container height. Played portions render in violet #8B5CF6, unplayed portions in a muted gray, and the current position is marked with a pink #F472B6 indicator line.
Transport controls
Play/pause, skip forward, skip backward, and a seekable progress bar. All controls are keyboard-accessible with visible focus rings in the brand violet. A volume slider with mute toggle sits to the right of the transport row.
Playlist panel
The playlist displays track titles, durations, and a drag handle for reordering. The currently playing track is highlighted with a violet left border and pink text. Tracks load asynchronously with a shimmer skeleton placeholder while fetching.
State management
Player state — current track index, playback position, volume, and queue order — lives in a React context provider. The audio element reference is stored in a ref and exposed via the context for direct imperative control from any child component.
Tip: Preload the next track in the queue by creating a second hidden audio element. Swap it into the visible player when the current track ends for gapless playback.