Audio player with progress bar

Learn how to create your own audio player with a progress bar. Since the Audio component is a non-graphical component, it does not include an audio player by default. This gives you the freedom to create a 100% custom audio player.

This video only includes the Play and Pause actions but you can also add other actions: Speed up, Rewind, Start over, Stop playback

[TRANSCRIPT]

Hello,

In this video, let’s have a look at how to create a custom audio player. This audio player is composed of a Play/Pause button and a progress bar that shows the progress of the song.

First let’s add the audio file. You can drag this file directly from the Media in your screen or you can add an Audio component in which you’ll add an audio file: in any case, the Audio component is a non graphic component available from the list of objects. It has properties, triggering events and actions.

Now, let’s create this Play / Pause button. Insert a Play button: you can use an image, an SVG or create your button in PandaSuite Studio using shapes.

Select this button and using the top menu, add it to a Multi-state component. Rename this component “Play/Pause button” for clarity.

Click on it in the list of object to edit its content. The first state of this component will be PLAY.

Create a new linked state for PAUSE in which you add the Pause button. Remove the Play button that has been automatically added from the initial state.

To start playing the audio, exit and select the Multi-state that contains the button. Add an action, choose the Single tap / Click event > Interact with a component > Audio and the Play/Pause action.

Depending on if the audio is playing or not, let’s switch the button state: display the Pause button when the audio is playing, and the Play button when it pauses. For that, select the Audio component and first choose the Starting Play event. Choose Interact with a component > Multi-state > Select state > Pause. Do the same with the Pause Playing event and the action Interact with a component > Multi-state > Select state > Play.

Congrats! The Play/Pause button is now working.

Now let’s create the progress bar. We’re gonna a synchronize a scrolling area component with the audio.

Insert a static bar on which the progress bar will be placed. This is 300 pixels wide.

Above it insert a Scrolling Area component of the same width. In the properties, activate the horizontal scrolling, hide the scrollbar and choose as size of its content the double of this width, thus 600 pixels. Insert a progress bar with a width of 300 pixels, as well as a cursor. To get the desired effect, this progress bar must be at the left end of the zone. Scrolling must start at the opposite and from right to left to progressively appear. Let’s position the scrolling area there, create a marker and make it the default marker.

The scrollbar is ready to be synchronized with the audio file. Let’s add a Synchronization component. In the Properties, choose the components you want to synchronize together: the Audio file and the Scrolling Area.

Check the properties that are synchronized by default. As the scrollbar is scrolling from right to left, click on Reverse button.

That’s it! The scrollbar is showing the progress of the song! Hope you liked it, this was a great example combining Multi-state and synchronization.