Media@knitui/media

AudioRecorder

A hybrid, cross-platform audio recorder. On web it drives the browser MediaRecorder (+ Web Audio metering); on React Native it drives the expo-audio recorder. Both share one controller contract and the same kit-built chrome.

WebiOSAndroid5 style slots10 own props5 examples

Stories Source Tests Open in Storybook

import { AudioRecorder } from "@knitui/media";

Playground

Loading playground…

size

controls

true

Playground

<AudioRecorder
  size="md"
  controls
  options={RECORDING_PRESETS.HIGH_QUALITY}
/>

Examples

Default

Loading example…

DefaultSource Storybook

With Meter

Metering enabled — the input-level bar tracks the microphone in real time.

Loading example…

With MeterSource Storybook

Sizes

Loading example…

SizesSource Storybook

Custom Layout

Compose a custom bar from the exported parts.

Loading example…

Custom LayoutSource Storybook

Styles

Per-slot style overrides.

Loading example…

StylesSource Storybook

Props

Prop	Type	Default	Description
`controls`	`ReactNode`	`true`	The control chrome. `true` (default) renders the built-in control bar; `false` renders no chrome; a node renders custom chrome inside the context.
`getController`	`((controller: AudioRecorderController) => void) \| undefined`	—	Receives the controller once ready.
`label`	`string \| undefined`	—	Accessible label for the recorder region. Default `"Audio recorder"`.
`maxWidth`	`number \| Animated.AnimatedNode \| GetThemeValueForKey<"maxWidth"> \| null \| undefined`	—	Frame max width.
`meteringEnabled`	`boolean \| undefined`	—	Enable input-level metering. Overrides `options.isMeteringEnabled`.
`onRecordingChange`	`((isRecording: boolean) => void) \| undefined`	—	Fired whenever recording starts/stops.
`onStop`	`((uri: string \| null) => void) \| undefined`	—	Fired when a recording is finalized, with its file URI.
`options`	`RecordingOptions \| undefined`	—	Full recording options. Defaults to the `HIGH_QUALITY` preset.
`size` system	`"xxs" \| "xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxl" \| undefined` xs · sm · md · lg · xl	`md`	Control sizing scale. Default `'md'`.
`styles` system	`SlotStyles<AudioRecorderStyles> \| undefined`	—	Per-slot style overrides.
`testID`	`string \| undefined`	—
`width`	`number \| GetThemeValueForKey<"width"> \| Animated.AnimatedNode \| null \| undefined`	—	Frame width.

Style slots

Every part of AudioRecorder can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`controlBar`	`styles={{ controlBar: { … } }}`
`duration`	`styles={{ duration: { … } }}`
`meterFill`	`styles={{ meterFill: { … } }}`
`meterTrack`	`styles={{ meterTrack: { … } }}`
`root`	`styles={{ root: { … } }}`