Sound Engineer A/B Master Profile Block for React

Edit MIX_BARS (forty-eight numbers from 0 to 100, one per slice of the song) and the two Take objects: each has its loudness in tenths of a LUFS (-172 is -17.2), its true peak in tenths of a dBTP and its dynamic range. The master's slices are worked out from the mix's with a gain and a ceiling (GAIN, CEILING); in your app give each take its own measured slices instead. The differences in the sentence, the ruler and the counts are worked out from the readouts.

No. It is forty-eight spans in CSS, drawn from typed numbers, and nothing plays or is decoded: the caption says so. Slices that reach 70 or more draw in full weight and the others in a lighter one, so the flat top of the master shows where it is held at the ceiling. In your app draw the real waveform from your audio's peaks, keep the segmented control and the readouts, and keep the text equivalent.

Integrated loudness is how loud the whole track is on average (LUFS, and a difference between two of them is in LU), true peak is the highest level a converted signal can reach (dBTP), and dynamic range (DR) is how much the loud and quiet parts differ. The sentence subtracts the mix's loudness from the master's, and the master's range from the mix's, so it can never disagree with the readouts above it. The figures are examples, not a standard to meet.

The waveform is a picture and is hidden from screen readers; a caption beside it says what it shows ("Waveform of the master, 48 slices from a quiet intro to a quiet outro. 17 of them sit near the top.") and the readouts say the numbers. The segmented control is named by its heading, the status line is a polite live region present from the start, and the waveform and the ruler keep left-to-right order in a right-to-left layout because they are a time axis. The slices change height with a short transition that stops under reduced motion.

The segmented control sits under the heading and fills the width, the waveform is a little shorter, and the three readouts stay in one row with smaller figures. The sentence and the credits follow. The panel keeps the same height whichever take is shown.

Everything. Switching takes only changes the picture, the readouts and the status line; there is no audio, no file and no request, and the artists, credits and figures are invented sample data. The page's own text says so, and so does the caption under the waveform.