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.
-- Variables local currentSong = 1 local playing local timerSource local min = 0 local sec = 0
Step 2: Functions
Declare all functions as local at the start.
-- Functions
local Main = {}
local buildGUI = {}
local playCurrentSong = {}
local stopSong = {}
local nextSong = {}
local prevSong = {}
local updateInfo = {}
local updateProgress = {}
Step 3: Main Function
Next we'll create the function that will initialize all the app logic:
-- Main Function function Main() buildGUI() end
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.
function buildGUI()
bg = display.newImage('background.png')
infoBar = display.newImage('infoBar.png', 20, 168)
imageMarker = display.newImage('imageMarker.png', 30, 178)
cdCover = display.newImage('s1.png', 30, 178)
titleText = display.newText('1. Here Without You', 117, 176, native.systemFontBold, 14)
titleText:setTextColor(246, 237, 240)
byText = display.newText('By', 121, 197, native.systemFont, 10)
byText:setTextColor(191, 182, 183)
artistText = display.newText('3 Doors Down', 137, 197, native.systemFontBold, 10)
artistText:setTextColor(244, 204, 106)
buttonBar = display.newImage('buttonBar.png', 20, 278)
playBtn = display.newImage('playBtn.png', 25, 279)
stopBtn = display.newImage('stopBtn.png', 27, 282)
stopBtn.isVisible = false
prevBtn = display.newImage('prevBtn.png', 55, 279)
nextBtn = display.newImage('nextBtn.png', 85, 279)
progressBar = display.newImage('progressBar.png', 126, 290)
progress = display.newRoundedRect(0, 0, 100, 10, 3)
progress:setFillColor(244, 204, 106)
progress:setReferencePoint(display.TopLeftReferencePoint)
progress.x = 126
progress.y = 290
progress.isVisible = false
current = display.newText('00:00', 235, 288, native.systemFont, 9)
current:setTextColor(246, 237, 240)
total = display.newText('/00:00', 259, 288, native.systemFont, 9)
total:setTextColor(191, 182, 183)
playBtn:addEventListener('tap', playCurrentSong)
stopBtn:addEventListener('tap', stopSong)
nextBtn:addEventListener('tap', nextSong)
prevBtn:addEventListener('tap', prevSong)
end
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.
function playCurrentSong:tap(e) audio.rewind(songs[currentSong]) sec = 0 min = 0 audio.play(songs[currentSong]) playing = true updateInfo() timerSource = timer.performWithDelay(1000, updateProgress, 0) playBtn.isVisible = false stopBtn.isVisible = true end
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.
function stopSong:tap(e) audio.stop() timer.cancel(timerSource) playBtn.isVisible = true stopBtn.isVisible = false playing = false end
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.
function nextSong:tap(e) audio.stop() currentSong = currentSong + 1 if(currentSong > #songs) then currentSong = 1 end if(playing) then audio.rewind(songs[currentSong]) sec = 0 min = 0 audio.play(songs[currentSong]) end updateInfo() end
Step 8: Previous Song
As you may imagine this function behaves in the same way as the previous one, just backwards.
function prevSong:tap(e) audio.stop() currentSong = currentSong - 1 if(currentSong < 1) then currentSong = #songs end if(playing) then audio.rewind(songs[currentSong]) sec = 0 min = 0 audio.play(songs[currentSong]) end updateInfo() end
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.
function updateInfo() titleText.text = tostring(currentSong) .. '. ' .. songsInfo[currentSong][2] titleText:setReferencePoint(display.TopLeftReferencePoint) titleText.x = 117 artistText.text = songsInfo[currentSong][3] artistText:setReferencePoint(display.TopLeftReferencePoint) artistText.x = 137 display.remove(cdCover) cdCover = nil local cdCover = display.newImage(songsInfo[currentSong][4], 30, 178) local totalMin = math.floor(audio.getDuration(songs[currentSong]) / 1000 / 60)-- local totalSec = math.floor(audio.getDuration(songs[currentSong]) / 1000 % 60)-- total.text = '/' .. totalMin .. ':' .. totalSec total:setReferencePoint(display.topLeftReferencePoint) total.x = 275 end
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.
function updateProgress:timer(e) sec = sec + 1 if(sec == 60) then sec = 0 min = min + 1 end local secS = tostring(sec) if(#secS < 2) then sec = '0' .. sec end current.text = min .. ':' .. sec current:setReferencePoint(display.topLeftReferencePoint) current.x = 250 -- Progress Bar local position = min .. sec position = position * 1000 local duration = audio.getDuration(songs[currentSong]) local percent = (position / duration) print(position, duration, percent) progress.isVisible = true progress.xScale = percent end
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:
Main()
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!
Conclusion
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!
Comments