Split Layout Music Player Hero Block for React

The waveform reads HEIGHTS, a list of 36 percentages; replace it with peaks from your own audio analysis, keeping the values fixed so the server and the browser draw the same bars. PROGRESS and ELAPSED set the playhead: the bars before it fill in the foreground colour, and the Progress bar takes the same value. The queue reads TRACKS, whose first entry is the playing track; its duration is also the total time under the bar.

Take aria-hidden and inert off the panel, then make each part real: an audio element for playback, our Button with size="icon" and an aria-label ("Previous track", "Pause", "Next track") for each transport icon, and a Slider instead of the Progress bar so the playhead can be dragged. Fill HEIGHTS from the Web Audio API's analyser if you want the waveform to follow the sound.

The headline is the block's one h1, the checklist is a list with its ticks hidden, and the pill and both calls to action are links named by their text. The player is an illustration: the whole panel is aria-hidden and inert, so screen readers skip it and nothing in it takes focus. Once you make it a real player, label every control.

The two halves stack below the lg breakpoint, with the copy first and the player under it, so the Shine Button is on the first screen. The player card is at most max-w-sm and fills narrower screens; the waveform's 36 bars fit in it down to 320px. The two buttons wrap onto two lines when the row runs out of room. The headline steps down from text-5xl to text-4xl.

Theme tokens only, in greyscale. The played bars, the playhead, the cover and the pause button are foreground, the unplayed bars are muted-foreground at low opacity, and the card is our Card on a muted panel. So the player follows your theme in light and dark, and your accent colour stays on the one call to action.

Use the music player when your product is audio first: streaming, podcasts, voice tools or audio editing. The waveform and queue say so before a word is read. Use a video player hero when what your product makes is something to watch.