1. Home
  2. Tutorials
  3. Creating your App UX
  4. Audio Playback with User Controls

Audio Playback with User Controls

ios audio playback
You can download an audio file for playback in your app, optionally providing user controls to play, stop, and pause the audio. You can also use a Slider Element to display the audio track playback position, continuously updating as the audio plays.

  1. Create a Page Variable of type AVAudioPlayer – you will use this to control playback. audio player var
  2. Download the audio file into your app by adding the Download Remote File Action to an Event such as a page loading. Enter the URL of the remote audio file, for example by entering it as a Static Input String value. download remote file
    ⓘ Note

    Once your audio file is downloaded, use the Delete Local File Action to remove it.

    • In the nested Download Succeeded Event, add a Create an Audio Session Action, selecting the local URL for the downloaded file from the Event Data. create audio
    • Still in the Download Succeeded Event, add a Set Value Action to save the audio player returned from the Create an Audio Session Action to the Page Variable you created, via the Action Data. save audio player
    • If you want to display the track playback position in a Slider Element, you can use another Set Value Action here to set the maximum value to the audio track duration. show duration
  3. To provide playback controls, add Button Elements to play, pause, and stop.
    • Add a Play an Audio Session Action to the Tapped Event of the play Button, selecting the Page Variable and a frequency, if you want to update the display as the track plays. play audio
      • To update display while the track pays, add an Action to the nested Timer Ticked Event, for example Set Value setting the Value property on the Slider to the audio player Current Time. slider playback

      You might also want to add Set Value Actions to enable/disable your Buttons as appropriate when each Button is tapped.

    • Use the Stop an Audio Session and Pause an Audio Session Actions on the Tapped Events of your pause and stop Buttons. If you’re using a Slider, set the position back to zero when the stop Button is tapped.
ⓘ Note

You will not be able to hear the audio track when it plays in the web simulator, but you will see the display update if you added Actions to the Timer Ticked Event. To hear the audio track, install the app on a physical device.

The URL of the audio file you play can come from any input source in your app, including response data from an API. You can also play remote videos using the Play a Video Action, and can present videos hosted on certain platforms such as YouTube using Web Views.

android audio
You can play a remote audio file in your app, optionally providing user controls to play, stop, and pause playback. You can also use a Slider Element to display the audio track playback position, continuously updating as the audio plays.

  1. Create a Page Variable of type MediaPlayer – you will use this to control playback. media player var
  2. Initialize the audio in an Event such as page create – first use the Create Uri from String Action to build a URI from the audio file URL, for example by entering it as a Static Input String value. create uri
  3. In the same Event, add a Create an Audio Session Action, selecting the URI for the audio file from the Action Data returned from the previous Action. audio from uri
  4. In the nested Audio Session Created Event, add a Set Value Action to save the audio player to the Page Variable you created, via the Event Data. save media player
  5. If you want to display the track playback position in a Slider Element, you can use another Set Value Action here to set the maximum value to the audio track duration. audio duration
  6. To provide playback controls, add Button Elements to play, pause, and stop.
    • Add a Play an Audio Session Action to the Tapped Event of the play Button, selecting the Page Variable. play audio android
    • To update display while the track plays, add a Start Timer Action, selecting the Duration property of the media player variable as the Interval, and an integer value of 1 to update every second. audio timer
      • In the nested Tick Event, use a Set Value Action to set the Slider Value to the media player variable Current Time property. timer playback
    • Create a Page Variable of type Timer and use a Set Value in the play Button Tapped Event to save it – this will allow you to stop the timer when the other Buttons are tapped. save timer

    You might also want to add Set Value Actions to enable/disable your Buttons as appropriate when each Button is tapped.

  7. Use the Stop an Audio Session, Pause an Audio Session, and Stop Timer Actions on the Tapped Events of your pause and stop Buttons. If you’re using a Slider, set the position back to zero when the stop Button is tapped.
ⓘ Note

You will not be able to hear the audio track when it plays in the web simulator, but you will see the display update if you added the timer functionality. To hear the audio track, install the app on a physical device.

The URL of the audio file you play can come from any input source in your app, including response data from an API. You can also play remote videos using the Play a Video Action, and can present videos hosted on certain platforms such as YouTube using Web Views.

Was this article helpful to you? Yes No

How can we help?