# 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="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2F2PaIJHYqzxDYggmk0IWY%2Fspaces_-MXpqEanvOhm8vMtIH8i_uploads_gXujYZtLJd4cyiuqCAzL_Group%2023.webp?alt=media&#x26;token=2b7a7c23-630c-4994-a98f-8f17f299d113" 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="https://1444025092-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MXpqEanvOhm8vMtIH8i%2Fuploads%2FnlCMj5orrWNynKdxtXbT%2FScreenshot%202023-06-30%20at%2012.01.23.png?alt=media&#x26;token=9710fd5f-c4fe-4a19-b0fa-63c0ca0829e8" 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. 🎉