🎙️Audio Recorder

Let users record audio directly within your app using the native audio recorder.

What is Audio Recorder?

The Audio Recorder feature gives your app access to the device's native audio recording interface, letting users record audio without leaving the app. The recording is returned as a Base64-encoded string, which you can play back or upload to your server.

Audio Recorder requests microphone permission on both iOS and Android. Users will be prompted to grant this permission the first time the feature is used.

Prerequisites

This feature is available in all plans. See all plans

Audio Recorder uses the Microphone feature, which is enabled by default for all new apps. If the Microphone has been disabled for your app, you'll need to re-enable it for Audio Recorder to work.

Implementation

Choose your integration method below: Bubble.io Plugin (No-Code), JavaScript SDK (Code), or AI Agents (for AI-powered editors like Lovable, Base44, and Replit).

Initialization

Check Plugin

Before starting, verify if the Natively plugin is already installed in your Bubble project.

Open your Bubble editor and navigate to the Plugins tab in the left sidebar.
Check Installed Plugins: Look through your list of installed plugins for "Natively iOS & Android app builder".
- If it IS installed: Check the version number. If an update is available (e.g., you see a button saying "Update"), click it to ensure you have the latest features and bug fixes.

If it is NOT installed: Click the + Add plugins button, search for "Natively", and click Install.

Check SDK

Before writing any logic, ensure the Natively SDK is correctly installed and up-to-date in your codebase.

Open your project's main HTML file (or header settings) and look for the Natively script tag inside the <head> section.
Install/Update: If missing or outdated, add the following code. You can specify the SDK version in the URL (e.g., @2.26.0).

<head>
  <script async onload="nativelyOnLoad()" src="https://cdn.jsdelivr.net/npm/natively@2.26.0/natively-frontend.min.js"></script>
</head>

To ensure you are using the most up-to-date version, check the Natively GitHub releases page for the latest version number.

Initialize the SDK

AI-powered editors like Lovable, Base44, and Replit use the JavaScript SDK to implement Natively features. Before implementing any feature, the Natively SDK must be initialized in your project.

Copy the line below and paste it into your AI agent to check and set up the Natively SDK in your project.

Check if the following Natively SDK script is present in the <head> of index.html. If missing or outdated, add it: <script async onload="nativelyOnLoad()" src="https://cdn.jsdelivr.net/npm/natively@2.26.0/natively-frontend.min.js"></script><script>function nativelyOnLoad() { window.natively.setDebug(true); console.log("✅ Natively SDK loaded successfully."); }</script> For reference: https://docs.buildnatively.com/guides/integration/how-to-get-started https://github.com/buildnatively/js-sdk/releases

Setup Logic

[Element] Natively - Audio Recorder

Events:

Recorder Result Updated - called after the recording finishes.
Recorder Cancelled - called when the user closes the recorder without recording.
File Uploaded - called after the file is successfully uploaded to S3 (the file URL is available in the element's state).
File Size over limit - triggered when the recorded file exceeds the File Size Limit parameter.

States:

Recorder Result (Base64) - Base64 string representation of the recorded audio, for custom uploading.
Recorder Result (Content Type) - audio/m4a (iOS) or audio/wav (Android).
Uploaded File URL - Amazon S3 file URL (only populated if upload is enabled).
File Size - size of the latest recording result, in KB.

Actions:

Show Recorder
- Upload File - checkbox; uploads the recording to Amazon S3.
- File Name - used if Upload File is checked.
- File Size Limit - in KB; prevents uploading files larger than this limit to Bubble's Amazon S3.
- Max Duration - maximum recording duration in seconds. Leave at 0 for unlimited duration.

// ============================================================================
// NATIVELY AUDIO RECORDER - DOCUMENTATION & EXAMPLES
// ============================================================================

const audioRecorder = new NativelyAudioRecorder();

// ============================================================================
// ALL AVAILABLE METHODS
// ============================================================================
// audioRecorder.showRecorder(max_duration, callback)
//   - Opens the native audio recorder UI and returns the result once the user finishes or cancels.
//   - max_duration: number — maximum recording duration in seconds. Pass 0 (or omit) for unlimited duration.
//   - resp.base64: string — Base64-encoded recording
//   - resp.content_type: string — "audio/m4a" (iOS) or "audio/wav" (Android)
//   - resp.size: number — file size in KB
//   - resp.status: string — "SUCCESS" or "CANCELLED"

// --- Audio Recorder. Show Recorder Example. Start ---

const max_duration = 0; // 0 = unlimited duration

const audio_recorder_callback = function (resp) {
  if (resp.status === "CANCELLED") {
    console.log("User closed the recorder without recording.");
    return;
  }

  console.log(resp.base64);        // Base64-encoded recording
  console.log(resp.content_type);  // "audio/m4a" for iOS or "audio/wav" for Android
  console.log(resp.size);          // file size in KB
};

audioRecorder.showRecorder(max_duration, audio_recorder_callback);

// --- Audio Recorder. Show Recorder Example. End ---

AI-powered editors like Lovable, Base44, and Replit use the JavaScript SDK to implement Natively features.

Copy the line below and paste it into your AI agent.

[Your feature description] using the Natively Audio Recorder SDK: const audioRecorder = new NativelyAudioRecorder(); audioRecorder.showRecorder(max_duration, callback) opens the native recorder UI. max_duration: number — maximum recording duration in seconds, pass 0 for unlimited. Returns resp.base64 (Base64-encoded recording), resp.content_type ("audio/m4a" for iOS or "audio/wav" for Android), resp.size (file size in KB), and resp.status ("SUCCESS" or "CANCELLED" if the user closed the recorder without recording). For reference: https://docs.buildnatively.com/guides/integration/audio-recorder

Replace the placeholder at the beginning with a description of what you want to build - for example: "Add a voice-memo recorder to my journal app, limited to 60 seconds, that uploads the recording to my backend".

How to use

Check `resp.status` before processing the recording

A cancelled recording still triggers the callback - always confirm resp.status === "SUCCESS" before uploading or storing resp.base64.

Set a `max_duration` for predictable file sizes

Long recordings produce large Base64 payloads. Cap recording length if your backend has upload size limits - for example, 60 seconds for a voice memo, or a few minutes for a longer note.

Convert content type before playback if needed

iOS returns audio/m4a and Android returns audio/wav. If you play recordings back across platforms, confirm your player or backend handles both formats.

Troubleshooting

Audio Recorder doesn't do anything in a web browser

This is a native feature and won't function in Safari, Chrome, or any browser preview - test it in a real build installed on a device.

Recording fails, or the user is never prompted for microphone access

Check whether the Microphone feature is enabled in the Natively Dashboard. If the user previously denied microphone access, direct them to Open App Settings to re-enable it.

PreviousAudio Player NextBottom Bar

Last updated 12 days ago

What is Audio Recorder?

Prerequisites

Implementation

Initialization

Setup Logic

[Element] Natively - Audio Recorder

Events:

States:

Actions:

How to use

Check resp.status before processing the recording

Set a max_duration for predictable file sizes

Convert content type before playback if needed

Troubleshooting

Check `resp.status` before processing the recording

Set a `max_duration` for predictable file sizes