Time for action – controlling audio

Let's simulate our own little music player by creating user interface buttons that will control the audio calls as follows:

1. In the Chapter 6 folder, copy the Controlling Audio project folder to your desktop. You will notice several art assets, a ui.lua library, config.lua file, and a song2.mp3 file inside. You can download the project files accompanying this book from the Packt Publishing website.
   
2. In the same project folder, create a brand new main.lua file.
3. Load the audio file via loadStream(), name it music, and call the UI library. Also add it in a local variable called myMusic:

   local ui = require("ui")
   local music = audio.loadStream( "song2.mp3" ) local myMusicChannel

4. Create a local function called onPlayTouch() with an event parameter to play the audio file. Add an if statement that contains event.phase == "release" so that the music starts playing when the button releases. Apply the playBtn display object as a new UI button:

   local onPlayTouch = function( event )
     if event.phase == "release" then
       myMusicChannel = audio.play( music, { loops=-1 }  )
     end
   end
   
   playBtn = ui.newButton{
     defaultSrc = "playbtn.png",
     defaultX = 100,
     defaultY = 50,
     overSrc = "playbtn-over.png",
     overX = 100,
     overY = 50,
     onEvent = onPlayTouch,
     id = "PlayButton",
     text = "",
     font = "Helvetica",
     size = 16,
     emboss = false
   }
   
   playBtn.x = 160; playBtn.y = 100

5. Create a local function called onPauseTouch() with an event parameter to pause the audio file. Add an if statement when event.phase == "release" so that the music pauses. Apply the pauseBtn display object as a new UI button:

   local onPauseTouch = function( event )
     if event.phase == "release" then
       audio.pause( myMusicChannel )
       print("pause")
     end
   end
   
   pauseBtn = ui.newButton{
     defaultSrc = "pausebtn.png",
     defaultX = 100,
     defaultY = 50,
     overSrc = "pausebtn-over.png",
     overX = 100,
     overY = 50,
     onEvent = onPauseTouch,
     id = "PauseButton",
     text = "",
     font = "Helvetica",
     size = 16,
     emboss = false
   }
   
   pauseBtn.x = 160; pauseBtn.y = 160

6. Add a local function called onResumeTouch() with an event parameter to resume the audio file. Add an if statement when event.phase == "release" so that the music resumes. Apply the resumeBtn display object as a new UI button:

   local onResumeTouch = function( event )
     if event.phase == "release" then
       audio.resume( myMusicChannel )
       print("resume")
     end
   end
   
   resumeBtn = ui.newButton{
     defaultSrc = "resumebtn.png",
     defaultX = 100,
     defaultY = 50,
     overSrc = "resumebtn-over.png",
     overX = 100,
     overY = 50,
     onEvent = onResumeTouch,
     id = "ResumeButton",
     text = "",
     font = "Helvetica",
     size = 16,
     emboss = false
   }
   
   resumeBtn.x = 160; resumeBtn.y = 220

7. Add a local function called onStopTouch() with an event parameter to stop the audio file. Create an if statement when event.phase == "release" so that the music stops. Apply the stopBtn display object as a new UI button:

   local onStopTouch = function( event )
     if event.phase == "release" then
       audio.stop() 
       print("stop")
   
     end
   end
   
   stopBtn = ui.newButton{
     defaultSrc = "stopbtn.png",
     defaultX = 100,
     defaultY = 50,
     overSrc = "stopbtn-over.png",
     overX = 100,
     overY = 50,
     onEvent = onStopTouch,
     id = "StopButton",
     text = "",
     font = "Helvetica",
     size = 16,
     emboss = false
   }
   
   stopBtn.x = 160; stopBtn.y = 280

8. Add a local function called onRewindTouch() with an event parameter to rewind the audio file. Create anif statement when event.phase == "release" so that the music rewinds to the beginning of the track. Apply the rewindBtn display object as a new UI button:

   local onRewindTouch = function( event )
     if event.phase == "release" then
       audio.rewind( myMusicChannel )
       print("rewind")
     end
   end
   
   rewindBtn = ui.newButton{
     defaultSrc = "rewindbtn.png",
     defaultX = 100,
     defaultY = 50,
     overSrc = "rewindbtn-over.png",
     overX = 100,
     overY = 50,
     onEvent = onRewindTouch,
     id = "RewindButton",
     text = "",
     font = "Helvetica",
     size = 16,
     emboss = false
   }
   
   rewindBtn.x = 160; rewindBtn.y = 340

9. Save your project and run it in the simulator. You have now created a functional media player!
   

What just happened?

We added a UI library for our user interface buttons by calling require("ui"). This produces the on press look when a button has been pushed down.

A variety of functions were created to run each button. They are as follows:

• onPlayTouch(): This calls out myMusicChannel = audio.play( music, { loops=-1 } ) when the event is triggered by the user pressing the button
• onPauseTouch(): This calls out audio.pause( myMusicChannel ) to pause the song when the button is pressed
• onResumeTouch(): This calls out audio.resume( myMusicChannel ) to resume the song if it has been paused
• onStopTouch(): This calls out audio.stop() if the song is currently playing and will stop the audio
• onRewindTouch(): This calls out audio.rewind( myMusicChannel ) to rewind the song to the beginning of the track.

Note

When a song is paused, it resumes only by pressing the Resume button. The Play button will have no effect when the Pause button is pressed.