Examples
Default
Disabled
Without Recording
Short Max Duration
Custom Labels
Props
AudioUpload
Audio file upload with drag-and-drop and optional in-browser recording. Supports file validation, multiple files, and real-time waveform visualization during recording.readonly string[]
Accepted audio MIME types.
boolean
default:"true"
Whether to show the record audio button.
boolean
default:"false"
Whether the component is disabled.
number
default:"1"
Maximum number of files per drop.
number
default:"10 * 1024 * 1024"
Maximum file size in bytes.
number
default:"30"
Maximum recording duration in seconds.
number
default:"5"
Minimum recording duration in seconds.
((files: File[]) => void)
Called when valid files are accepted via drop or browse
((rejections: AudioFileRejection[]) => void)
Called when files are rejected (wrong type, too large, etc.)
((error: Error) => void)
Called when microphone permission is denied or unavailable
((blob: Blob, durationMs: number) => void)
Called when a recording completes and meets minimum duration
((error: Error) => void)
Called when an unexpected recording error occurs
((durationMs: number, minDurationMs: number) => void)
Called when recording is stopped but does not meet minimum duration
string
default:"Record audio"
Record button label.
string
default:"or"
Separator text between upload and record.
string
default:"Stop recording"
Stop recording button aria-label.
string
default:"Audio files only, up to 10MB each"
Upload area description text.
string
default:"Click to upload, or drag & drop"
Upload area title text.
useAudioRecorder
Hook for audio recording with MediaRecorder API. Provides recording controls, timer, and an AnalyserNode for waveform visualization. Options passed touseAudioRecorder:
number
default:"30"
Maximum recording duration in seconds.
number
default:"5"
Minimum recording duration in seconds.
((blob: Blob, durationMs: number) => void)
Called when recording completes successfully (meets minimum duration)
((error: Error) => void)
Called on any recording error
((error: Error) => void)
Called when microphone permission is denied or unavailable
((durationMs: number, minDurationMs: number) => void)
Called when recording is stopped but does not meet minimum duration
Exported types
Also exported from@fanvue/ui: AudioFileRejection, AudioUploadProps, AudioValidationError, UseAudioRecorderOptions, UseAudioRecorderReturn.
Setup: Installation · Theming