MARKETPLACE
PLUGINS
BEAUTIFUL AUDIO RECORDER MOBILE
Beautiful Audio Recorder Mobile logo

Beautiful Audio Recorder Mobile

Published September 2026
   •    Updated this month

Plugin details

A clean, fully customizable audio recorder for Bubble Native Mobile apps. Record voice notes, interviews or feedback with the same interface on iOS and Android, instead of whatever the system decides to hand you.
Customize it to match your app, drive it from 22 states and 15 actions, and show people the sound as it goes in with a waveform read from the microphone itself.

Simple to set up, easy to customize, and built to feel like a natural part of your app.

────────────────────────────────
TRY IT
────────────────────────────────

Demo: https://plugins-testing-46093.bubbleapps.io/version-test/api/1.1/mobile/preview?debug_mode=true&preview_view=audio%20recorder

Editor: https://bubble.io/page?id=plugins-testing-46093&test_plugin=1789055107614x140318506623434750_current&tab=Design&name=audio+recorder&type=page&elements=bTLVq

────────────────────────────────
CUSTOMIZATION
────────────────────────────────

  • Two colours, and everything follows. One for recording, one for everything else. The waveform, the button, the ring, the upload control and the captions all derive from those two, so a brand change is two fields rather than twenty.
  • Both themes were designed. Dark and light are separate palettes, not one inverted from the other, and Auto follows the phone. Inverting a dark palette gives you grey text on white every time.
  • Contrast is worked out, not left to you. Icons and text pick their own colour from whatever sits behind them, so no combination of colours you choose can make the recorder unreadable.
  • Three layouts from one dropdown. A full card for a screen about recording, a single row for a chat composer, or the microphone on its own. Same states, same events, same actions in all three.
  • The bar count is a ceiling, not a target. A narrow recorder draws fewer bars rather than thinner ones. Below about two points wide a waveform stops looking like a waveform and starts looking like noise.
  • Every caption is a field. Idle, recording, paused, ready to send, upload, uploaded — the recorder speaks your app's language without anyone touching code.
  • The halo breathes, it doesn't blink. A slow pulse around the button while recording. A blinking element inside a form reads as an error; a breathing one reads as alive. One checkbox turns it off.
  • Tabular figures. The counter never shifts as it counts up, because every digit takes the same width.
  • Solid, soft or outline for the record button, plus its size, the corner radius, the padding and the waveform height. The recorder sizes its own height unless you tell it otherwise.

────────────────────────────────
THE WAVEFORM
────────────────────────────────

Most recorder UIs animate something shaped like a waveform. This one reads the microphone's level meter twelve times a second and draws what it finds.

  • It moves because someone is talking. Speak louder and the bars grow. Stop and they fall. Cover the microphone and you will see it.
  • The newest sample is on the right and the trail fades to the left, so it reads as time passing rather than as decoration that happens to wiggle.
  • What you review is what you recorded. Those same captured levels become the review waveform when recording stops, with the played part in your accent colour and the rest faded.
  • Tap anywhere on it to jump there. The playhead follows, and so does the counter.
  • Long takes keep their beginning. Past a certain length the history is halved by averaging rather than by dropping the oldest samples, so an hour-long recording still has a start in its waveform.
  • Four styles. Bars, a single line meter, a five-dot pulse for tight spaces, or none at all.

────────────────────────────────
THE FILE ENDS UP IN YOUR DATABASE
────────────────────────────────

This is the part that usually goes wrong, so it got the most attention.

  • One event hands you the URL. Record, run Upload To Bubble, and the upload complete event gives you file url. Save that into a file field and you are done. Tick auto upload and it happens on its own the moment recording stops.
  • 1.8 seconds, measured. A 432 KB recording, from the action firing to the URL published, against a live Bubble app. One millisecond of that is the plugin. The rest is the network.
  • Multipart, not base64. Base64 makes a file a third bigger and has to be built in JavaScript first. Sending the recording's own bytes means React Native streams them straight off disk, and the audio never enters JavaScript at all.
  • Real progress, not three stages. Upload progress is a percentage counted from the bytes actually going out, so a progress bar bound to it tells the truth.
  • The same take is never uploaded twice, however many times the action fires. Extra taps do not quietly fill your storage with copies.
  • Private files go up private, so your privacy rules decide who gets to hear them.
  • An upload that stalls says so. It fails after a timeout you set, with a sentence explaining what it was doing, instead of leaving a spinner turning until someone closes the app.

