Have you ever wondering about developing the coolest music player app on the world? Do you enjoy listening to music? What’s you favourite song? In this tutorial we are going to do a music player app using Kodular. Are you ready?
First create a new project called “musicplayer” and then design your screen a little bit: Let’s change the colour of the title bar by changing the “Title Bar” property of the screen on the right hand side or the title of the screen etc.
Filling the screen
Well, our screen is totally empty so we have to fill it up with some components.
Adding an Image:
The Image component is for displaying images and we need to add this visible component to display a cover picture of our favourite music. After dragging the Image from the left side into the screen we can make some design such as resizing it or upload a new one. So let’s upload a cover picture. More info
A Button is a visible component with the ability of detecting clicks and we need to add two of this component to be able to start and pause the music. After dragging the Buttons from the left side into the screen we can change the Button’s property for example the size, the text, the colour, the font size etc. One thing is very important: we need to rename the buttons using the little pencil icon next to the bin and so the programming part will be more transparent. More info
Adding the Player component:
The Player component plays audio and controls phone vibration but this is a non-visible component meaning we don’t have a concrete thing to be shown on the screen, it will only play music after adding the Source in the properties tab on the right side. More info
After finishing our design the next step is to do some coding to bring our app alive. Our mission is: After clicking the Start button, the music starts and after clicking the Pause button the music pauses. Change to Blocks view in the top right corner and let’s CODE!
First we need an event called “when Button_Start.Click do“: The blocks being in the event will run after clicking our button.
So the event is ready, we need to fill it up with blocks to start the music. Our Player1 component is capable of doing this job, let’s add into the event the appropriate method. This purple method can be found among the Player1’s blocks, and starts the music.
The next step is to pause the music as well, add an another event called “when Button_Pause.Click do“, so after hitting the pause button we need to pause the music. Use the appropriate method like below.
If you want to develop this app, here are some ideas:
- Add a stop Button
- Change music Button
YOUR own music player is ready! Connect to the Companion and test it. Having any questions write a comment below! Did you like our tutorial? Share it!