Skip to main content
Audio files can be visualized in a design using a waveform element. We touch on some waveform actions in this article, but you should read the waveform support article for more information. We’ll get into how to control audio files with some common use cases below, but first, here are the two ways to upload an audio file:
  1. Upload the mp3 file from the Assets tab of the Library.
  2. Drag and drop an mp3 file onto the canvas. This will add it as a waveform element and add it to the Library.

​
Play and Pause

To play and/or pause an audio file, you’ll use a Set Audio action. You can do one of two things:
  1. Use a trigger with a Set Audio action with Playback set to Toggle. This will toggle between playing and pausing the selected audio file each time you fire the trigger (e.x. tap the button the interaction is placed on).
  2. Use a Toggle Tap prefab, and on the first tap, add a Set Audio action with Playback set to Play. On the second tap, use a Set Audio action, and set the Playback to Pause. This will also toggle between playing and pausing the selected audio file. You might use this method if you’d like fire other actions, like toggling the play and pause SF Symbols.

​
Sync a Waveform with an Audio File

If your audio file is also the input for a waveform element, you might want to play and pause the waveform in tandem with the audio. In this situation, use a Set Real-Time Waveform. Similar to playing the audio, you can use the Playback option Toggle on a Tap trigger, or Playback options Start and Stop together on a toggle trigger.

​
Fast Forward or Rewind

To fast forward to rewind an audio file, you’ll also use a Set Audio action with Playback set to Seek. Set the Type to Seek By and you’ll see two new properties: Direction and Time. Use these properties to choose whether you’re rewinding or fast forwarding and by how much, respectively. For example, setting the Direction to Backwards and the Time to 15s will rewind the audio file by 15 seconds. Setting the Direction to Forwards and the Time to 30s will skip the audio file ahead by 30 seconds.

​
Scrubbing forward and back

You can also fast forward to rewind to a certain percent of the audio file. You’ll use a Set Audio action with Playback set to Seek and Type set to Seek To Percent. You can do this with a native slider! Open the Expression Editor for the Percent and use “Slider.value” to scrub the audio file.

​
Track the Audio’s Progress

In most Podcast or Music Player apps, there is a progress bar tracking the current time.

​
Label the Current Time

Use a Set Text action, and set the Value in the Expression Editor. You’ll use the object property expression “AudioFile.currentTime()” to get the current time as the audio file plays.

​
Label the Total Length

To label the total length of the video, add a Set Text action the same way you did the Current Time. This time, use the expression “AudioFile.totalLength()”.

​
Restart and Skip Songs

To start an audio file over, you can use a Set Audio action with Playback set to Seek. Set the Type to Seek to Start, which will restart the audio file from 0s. To skip to the end of a song, use the same action but change the Type to Seek to End. You might do this to “skip” a song if you were creating a flow with multiple songs in a row. As part of that interaction, you’ll also want to play the next song (Play and Pause above), change the audio information using the new song title and audio length, and set the waveform to the new audio file. To change the audio information, you can use variables within Set Text actions. Eventually, you’ll be able to pull all this data in from an external database. To change the audio input for the waveform, you’ll use a Set Waveform action. Target the waveform element and select the next audio file.

​
Speed up or slow down

If you want to control the speed of the audio file, you can use a Set Audio action with Playback set to Rate. Using 1x will play the audio file normally. A lower value like 0.25x will slow the audio file down to 25% speed. A higher value like 3x will speed the audio file up to 300% speed.

​
Control the Volume

Your phone’s volume buttons can always control the volume, but if you want to control the volume of a specific audio file through your prototype’s UI, you can use the Set Audio Volume action. The Volume property can accept a value between 0 and 1, with 0 being silent and 1 being full volume. You can choose a specific value between those values, or you can dynamically change the volume’s value.

​
Control the Volume with a Slider

If you use a native slider to change the volume, you’ll want to use the Expression Editor to set the Set Audio Volume’s Volume value. Using the Expression “Slider.value” will dynamically change the volume based on the slider’s value.

​
Mute the Volume

To mute the volume for your audio file, you can use a Set Audio Mute action. When the Mute switch is on and the action fires, the audio will be muted. When the switch is off and the action fires, the action unmutes the audio.

​
Repeat a sound effect

To repeat an audio file, you can use the Set Audio action with Playback set to Repeat. In the Repeat property, choose the number of repetitions.

​
Balance Audio between Earbuds

Have you ever listened to a song that plays more in one earbud than the other? You can create this interaction in Play using a Set Audio action with Playback set to Pan.