How to make a simple online music player with slider and shows timing?

Designer Part:
(I have tried to make this guide simple so that new members of Kodular can also understand each block, after this guide you will able to make your own music player with your own User interface)

The designer part contains 3 important layouts.

  1. Title Layout - It is a horizontal arrangement contains a back icon.
  2. Main Layout - It is a vertical arrangement that has all functions required in the music player.
  3. List Layout - It is a vertical arrangement that has a list view.There will be a list of music. You can choose any music and play.

In the main layout:
In the main layout of this project, It contains a music cover image, Artist Name, Music Title, Current Time, Total Duration of music, Forward 10 seconds icon, Forward, and rewinds icon, play/pause, and at last replay 10 seconds icon. It contains all the necessary facilities a music player should have.
Hence Music Player Design looks like that:

Total blocks of this music player:
(I have explained all the blocks )

Explanation of Blocks:
1)

Here I created 4 different variables and stored lists of Cover Images, Music Titles, Artists Name, and Links of the music. You can create these lists from spreadsheets too.

2)Showing Music Titles in ListView.

blocks (7)

3)Music Plays When Element is clicked from ListView.

In these blocks, The name of the Artists, Music Title, and the Cover image is set. As well as a clock is fired at an interval of 1000ms.You can set it very low if you are facing problems in showing current timing.
I have used Taifun Player to play music online. You can use Exoplayer too.

4) Implementation of Current Time And Total Duration Of Music.
These are the most important blocks. Here if the taifun player is playing then, I made the visibility of the loading progress bar false and the pause/play icon will be visible.

Here, to implement slider thumb position and timing of playing music, Slider Max Position Should Be Equal To Player Duration and Current timing and total duration can be shown using this trick.

5)Implementation of Play/Pause Icon.
I have created a variable where the value of seeking position will be saved after pausing of music. Then when the play icon is clicked, it will be played from the same position.
image
It is very simple. If music is playing and you clicked the icon then music should be paused as well play/pause icon should be changed to play and vice-versa.

6)Implementation of Slider In Music Player
These blocks are very simple. If the slider thumb position is changed by touching to up/down then simply it will call the taifun player to play music from the position.
image
Bonus Trick: You can do like when the slider is touched up or down then after a second, call player to play from the thumb position by using clock component to run it very smoothly.BTW this also works fine for me.

7)Implementing Skip Previous Feature
When skip_previous is clicked then it will check whether it is in the first position or not. If it is in the first position then it will call Notifier to show an alert that it cant be skipped else it just changes the selection index by -1 and plays the music of previous in the list and changes the artist’s name, music cover, and title.

8)Implementing Skip Next Feature
When skip_next is clicked then it will check whether it is in the last position or not. If it is in the last position then it will call Notifier to show an alert that it cant be skipped else it just changes the selection index by +1 and plays the music coming next in the list and changes the artist’s name, music cover, and title.

9)Forward And Replay 10 Seconds
To forward 10 seconds, you have to tell the player to start playing music from Instant Position + 6000 But 10s can only be forwarded if 10s is left. For example, if only a second is left to finish the music,10 seconds cant be forwarded so if-then block is used.
image
As well as to replay 10 seconds, you have to tell the player to play music from Instant Position-6000 but it can only be possible if the music is ahead of 10s so the if-then block is used.

For this guide, I have used Taifun Player by @Taifun.
Any types of feedbacks are welcomed. If I think I can change some blocks to make the player more smooth and working or I have done any mistakes in blocks then please reply to this post.

AIA DOWNLOAD:music_player (2).aia (413.2 KB)
APK DOWNLOAD:music_player (1).apk (5.8 MB)

Thanks to @RudraFromIndia for helping me.
Sneha//

29 Likes

Nice Guide :smiling_face_with_three_hearts: :smiling_face_with_three_hearts: :smiling_face_with_three_hearts:

1 Like

Nice Guide @oseamiya

1 Like

also thanks @Taifun for his wonderful extension

3 Likes

Legends see that a person who joined a week before makes a brilliant guide to help the Beginners.
:smiling_face_with_three_hearts: :smiling_face_with_three_hearts: :smiling_face_with_three_hearts: :pray: :pray: :pray:

2 Likes

Thankyou @luv.ak.tech :smiling_face_with_three_hearts: :stuck_out_tongue_winking_eye:

2 Likes

Thankyou Anshu @RudraFromIndia

2 Likes

first , Thx alot for this guide :heart:

Here the time value appears as minutes … is there any way to show the number of hours too?

Has anyone encountered a problem with the music player being late in fetching music from the links, or is it an internet problem for me? :man_facepalming:

2 Likes

I found this on community:
Clock Component use - Discuss - Kodular Community

I think taifun player or exoplayer doesn’t have buffering service that’s why to seek to the position always needs a time as well. In my honest opinion, an exoplayer or Taifun doesn’t work properly if your music is very long. It is quite good for the music of 5 to 10 minutes. I request every @ExtensionDevelopers to make a music player that can work in the background as well as it has buffering service.
//Sneha

4 Likes

Nice guide :slightly_smiling_face:

2 Likes

Thankyou :smiling_face_with_three_hearts: :smiling_face_with_three_hearts: @Moulaali

3 Likes

There is now also a special block for HH:mm

grafik

Btw, what’s about adding a fast forward and rewind using the Slider, as shown here:

2 Likes

Yes .

I will update the guide with your methods as fast as i will be free.

2 Likes

Thx @oseamiya for helping :heart_eyes: :heart:
Thx @bodymindpower for this extention :heart_eyes: :heart:

2 Likes

And Thanks to @taifun for this player extension :smiling_face_with_three_hearts:

3 Likes

there already is the Async Player Extension by @Andres_Cotes (25 USD)
however unfortunately published in the Appybuilder community and therefore not available anymore (@Andres_Cotes might want to transfer all his extensions to a safe place…)
or try to get it here https://andrescotes.github.io/

and there is the Stream player (Video and Audio) Extension by Kus Zab (12 USD) - Appybuilder link unfortunately not available anymore

Taifun

3 Likes

@oseamiya I tried it on normal player from kodular and it work better :slightly_smiling_face:

2 Likes

@oseamiya , you can use a circular progress and do one thing use a you can use a clock with a timer of 1 sec and when the timer completes, if taifun player is playing, call notifier1 dismiss spinning progress

1 Like

BTW Nice guide p.m me and I can send you working aia with circular progress (buffering)

1 Like

This link can work as it is from Internet archive

2 Likes