Voice Notes
Record and send voice messages directly from the chat composer with waveform visualization.
Opengram supports recording and sending voice notes directly within the chat interface. Voice notes are treated as media attachments and are accessible to agents through the file API.
Recording
Users record voice notes using the microphone button in the composer. Tapping the button requests microphone access (if not already granted) and starts recording. While recording, the composer switches to a recording UI that shows:
- A pulsing red indicator to signal that recording is active
- A waveform visualization displaying audio levels in real time
- A timer showing the elapsed recording duration
- A cancel button (trash icon) to discard the recording
- A send button to stop recording and send the voice note
If microphone permission is denied, a prompt is shown asking the user to check their browser settings.
Playback
Voice notes appear as inline audio players in the message bubble with a play/pause button, a waveform visualization, and a duration label. Users can tap anywhere on the waveform to scrub to a specific position. The waveform bars change color to indicate playback progress.
Upload and Storage
Recorded audio is uploaded as a standard media attachment using the file upload API (/api/v1/chats/{chatId}/media). A message is then created referencing the uploaded media. If the message creation fails, the uploaded media is automatically cleaned up. While the upload is in progress, a "Sending voice note..." indicator is shown in the composer.
Supported Formats
The recording format depends on the browser's MediaRecorder implementation. Common formats include:
| Browser | Format |
|---|---|
| Chrome / Edge | audio/webm; codecs=opus |
| Safari | audio/mp4 |
| Firefox | audio/ogg; codecs=opus |
All formats are stored as-is and played back using the browser's native <audio> element, so playback works across browsers that support these codecs.
Browser Compatibility
Voice notes require the MediaRecorder API and getUserMedia. These are supported in all modern browsers. If the browser does not support these APIs, a friendly error message is shown instead of the recording UI.