Audio Recorder - Quick Start Guide
Getting Started in 3 Steps

Step 1: Add the Component
1. Drag the Audio Recorder element onto your page
2. Set the Upload Endpoint URL property to your Bubble file upload endpoint
3. Customize the button appearance if desired (size, colors, text)

IMPORTANT - Upload Endpoint URL Format:
For testing: https://your-app-name.bubbleapps.io/version-test/fileupload
For production: https://your-app-name.bubbleapps.io/fileupload

DO NOT use Bubble's app version logic in workflows - mobile creates dynamic version names like version_test.12321421 and version_live.13535. Instead use:
- Text contains "test" for development
- Text contains "live" for production

Make sure in your Bubble app General Settings that access to /fileupload is not blocked.

Step 2: Basic Recording
- Users tap the button to start recording
- Tap again to stop recording
- The button automatically changes color and text during recording

Step 3: Upload Audio
- Add an action to trigger Upload Recording after recording finishes
- The uploaded file URL will be available in the Uploaded File URL state
- Use the Upload Complete event to trigger your next workflow

Essential Properties

Upload Endpoint URL - Where to upload recordings - Example: https://your-app-name.bubbleapps.io/version-test/fileupload
Button Height - Size of the record button - Example: 120 pixels
Button Text - Text when ready to record - Example: Record
Recording Button Text - Text when recording - Example: Stop

Key States to Use

Is Recording - Show recording indicator, disable other buttons
Upload In Progress - Show upload spinner, disable actions
Uploaded File URL - Get the final audio file URL for your app

Common Workflows

Auto-Upload After Recording
Event: Recording Finished
Action: Upload Recording

Show Recording Status
Text Element: Recording...
Conditional: Only when Is Recording is true

Disable Button During Upload
Button: Not clickable when Upload In Progress is true

Advanced Features

- Auto-Stop Timer: Set recording time limits
- Custom Filename: Specify audio file names
- Private Uploads: Control file privacy settings
- File Association: Link recordings to specific records

Need More Details?

For complete documentation including all properties, advanced workflows, troubleshooting, and technical details, see:
Full Audio Recorder Documentation (Audio_Recorder_Documentation.md)

Quick Troubleshooting

Recording won't start?
- Check microphone permissions in device settings

Upload failing?
- Verify your Upload Endpoint URL is correct (use /version-test/fileupload for testing, /fileupload for production)
- Check that /fileupload is not blocked in your Bubble app General Settings
- Ensure your server accepts POST requests

Button not showing?
- Check Show Record Button property is enabled

Ready to record!


Docs link: https://docs.nocodeventure.com/react-native-plugins/audio-recorder-bubble-mobile

Demo link: https://ncv-react-audio-recorder.bubbleapps.io/version-test/api/1.1/mobile/preview?debug_mode=true&preview_view=app

Editor: https://bubble.io/page?id=ncv-react-audio-recorder&tab=Design&name=app&type=page&elements=bTMyh