🏷️

Action: Play Audio

What does it do?

Plays an MP3 track in your app.

image
💡

Make sure your phone it's not on mute

The Tags you need:

  1. [action:play:URL] or [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
    • 💡

      Sample Tag to try: [action:play:https://www.bensound.com/bensound-music/bensound-summer.mp3]

    • Which layer can I put it on: any layer except top-level app page
  2. [action:pause]
    • Pauses the MP3 audio track. This element will be invisible until user clicks the play element.
    • Which layer can I put it on: any layer except top-level app page
  3. [audio:currenttime]
    • Displays the progressive playing time of the audio track.
    • Which layer can I put it on: a text layer
  4. [audio:totaltime]
    • Displays the total time of the audio track from the URL.
    • Which layer can I put it on: a text layer

Optional Tags

  1. [audio:background]
    • 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.
    • Which layer can I put it on: the same layer as the [action:play] tag.
  2. [audio:loading]
    • 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.
    • Which layer can I put it on: any layer except top-level app page

How do I set it up in the design tool?

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

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

    Place the pause element underneath the play element in your design file to make it look synchronized.

    image

  5. 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.
  6. image

  7. 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.
  8. image

  9. [OPTIONAL] Add the tag [audio:background] to the same layer where you added [action:play:URL].
  10. image

  11. [OPTIONAL] Paste the tag [audio:loading] into the layer name of your loading element.
  12. 💡

    Pro tip: use the LottieFiles Figma plugin to easily add a Lottie as your loading animation.

    image

  13. Import to Bravo & preview on Bravo Vision 🚀

💾 Resources

👉 Sample Figma file

👉 Sample Adobe XD file