Record audio

This feature allows you to create a recording audio input field, so your app users can record audio and send it to your database via API.

Make sure your phone it's not on mute.

👉 The Tags

Tag	Description
[component:input-audio]	Component input audio recording type. (used in Forms)
[action:record]	Start recording
[action:stop]	Stops recording
[action:play]	Plays recording
[action:delete]	Delete recording
[audio:recording]	Elements to be displayed while recording
[audio:currenttime]	Time elapsed while recording
[audio:totaltime]	Total time after recording finishes
[audio:filename]	Name of the recorded file if any

🏷️ How to add the tags

1. Paste the tag [action:record] into the layer name of your recording element that will trigger the action (can be an icon, shape, button, or text).

2. Paste the tag [action:stop] into the layer name of your stop recording action element (can be an icon, shape, button, or text).

3. Paste the tag [action:play] into the layer name of your play recording audio element (can be an icon, shape, button, or text).

Place all these 3 elements underneath each other in your design file to make it look synchronized.

4. Paste the tag [action:delete] into the layer name of your delete recording in your input field (can be an icon, shape, button, or text).

5. Paste the tag [audio:currenttime] into the layer name of a text layer. Time elapsed while recording. The placeholder time in your design will be replaced by a progressive counter in 00:00 format.

6. Paste the tag [audio:totaltime] into the layer name of a text layer. The placeholder time in your design will be replaced by the real total time of your finished audio recorded in 00:00 format.

7. Add the tag [audio:filename] into the layer name of a text layer that will get the name of the recording. For example the text placeholder of an input field

8. Import to Bravo & preview on Bravo Vision 🚀

💾 Example file

Duplicate the Figma file below to see how to set it up!

Bravo Sample: Sound recording

Make the sample app yours

If you want to go further and use the example file to build you own audio recording app, follow the next steps:

1. Duplicate Bravo Sample: Sound recording

2. Click on the three dots icon at the upper right and choose Replace Figma file.

3. Follow the instructions of the modal to duplicate the Figma file.

Now your app is connected to your own Figma file but the backend is still connected to the Xano APIs from our sample app. Let's replace it with your own:

1. Add this snippet to your Xano account (sign up if you haven't yet).

2. In Bravo, go to API Collections and open the Bravo Sample: Sound Recording (copy) collection.

3. Replace the URL of all the requests with your own URL. On the delete one, make sure not to change the ${id} parameter.

And that's it! The app is now fully yours. You can preview it on Bravo Vision and continue making changes. 🎉