Music Player

Written by Balázs Skultéti

Hi, I am a tech guy having big interest and being fond of coding.

Mar 30, 2020

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 step

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

Adding Buttons:
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

Coding

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.

More ideas

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!

You can download the finished result here:

musicplayer.apk (4.74MB)
musicplayer.aia (1.62KB)

You May Also Like…

TTS – Speak your text!

TTS – Speak your text!

Hi, today we are going to build an app based on a very simple component called Text To Speech. Using this visible...

Side Menu Layout

Side Menu Layout

Hello, today we will talk about how to use the side menu layout in Kodular. Let's get started.   1. Adding the...

How to force the phone to vibrate

How to force the phone to vibrate

Hello, in this article we will be talking about how to make your device vibrate programmatically using Kodular. Let's...

0 Comments