Audio Widget (Expo / React Native)

A lightweight Expo/React Native audio waveform widget that records microphone input and renders a real-time waveform. It works on iOS/Android (via Expo AV metering) and Web (via Web Audio AnalyserNode).

Features

• Real-time waveform bars driven by normalized volume data (0..1)
• Simple, customizable AudioWaveform component (bar width/gap, colors, min/max height)
• useAudioRecorder hook that handles permissions and platform-specific volume capture

Demo

Run the app and tap the button to start/stop recording. The waveform updates while recording.

Getting started

Prerequisites

• Node.js + npm
• Expo CLI (optional; npx expo also works)

Install

npm install

Run

npm run start

Then choose a platform:

• iOS: press i
• Android: press a
• Web: press w

Usage

App.tsx shows the intended integration:

import AudioWaveform from './AudioWaveform';
import { useAudioRecorder } from './useAudioRecorder';

const { isRecording, volumeData, startRecording, stopRecording, error } = useAudioRecorder();

<AudioWaveform
  data={volumeData}
  barWidth={4}
  barGap={6}
  minHeight={12}
  maxHeight={58}
  barColor="#FFFFFF"
  backgroundColor="#000000"
/>;

Project structure

• AudioWaveform.tsx: waveform UI component (animated bars)
• useAudioRecorder.ts: recording + real-time volume capture (native metering / web analyser)
• App.tsx: example screen wiring everything together
• dist/: web build output (committed in this repo)

Notes

• Microphone permission is required. On Web, your browser will prompt; on mobile, Expo will request permission at runtime.
• On Web we compute volume from time-domain audio using RMS, then apply a mild gain + non-linear mapping to make the waveform more visible.
• On some devices metering may be unavailable; the hook falls back to a small baseline value to avoid a “frozen” UI.

License

MIT