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

 

20 thoughts on “How to create an Online Music Player App using Cloudinary DB

  1. Great blog here! Also your website loads up very fast!
    What host are you using? Can I get your affiliate link to your host?
    I wish my site loaded up as fast as yours lol

  2. Very great post. I simply stumbled upon your blog and wished to mention that I have really loved surfing around
    your weblog posts. In any case I’ll be subscribing for
    your rss feed and I am hoping you write again soon!

  3. Wonderful post but I was wanting to know if you could write
    a litte more on this topic? I’d be very grateful if you could elaborate
    a little bit more. Appreciate it!

  4. First off I would like to say wonderful blog! I had a quick question which I’d like to ask if you do not
    mind. I was interested to know how you center yourself and clear your thoughts prior to writing.
    I’ve had trouble clearing my mind in getting my ideas out.
    I do take pleasure in writing but it just seems like the
    first 10 to 15 minutes are generally wasted just trying to
    figure out how to begin. Any suggestions or tips? Appreciate
    it!

  5. I have been browsing on-line greater than three hours as of late, yet I never
    discovered any fascinating article like yours. It’s beautiful value enough
    for me. In my opinion, if all site owners and bloggers made just
    right content as you probably did, the net will be much more useful than ever
    before.

  6. Hey, I think your blog might be having browser
    compatibility issues. When I look at your blog in Firefox, it looks
    fine but when opening in Internet Explorer, it has some overlapping.
    I just wanted to give you a quick heads up! Other then that, awesome blog!

  7. I will right away seize your rss feed as I can not in finding your email subscription link or e-newsletter service.

    Do you have any? Please permit me know so that I may subscribe.
    Thanks.

  8. I am really impressed with your writing skills as well as with the layout
    on your blog. Is this a paid theme or did you customize it yourself?
    Either way keep up the nice quality writing, it is
    rare to see a nice blog like this one today.

  9. Hey there I am so thrilled I found your web
    site, I really found you by mistake, while I was looking on Bing for something else,
    Anyhow I am here now and would just like to say thanks a lot for a marvelous post and a all round entertaining blog (I also love the
    theme/design), I don’t have time to go through it all at the
    moment but I have saved it and also added your RSS feeds, so when I have time I will be back to read more,
    Please do keep up the fantastic work.

Leave a Reply

Your email address will not be published. Required fields are marked *