How to Add Voice Note Sharing to Your App (Copy-Paste Prompts Included)

The browser MediaRecorder API is built into every modern browser — no library needed to record. Call navigator.mediaDevices.getUserMedia({ audio: true }) to get a mic stream, pass it to new MediaRecorder(stream), and listen to ondataavailable for audio chunks. A library like RecordRTC is only needed if you want consistent cross-browser codec output (it normalizes WebM vs MP4 differences).

Connect an AudioContext and AnalyserNode to the getUserMedia stream before passing it to MediaRecorder. Call analyser.getByteTimeDomainData(dataArray) every 60ms in a requestAnimationFrame loop and draw the amplitude values to a Canvas element. WaveSurfer.js wraps this pattern but adds SSR complexity in Next.js — you can also implement the Canvas drawing loop directly if you want to avoid the dynamic import requirement.

After the audio file is uploaded to Supabase Storage, invoke a Supabase Edge Function that sends the file URL to Deepgram's Nova-2 API or OpenAI Whisper. For notes under 60 seconds, synchronous Deepgram calls work fine. For notes approaching 2 minutes, use Deepgram's async endpoint: submit the job and receive a webhook when the transcript is ready, then write it to voice_notes.transcript.

getUserMedia requires a secure context — HTTPS or localhost. Any http:// deployment blocks it silently. Additionally, Lovable's preview pane and V0's sandbox both run inside cross-origin iframes that don't grant microphone permissions regardless of HTTPS status. Always test on the actual deployed HTTPS URL, not inside any tool's preview.

Safari's MediaRecorder produces MP4/AAC instead of WebM. Check at runtime with MediaRecorder.isTypeSupported('audio/webm') before constructing the recorder. If it returns false (Safari), use 'audio/mp4'. Store the detected MIME type in your voice_notes row so the player can inform WaveSurfer of the correct format. Deepgram accepts both formats, so transcription is unaffected.

If you're using a raw HTML audio element, set audioElement.playbackRate to 0.5, 1, 1.5, or 2. If you're using WaveSurfer.js, call wavesurfer.setPlaybackRate(rate). Render four buttons and update state on click. Speed controls are supported in all modern browsers with no additional library.

Deepgram Nova-2 costs $0.0043/minute of audio (approx). At 1,000 users each sending 10 one-minute voice notes per month, that is 10,000 minutes at roughly $43/month. OpenAI Whisper costs $0.006/minute (approx) — about 40% more. Both offer batch processing discounts at high volume. Caching transcripts in your database means each note is only transcribed once regardless of how many times it is played.

Yes. Create a Supabase scheduled function (pg_cron) that runs nightly: SELECT id, storage_path FROM voice_notes WHERE created_at < NOW() - INTERVAL '7 days'. For each row, call the Supabase Storage API to delete the file, then delete the row. You can also set a Supabase Storage lifecycle rule at the bucket level for automatic object expiry without custom code.