────────────────────────────────
THE CONTROLS
────────────────────────────────

  • One button with three faces. A microphone when idle, a stop square while recording, a play triangle once there is something to listen to. A recorder with four same-sized buttons makes people read before every tap.
  • A ring that follows the level. It grows and brightens with the voice going in, driven natively so it moves at sixty frames a second rather than whenever the screen happens to redraw.
  • Pause and resume write into one file, not two. An interview survives a phone call.
  • Listen before it goes anywhere. Stopping shows the take with its waveform and its length. Play it, scrub it, throw it away and start again — nothing has reached your database yet. Turn the review step off and the recorder goes straight back to idle while the states still carry everything.
  • A minimum duration throws away mis-taps before they cost you anything, and a maximum stops recording on its own and tells you it did.
  • A countdown inside the button, up to ten seconds, for anyone who needs a moment before they speak.
  • Download means download. In the browser preview it is a real download, the way a link is. On Android it opens the system folder picker. On iOS it opens the share sheet, because no app can write into a folder there and Save to Files lives inside it. Pass it a URL from your database and it fetches that recording first.

────────────────────────────────
FORMATS AND RECORDING
────────────────────────────────

  • m4a, mp4, aac and wav, each resolved against what the platform can genuinely write. Android cannot write uncompressed audio and iOS will not write a bare AAC stream, so those fall back to m4a rather than failing on one operating system and leaving you to work out why. A state tells you what actually came out.
  • Three quality settings. 22 kHz mono, 44 kHz mono, 44 kHz stereo. The lowest is about half the size and plenty for a voice, and it is the dial that moves upload times.
  • The silent switch does not silence it. Recording and playback keep working with an iPhone on mute.
  • Playback comes out of the speaker. On iOS, playing a take straight after recording it normally routes to the earpiece and sounds broken. The recording session is closed first, so it does not.
  • Microphone sensitivity scales what the waveform shows without touching what gets recorded, for a quiet room or a loud one.
  • Ask for the microphone early. A dedicated action requests permission without recording, so the system prompt can happen on the screen before the one that matters.

────────────────────────────────
FULL WORKFLOW CONTROL
────────────────────────────────

  • 22 states — is recording, is paused, is counting down, has recording, is playing, is uploading, is downloading, duration, duration text, level, recording path, file name, file size, file size text, file format, file url, upload status, upload progress, microphone permission, has permission, error, engine.
  • 16 events — recording started, recording stopped, recording paused, recording resumed, recording discarded, recording too short, max duration reached, upload started, upload complete, upload failed, download complete, download failed, permission granted, permission denied, playback finished, error happened.
  • 15 actions — Start, Stop, Toggle Recording, Pause, Resume, Cancel, Discard, Upload To Bubble, Play, Pause Playback, Toggle Playback, Seek Playback, Share Recording, Save To Device, Request Microphone Permission.
  • Hide every built-in button and drive the whole thing from your own. The states carry everything a condition needs, and the actions cover everything the buttons did.
  • A debug panel behind one checkbox shows the engine, the resolved format, the microphone permission, how long the last upload took and which route it went by, and which action arrived last. "It doesn't work" becomes something you can screenshot.

────────────────────────────────

Questions or a feature you need? Get in touch — info@technocode.agency

$30

One time  •  Or  $3/mo

stars   •   0 ratings
0 installs  
This plugin does not collect or track your personal data.

Platform

Native mobile

Contributor details

Technocode logo
Technocode
Joined 2020   •   18 Plugins
View contributor profile

Instructions

