How to create an Online Music Player App using Cloudinary DB

Hello friends, today I am going to show you how we can make an Online Music Player app like Saavn, Hungama or Gaana.

So without wasting any time, let’s get started.

First of all create a splash screen to look your app beautiful.  If you don’t know how to create a splash screen then check out my previous tutorial on how to make a splash screen.

Now after splash screen create another screen where Music Categories will appear. Here I created only two categories Hindi and English. You can create many categories as you wish. So drag and drop two buttons and set texts as English and Hindi. Design two buttons. Make button’s Shape as Oval and make it more beautiful. Also rename two buttons as english_btn  and hindi_btn.

Now create another two Screens for two categories. But here I have created one screen named hindi for only Hindi category. Create all screens for how much you created categories. Here is the block for this screen.

Now go to hindi screen and drag a Vertical Arrangement and set width and height as fill parent. Now drag Horizontal Arrangement to create numbering. So drag 4 labels(you also may drag 3) and in text set Playing in the first label, 1 in the second label, of 2 song(s) in the rest labels. Here I uploaded only 2 musics so that I give the text as 2. Now name the second label as numbering_label. This label will be use for numbering. Now drag another Horizontal arrangement and set width as 5 percent and height as fill parent. Drag a label into this and in text set please wait… and name this label as song_name. Here song’s names will appear. After this drag another Horizontal arrangement and drag an Image in this. Here song’s logo will appear. Upload Songs’ logo to the App first. Like I did two uploads of image on the Thunkable Server. And finally add last horizontal arrangement and drag 4 buttons. First button is for Previous Song so name the button as prev_btn, second button will be Pause Button, named pause_btn, 3rd button is for Play button, named play_btn, make it invisible and 4th button is for Next button, named nxt_btn. Design all buttons and Screen.

Now you have to upload musics to a database. You can use any online cloud platforms like Dropbox or Google Drive but I am using Cloudinary. Go to https://cloudinary.com and create an account then upload the files. No need any API key or secret for this process. Only need the links of the files you uploaded. Just click on the song you uploaded and you can see the link of the file.

In the app drag Player from the Media and also upload the logos in jpg format. Now see the design of the screen.

Now see the Blocks and create

Create four global values. For all the global values first song is Dildaara and second is Dil Diyan Gallan. It is compulsory to make all values of the rows have to be same.

this above blocks is for Play, Next and Previous values.

Make above block for the Play, Pause, Next and Previous buttons. And also Screen Initialize value to start song when the screen initialize.

Check out the video tutorial I upload on YouTube.

AIA File:

Note If the file was download as .zip file then please refresh then it will download as .aia file

Here is the video tutorial in Hindi