1. Code
  2. Corona SDK

Corona SDK: Creating a Music Player App - Final Steps


Welcome to the second part of our Corona SDK music player tutorial. In this part we'll place the interface in stage, handle the app logic, button controls and the steps to build the final app.

Where We Left Off. . .

Please be sure to check part 1 of the series to fully understand this tutorial.

Step 1: Variables

These are the variables we'll use. Read the comments in the code to know more about them, some of their names are self explaining so there will be no comment there.

Step 2: Functions

Declare all functions as local at the start.

Step 3: Main Function

Next we'll create the function that will initialize all the app logic:

Step 4: Build the GUI

The following function places all of the GUI on the stage. It is built in the same order that we declared the variables, so you will easily identify each part by the variable names.

We add the tap listeners of the buttons in the last lines and this will make the buttons perform the corresponding function when tapped.

Step 5: Play Current Song

This code runs when the play button is pressed.

It resets the song and time counters (in case it's not the first time the button is pressed) and plays the song specified by the currentSong variable. After that, the playing variable is set to true, this will play the next or previous song automatically when the next or back buttons are pressed.

It also starts the timer to begin the song duration counter and hides the play button to reveal the stop button.

Step 6: Stop Song

When the stop button is pressed, the current song stops playing and the timer is cancelled. Buttons are returned to normal and playing is set to false.

Step 7: Next Song

This function stops the current song and changes to the next in the Table, if the playing variable is set to
true it will play it automatically. It also checks if the next song is the last one, if that is the case it goes back to the first in the line.

Step 8: Previous Song

As you may imagine this function behaves in the same way as the previous one, just backwards.

Step 9: Update Information

This code (called in the past three functions) handles the information displayed in both bars.

It updates the album art, title, artist and times of the songs.

Step 10: Update Progress

Executed every second, this function updates the progress bar of the song based on the current position and the total duration of it.

Note that the methods used by the Corona API may return different results depending on the format of the audio files.

Step 11: Call the Main Function

In order to initially start the app, the Main function needs to be called. With the above code in place, we’ll do that here:

Step 12: Loading Screen

The Default.png file is an image that will be displayed right when you start the application while the iOS loads the basic data to show the Main Screen. Add this image to your project source folder, it will be automatically added by the Corona compliler.

Step 13: Icon

Using the graphics you created before you can now create a nice and good looking icon. The icon size for the non-retina iPhone icon is 57x57px, but the retina version is 114x114px and the iTunes store requires a 512x512px version. I suggest creating the 512×512 version first and then scaling down for the other sizes.

It doesn’t need to have the rounded corners or the transparent glare, iTunes and the iPhone will do that for you.

Step 14: Testing in the Simulator

It's time to do the final test. Open the Corona Simulator, browse to your project folder, and then click open. If everything works as expected, you are ready for the final step!

Step 15: Build

In the Corona Simulator go to File > Build and select your target device. Fill the required data and click

build. Wait a few seconds and your app will be ready for device testing and/or submission for distribution!


Experiment with the final result and try to make your custom version of the app!

I hope you liked this tutorial series and find it helpful. Thank you for reading!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.