A microphone recorder for Bubble native mobile apps.

Everything on screen is drawn by the plugin, so the recorder looks identical on iOS and Android, takes your brand colour instead of the operating system’s, and saves what it records into your app’s file storage with a URL you can use.

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

Quick start

  1. Ask for the microphone. In your app’s mobile settings, say why you record. iOS won’t launch an app that records without a stated reason, and Android needs RECORD_AUDIO. Nothing else works until this is in place.
  2. Drag Audio Recorder onto a mobile page. It takes the width it’s given and works out its own height.
  3. Set upload_endpoint to https://YOURAPP.bubbleapps.io/version-test/fileupload (drop /version-test once the app is live).
  4. Set two colours: record_color for the recording state, accent_color for everything else.
  5. Tick auto_upload.
  6. Create the workflow When Audio Recorder's upload complete and save Audio Recorder's file_url into a file field on your thing.

That’s a working voice recorder. Everything below is refinement.

Layouts

One field, three shapes. Identical states, events and actions in all of them.

Layout What it is Where it fits
Studio A card: caption, large counter, waveform, transport, and the review step with play, discard and upload. A screen whose whole job is recording. A voice journal, an interview, a feedback form.
Compact One row about 60 points tall: microphone, waveform, counter, send. A chat composer, a row in a repeating group, a field in a form.
Button The microphone alone, with a ring that follows the level, plus an optional counter and caption. A floating control, the corner of a form, anywhere space is tight.