Audio UI
Installation
pnpm dlx shadcn@latest add @audio-ui/sound-readouts
Usage
import {
SoundChannels,
SoundLevel,
SoundRate,
SoundReadout,
SoundReadouts,
} from "@/components/audio-ui/sound-readouts";
<SoundReadouts>
<SoundLevel levels={{ loudness: -19.5, peak: -2.1, rms: -19.4 }} />
<SoundReadout>-2.1 dBFS</SoundReadout>
<SoundRate onResample={resample} sampleRate={48_000} />
<SoundChannels channels={2} onMix={mix} />
</SoundReadouts>;The parts show; they convert nothing. SoundRate calls onResample with the rate picked, from 8 kHz to 384 kHz, and SoundChannels calls onMix with mono, stereo, 5.1 or 7.1: convert the sound your own way, or with resampleChannels and mixChannels from @audio-ui/engine/files. SoundLevel keeps the measure it shows (Peak, RMS or Loudness) itself, or take it over with measure and onMeasureChange.
The audio editor puts these parts under its waveform and replaces the sound with the converted one, as a step of undo.
API reference
SoundReadouts
The row. A <div>, with its own props.
SoundLevel
Props · 4
What each measure reads, in dB: the peak and the RMS in dBFS, the loudness in LUFS.
The measure shown at first.
The measure shown, when you hold it yourself.
Called with the measure picked.
SoundRate
Props · 2
The sound's rate, in Hz.
Called with the rate picked.
SoundChannels
Props · 2
How many channels the sound has.
Called with the layout picked.
SoundReadout
A plain value in the row, such as the peak beside a level that is a menu. A <span>.