BNA

BNA UI
24

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.

PropTypeDefaultDescription
styleViewStyle-Additional styles for the recorder container.
quality'high' | 'low''high'Recording quality preset.
showWaveformbooleantrueWhether to show real-time waveform visualization.
showTimerbooleantrueWhether to show the recording timer.
maxDurationnumber-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.
customRecordingOptionsRecordingOptions-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