Audio Recorder

A comprehensive audio recording component with real-time waveform visualization, quality settings, and built-in playback.

Installation


pnpm dlx bna-ui add audio-recorder

Usage

import { AudioRecorder } from '@/components/ui/audio-recorder';

Basic Usage

function MyComponent() {
  return (
    <AudioRecorder
      quality='high'
      showWaveform={true}
      showTimer={true}
      onRecordingComplete={(uri) => {
        console.log('Recording saved to:', uri);
      }}
    />
  );
}

With Custom Settings

<AudioRecorder
  quality='high'
  maxDuration={300} // 5 minutes
  showWaveform={true}
  showTimer={true}
  onRecordingStart={() => console.log('Recording started')}
  onRecordingStop={() => console.log('Recording stopped')}
  onRecordingComplete={(uri) => {
    // Handle the recorded audio file
    handleAudioFile(uri);
  }}
/>

Low Quality for Voice Notes

<AudioRecorder
  quality='low'
  maxDuration={60} // 1 minute limit
  showWaveform={false}
  customRecordingOptions={{
    ...RecordingPresets.LOW_QUALITY,
    bitRate: 32000, // Very low bitrate for voice
  }}
/>

Examples

Default

Voice Notes

High Quality

Minimal

Custom Styled

Callbacks Recorder

Cloud Integration Recorder

Interview Mode Recorder

API Reference

AudioRecorder

The main AudioRecorder component.

Prop	Type	Default	Description
`style`	`ViewStyle`	-	Additional styles for the recorder container.
`quality`	`'high' \| 'low'`	`'high'`	Recording quality preset.
`showWaveform`	`boolean`	`true`	Whether to show real-time waveform visualization.
`showTimer`	`boolean`	`true`	Whether to show the recording timer.
`maxDuration`	`number`	-	Maximum recording duration in seconds.
`onRecordingComplete`	`(uri: string) => void`	-	Callback fired when recording is completed and saved.
`onRecordingStart`	`() => void`	-	Callback fired when recording starts.
`onRecordingStop`	`() => void`	-	Callback fired when recording stops.
`customRecordingOptions`	`RecordingOptions`	-	Custom recording options to override presets.

Recording Quality Presets

The component includes two built-in quality presets:

High Quality

Sample Rate: 44,100 Hz
Bit Rate: 128,000 bps
Channels: 2 (Stereo)
Format: AAC
Best for: Music, professional recordings

Low Quality

Sample Rate: 22,050 Hz
Bit Rate: 64,000 bps
Channels: 1 (Mono)
Format: AAC
Best for: Voice notes, quick recordings

Custom Recording Options

type RecordingOptions = {
  sampleRate?: number;
  bitRate?: number;
  numberOfChannels?: number;
  format?: string;
  isMeteringEnabled?: boolean;
};

Features

Real-time Waveform Visualization

The recorder shows live audio levels:

30 bars representing real-time audio amplitude
Smooth animation updates every 80ms
Uses actual microphone input when available
Falls back to realistic simulated data
Color changes based on recording state

Recording Controls

Intuitive recording interface:

Record Button: Large, prominent button to start recording
Stop Button: Clear square icon to stop recording
Animated Feedback: Pulsing animation during recording
Visual Indicators: Recording status with red dot

Built-in Playback

After recording, users can:

Play/Pause: Review the recorded audio
Seek: Navigate through the recording using waveform or progress bar
Save: Confirm and save the recording
Delete: Discard the recording and start over

Timer Display

Precision timing information:

Real-time recording duration
Centisecond accuracy (MM:SS.CC format)
Maximum duration indicator when set
Monospace font for consistent display

Permissions

The AudioRecorder automatically handles microphone permissions:

Requests permission on first use
Shows helpful error messages if denied
Provides clear instructions for enabling permissions
Gracefully handles permission changes

iOS Permissions

Add to your Info.plist:

<key>NSMicrophoneUsageDescription</key>
<string>This app needs access to the microphone to record audio.</string>

Android Permissions

Add to your AndroidManifest.xml:

<uses-permission android:name="android.permission.RECORD_AUDIO" />

Platform Support

iOS

Native audio recording with hardware integration
Automatic audio session management
Background recording support
Hardware control integration

Android

Optimized audio capture
Proper lifecycle management
Background recording with proper permissions
Audio focus handling

Web

MediaRecorder API integration
Browser compatibility fallbacks
Microphone access handling

Accessibility

The AudioRecorder follows accessibility standards:

Screen reader announcements for recording state
Clear button labels and roles
Keyboard navigation support
High contrast mode support
Proper focus management

Performance Optimization

The component is optimized for:

Memory Efficiency: Proper cleanup of audio resources
Battery Life: Efficient audio processing and minimal background activity
Storage: Compressed audio formats to minimize file size
Responsiveness: Non-blocking UI during recording operations

Theming

Automatic theme integration:

Recording button uses destructive/red theme color
Background adapts to secondary theme color
Text colors follow theme hierarchy
Supports light and dark modes
Waveform colors match theme accent

Advanced Usage

Custom Recording Configuration

<AudioRecorder
  customRecordingOptions={{
    sampleRate: 48000,
    bitRate: 192000,
    numberOfChannels: 2,
    format: 'wav',
    isMeteringEnabled: true,
  }}
  onRecordingComplete={(uri) => {
    // Handle high-quality WAV file
    uploadAudioFile(uri);
  }}
/>

Integration with Cloud Storage

function CloudRecorder() {
  const handleRecordingComplete = async (uri: string) => {
    try {
      // Upload to cloud storage
      const downloadUrl = await uploadToFirebase(uri);
 
      // Save reference in database
      await saveAudioRecord({
        url: downloadUrl,
        timestamp: new Date(),
        duration: recordingDuration,
      });
 
      Alert.alert('Success', 'Recording saved to cloud!');
    } catch (error) {
      Alert.alert('Error', 'Failed to save recording');
    }
  };
 
  return (
    <AudioRecorder
      quality='high'
      maxDuration={600} // 10 minutes
      onRecordingComplete={handleRecordingComplete}
    />
  );
}

Voice Note Integration

<AudioRecorder
  quality='low'
  maxDuration={120} // 2 minutes for voice notes
  showWaveform={false} // Simplified UI
  onRecordingComplete={(uri) => {
    // Add to voice notes collection
    addVoiceNote({
      audioUri: uri,
      createdAt: new Date(),
      transcription: null, // Add speech-to-text later
    });
  }}
/>

Troubleshooting

Permission Issues

Check that microphone permissions are granted
Verify Info.plist/AndroidManifest.xml configuration
Test on physical device (simulator may have limitations)

Audio Quality Problems

Ensure device microphone is working
Check for background noise interference
Try different quality presets
Verify adequate storage space

Recording Interruptions

Handle phone calls and other audio interruptions
Implement proper audio session management
Save partial recordings when interrupted

Performance Issues

Reduce waveform update frequency on older devices
Use lower quality settings for better performance
Disable real-time waveform on low-end devices

Audio Player Audio Waveform