Audio Player Tutorial

Hi guys

I have been creating a audio reader from scratch, and after days of struggle, I made it work.
There was some obstacles on the way. I didn’t find any guide to do it, and I was only able to make after geting little pieces of information together from the forum.
I am no coder nor developper, and I kind of regret that I am the one to do this tutorial, but I hope it will help others, for whom, like me, it was not an obvious task.
May be there are better way, or different ways to do, I don’t know, but here is how I made it.

CapturePlayer

  1. Upload the track you want to play somewhere on the internet, accessible with an URL,wheter on your CMS, on Firebase…

  2. Buttons Play / Pause / Stop :
    -We want the button play to change into a Pause icon when pressed.
    -I also wanted a Stop icon, to reset the track, and I wanted it to appear only when the track is playing.

The Play Icon:
Here is the logic

  • Create a page variable, called for example form_icon, and in the assigned value, choose Static Icon.
  • The IF formula will filter whether the icon is currently a play icon : IS_EQUAL(pageVars.form_icon, “play”)

If that condition is filled it will set the page variable form_icon to “Pause”, and start the audio, and set the page variable visible to true (so that the stop button appears).
Use the Start/Resume audio playback, that you can find in the flow function marketplace. Do NOT use the other Play Audio flow funtion.

If that condition is not filled, that is to say, if the button is currently displayed as “Pause”, it will trigger “Pause audio playback”, set the page variable to “play” (for the icon to be displayed as “play” again), and finally set the visibility of the stop icon to false.

The Stop Icon

CaptureStop

Notes :

  • Create a page variable called Visibility (mine is Visibilite), set its value to True/False.
  • In the advanced properties of the icon, bind its visibility to the page variable we just created.
  • Set the 3 nodes in the logic, as shown in the above image.

3) The page logic

From the page mounted event (may be you can use the page focused event), I have :

  • Preload audio playback. You have to load the information about the audio before anything else. Set the URL to your track and give it a Audio Playback ID, which can be anything to identify your track. I put 001.
  • A set page variable form_icon to “Play”, to make sure that the icon is always play at the opening of the page.
  • Then, before the 2 loops that are going to update 2 page variables, I have a delay node set to 1 sec, which was actually crucial for me. Without it, all the logic behind would not trigger at the first opening of the page. Maybe the cause is the time required to preload the audio, or maybe the page mounted event (?)
  • Create a page variable that will receive the number in seconds about the playing track. I called it audio_info, but you could called it rather audio_current. And set the value in number.
    Find the node “Get audio playback info” in the market, and enter in the properties the ID you chose before.
    Then put a set page variable node bound to the page variable audio_info (or audio_current). The assigned value is a formula : INTEGER(outputs[“Get audio playback info”].playback.currentTime)
    The Integer formula makes the value a whole number.
    The Get audio playback info"].playback.currentTime allows you to refer to the output of that particular node directly from a formula (something a discovered along the way).
    The Delay node makes it loop every seconds, in order to constantly update the value.

The second logic loop aims to get the duration of the track in seconds.
Create a page variable called for example audio_duration, and set the value in numbers.

  • Get audio playback info
  • Set Page Variable with a formula : INTEGER(outputs[“Get audio playback info”].playback.duration)
  • A delay node

4) A forward and backward icons
I wanted them to move the audio track 15 seconds backwards or forwards
The backward logic : you need to get the node “Seek audio playback to” in the marketplace.
Link it to the component tap event. Put the audio ID and in the value set this formula :
SUBTRACT(pageVars.Audio_info, 15)
For the forward icon, it is the same and the formula an be ADD(pageVars.Audio_info, 15)

5) The Slider

Properties : bound the value to the variable audio_info.
Bound the maximum value to the variable audio_duration
Put 1 in the Step value

The slider Logic :

So you have 2 events. One is when you tap the bar of the slider, the other is when you move the button and slide it to the sides.
I put the same logic to cover both finger actions.

  • A “Seek audio playback to”, put the audio ID in the properties and set the value to “Components properties”, then “Selected component properties or output value”, and select the value in number.
  • A delay node set to 20ms. Why? I feel that without it the slider is choppy and bugging, as the page variable gets simultaneously update from the playing track and from the slider. That way there are no interferences and the value gets updated slightly after by the slider. I may be mistaken but I feel it make it more reactive. It works perfectly when the track had to time to fully load itself.
  • Get Audio Playback Info
  • Set Page Variable, with a formula : (outputs[“Get audio playback info”].playback.currentTime)
    (Be careful if you erase the previous node you will have to enter the formula again for it to work).

6) Displaying track’s current time and duration

The 0:01 on the left will display the current seconds of the track as it is playing. It is a paragraph which content is bound to this formula:
FLOOR(pageVars.Audio_info / 60) + “:” + LEFT_PAD(STRING(FLOOR(pageVars.Audio_info % 60)), 2, “0”)

And for the paragraph on the right, display the duration of the track, the formula is similar :
FLOOR(pageVars.Audio_duration / 60) + “:” + LEFT_PAD(STRING(FLOOR(pageVars.Audio_duration % 60)), 2, “0”)

I found it the forum by a post made by Mevi. It convert the seconds value from the get audio info node and put into the format minutes : seconds

And that’s it.

You might consider set a “delete audio playback” flow function when you leave the page to make some space.

Hope that’s useful!
:dizzy:

1 Like