Record

The Record component provides an audio recording interface with real-time waveform visualization, allowing users to record, pause, resume, and save audio clips.

Props

The Record component accepts the following props:

• name - Input name attribute for the audio file (required)
• variant - Visual style: solid or soft (default: solid)
• color - Color theme: default, surface, primary, secondary, error, or muted (default: error)
• url - Optional upload URL. If provided, the audio will be uploaded via POST request
• headers - Optional headers to include in the upload request (e.g., authentication)
• onRecordingComplete - Callback function called when recording is complete. Receives the audio Blob and object URL
• class - Additional CSS classes to apply

Features

• Real-time Waveform - Visual feedback during recording with animated waveform
• Pause/Resume - Pause and resume recording without losing progress
• Timer - Shows recording duration in MM:SS format
• Dual Mode - Can either upload to a server or save to a hidden file input
• WebM Format - Recordings are saved in WebM format

Example Usage

Basic usage with local file input:

With upload to server:

Browser Permissions

This component requires microphone access. The browser will prompt the user for permission on first use. Make sure your site is served over HTTPS for microphone access to work.