VibeFast
Customizing Features

Audio Recording & Voice Notes

Record, store, and replay voice notes with Expo and your backend storage.

The audio recording feature (sometimes called "voice notes") lets users capture audio with waveform previews, save it to your backend, and replay or delete recordings.

vf add audio-recorder

Frontend

  • Route: apps/native/src/app/(root)/(protected)/audio-recorder/index.tsx renders the recorder screen.
  • Hooks: apps/native/src/features/audio-recorder/hooks/use-audio-recorder.ts manages permissions, start/stop/pause logic, and real-time level monitoring via expo-av.
  • Components: The folder contains the recorder UI, waveform (audio-waveform.tsx), playback list, and recording cards.
  • Services: audio-storage.ts uploads finished files, and recording-manager.ts keeps metadata in sync.

Backend

  • packages/backend/convex/recordings.ts exposes mutations: createRecordingDraft, finalizeRecording, deleteRecording, listRecordings
  • Convex storage bucket persists file URIs for playback URLs on demand
  • packages/backend/src/services/recordings.ts handles CRUD operations and file metadata
  • Supabase Storage (recordings bucket) persists audio files
  • Database table: recordings with RLS policies for user isolation

Configuration

  • Permissions: the recorder needs microphone permissions (expo-av asks for them). If you run on bare workflow, ensure android.permission.RECORD_AUDIO and the iOS microphone usage description are present.
  • Storage: no extra API key required—your backend storage is used by default.

Customization

  • Swap the waveform component or add effects by editing audio-processor.ts in features/audio-recorder/services
  • Persist additional metadata (tags, transcripts) by extending the recordings table and updating the service

Found an issue or bug in the docs?

Help me improve! If you spot any errors, typos, or have suggestions, please let me know.

Reach out on X/Twitter @zafarbuildzz

On this page

FrontendBackendConfigurationCustomization