> For the complete documentation index, see [llms.txt](https://docs.bravostudio.app/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.bravostudio.app/bravo-tags/mobile-actions/record-audio.md).

# 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.

{% hint style="warning" %}
Make sure your phone it's not on **mute**.
{% endhint %}

## 👉 **The Tags** <a href="#the-tag" id="the-tag"></a>

| 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** <a href="#how-to-add-the-tag" id="how-to-add-the-tag"></a>

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).

{% hint style="info" %}
Place all these 3 elements underneath each other in your design file to make it look synchronized.
{% endhint %}

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 <a href="#example-files" id="example-files"></a>

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

[Bravo Sample: Sound recording](https://www.figma.com/file/1biLcnArHrjzlqLwRnXQB0/Bravo-Sample%3A-Sound-recording-\(Community\)?type=design\&node-id=0-1\&mode=design\&t=XzHzhb6cadbeJkr6-0)

## 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](https://www.figma.com/file/1biLcnArHrjzlqLwRnXQB0/Bravo-Sample%3A-Sound-recording-\(Community\)?type=design\&node-id=0-1\&mode=design\&t=XzHzhb6cadbeJkr6-0)
2. Click on the three dots icon at the upper right and choose **Replace Figma file.**

<figure><img src="/files/Dw2MnCbOJ3Y9CzSzVwf1" alt=""><figcaption></figcaption></figure>

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](https://www.xano.com/snippet/w42WUben/) 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.

<figure><img src="/files/drjRDYghTil1LcmRFalF" alt=""><figcaption></figcaption></figure>

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


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.bravostudio.app/bravo-tags/mobile-actions/record-audio.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.