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.
- Title Layout - It is a horizontal arrangement contains a back icon.
- Main Layout - It is a vertical arrangement that has all functions required in the music player.
- 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.
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.
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.
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 6 Seconds
To forward 6 seconds, you have to tell the player to start playing music from Instant Position + 6000 But 6s can only be forwarded if 6s is left. For example, if only a second is left to finish the music, 6 seconds cant be forwarded so if-then block is used.
As well as to replay 6 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 6s 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 @UnknownBeast for helping me.
Sneha//
