# Play audio
## 👉 **The Tag**
This set of tags allows to play an MP3 track in your app.
{% tabs %}
{% tab title="Play audio" %}
```
[action:play:URL] or [action:play]
Use [action:play] if you are getting the URL by API.
```
Plays the MP3 audio track. When this element is visible, the **pause** element will be invisible, and vice versa.
Replace `URL` with an actual URL ending in **.mp3**
**📍 Where to add the tag:** Any layer, except top-level and container.
{% endtab %}
{% tab title="Pause audio" %}
[action:pause]
Pauses the MP3 audio track. This element will be invisible until user clicks the **play** element.
**📍 Where to add the tag:** Any layer, except top-level and container.
{% endtab %}
{% tab title="Progress bar" %}
[audio:progress:#FFFFFF]
You can change the color by setting the HEX color in the tag.
Displays a progress bar to move forward or rewind the audio track. The appearance will be the native component for each device.
**📍 Where to add the tag:** A Rectangle layer.
[See Sample Figma file](https://www.figma.com/community/file/984482687373329643?fuid=735161339401487360)
{% endtab %}
{% tab title="Play audio in background" %}
```
[audio:background]
```
**Optional tag.** If this tag is included, audio files will continue playing when the app is open in the background. In order to stop the audio, users will have to return to the page where the audio was started and tap pause.
If this tag is **not** included, audio files will only play when its page is visible and will pause otherwise.\
\
Requesting a new build for your published app is required after adding this tag.
**📍 Where to add the tag:** Any layer, except top-level and container.
{% endtab %}
{% tab title="Loading indicator" %}
[audio:loading]
**Optional tag.** The element that will be displayed from the moment the **play** element is clicked until the audio file is ready to be played, along with the **pause** element.
**📍 Where to add the tag:** Any layer, except top-level and container.
{% endtab %}
{% tab title="Current played time" %}
```
[audio:currenttime]
```
Displays the progressive playing time & the total time of the audio track.
**📍 Where to add the tag:** A text layer.
{% endtab %}
{% tab title="Total time" %}
```
[audio:totaltime]
```
Displays the total time of the audio track.
**📍 Where to add the tag:** A text layer.
{% endtab %}
{% endtabs %}
{% hint style="warning" %}
Make sure your phone it's not on **mute.**
{% endhint %}
## 🏷️ **How to add the tag**
1\. **Paste** the tag `[action:play:URL]` into the layer name of your **play** element (can be an icon, shape, button, or text).
2\. **Paste** the tag `[action:pause]` into the layer name of your **pause** element (can be an icon, shape, button, or text).
{% hint style="info" %}
Place the **pause** element underneath the **play** element in your design file to make it look synchronized.
{% endhint %}
3\. **Paste** the tag `[audio:currenttime]` into the layer name of a text layer. The placeholder time in your design will be replaced by a progressive counter in 00:00 format.
4\. **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 the audio in 00:00 format.
5\. \[OPTIONAL] **Add** the tag `[audio:background]` to the same layer where you added `[action:play:URL]`.
6\. \[OPTIONAL] **Paste** the tag `[audio:loading]` into the layer name of your **loading** element.
{% hint style="info" %}
**Pro tip:** use the [Lottie component](https://bravo-studio.gitbook.io/docs/bravo-tags/component-lottie) to easily add a Lottie animation in your intro.
{% endhint %}
7\. Import to Bravo & preview on Bravo Vision 🚀
## 💾 Example files
Duplicate the files below to see how to set it up!
{% embed url="" %}
Figma Sample
{% endembed %}
{% file src="" %}
Audio.xd
{% endfile %}
[^1]: Change to your custom color