1. Allow the microphone Do this before anything else. In your app's mobile settings, say why you record — something like "This app records audio when you tap the microphone button". iOS will not launch an app that records without a stated reason, and Android needs the RECORD_AUDIO permission.

2. Drop it on the page
Drag Audio Recorder onto a mobile page. It takes the full width you give it and works out its own height, so there is nothing to size. Pick a layout: Studio is a card with a large counter and a review step, Compact a single row for a chat composer, Button the microphone on its own.

3. Make it yours
Set record_color for the recording state and accent_color to your brand colour — between them they paint the waveform, the button, the level ring, the playback controls and the upload button. Add corner_radius and pick a theme (Auto follows the phone). There is one design and it is already tuned, so that is the whole styling step.

4. Save recordings to your database
Fill in upload_endpoint with your app's file upload URL:

[color=#0205d3][url=https://YOURAPP.bubbleapps.io/version-test/fileupload]https://YOURAPP.bubbleapps.io/version-test/fileupload[/url][/color]

Keep /version-test while testing, drop it once the app is live. Then make the field that holds the audio a file field, tick auto_upload, and create the workflow When Audio Recorder's upload complete to save file_url into it.

Save file_url, not recording_path — the path is a file inside the phone and disappears with the app.

5. Wire it to your workflows
The actions drive it from anywhere: Start, Stop, Toggle Recording, Pause, Resume, Cancel, Discard, Upload To Bubble, Play, Pause Playback, Toggle Playback, Seek Playback, Share Recording, Save To Device, Request Microphone Permission. Its states report back: is recording, duration, file url, file name, upload status, upload progress, microphone permission and more.

Tips
  • Use your own buttons: set show_upload_button, show_delete_button and show_pause_button to no, and drive everything from your workflows. The states carry whatever your conditions need.
  • Uploads feel slow? Drop audio_quality to Low. It is about half the size and nobody can hear the difference on a voice.
  • Keep mis-taps out of your database: set min_duration to 1. Anything shorter is discarded instead of uploaded.
  • Ask for the microphone early: run Request Microphone Permission on the previous page, so the system prompt does not interrupt the recording flow.
  • Your own review screen? Turn review_before_upload off — the recorder returns to idle at once and the states still carry the take.
  • Letting people keep a recording: point a button at Save To Device. Leave its url empty for the current take, or pass a file_url from your database for an older one.
  • One recorder per page. The actions talk to the last one placed, so keep it to one.
  • If something does not respond, tick debug_overlay: it shows which action arrived, how long the last upload took and which route it went by, and whether the microphone was granted.

Testing
The browser preview runs React Native for Web, where there is no native microphone — it falls back to the browser's own recorder, which is fine for checking the design and the whole flow. Test recording itself in BubbleGo or a build, and try denying the microphone once on purpose to see what your users would get.

📄 Full documentation: https://wide-finch-c12.notion.site/Audio-Recorder-documentation-3d861f4cca3a806ca1aef5410cc9686b?pvs=73

Types

This plugin can be found under the following types:
Element   •   Event   •   Action

Categories

This plugin can be found under the following categories:
Productivity   •   Visual Elements

Resources

Support contact
Documentation
Tutorial

Rating and reviews

No reviews yet

This plugin has not received any reviews.
Bubble logo
Product
AI
Mobile
Design
Data
Logic
Collaboration
Security
Status
Release notes
Bubble for
Founders
Developers
Agencies
Enterprise
Discover
How Bubble works
Examples
Bubble is Global
Pricing
Learn
Academy
Technical guides
Blog
How to build
Coaching
Resources
Connect to AI
Marketplace
Templates
Plugins
Experts
Bootcamps
Certification
Partnerships
Affiliates
Figma to Bubble
Community
Bubble community
Forum
Newsletter
Podcast
Ideaboard
Early access
Company
About
Careers
Brand guidelines
Support
Contact us
Legal
Terms
Privacy
©  2026, Bubble Group, Inc. All rights reserved.
Bubble
Pricing
Enterprise
Contact sales