Recording

Recording

The following zip contains the psd files and the build folder for your reference

• https://www.kwiksher.com/tutorials/Kwik4/Recording.zip

screenshots are using Kwik3’s ones but the project file is updated for Kwik4. Change is made to myvoice.lua

Page1.psd

• Record button
• Play button
• Countdown text while recording for 5 seconds.

Page2.psd

Create the same interactions as same as page1 and there are the following cases

• when user press the record button, do a linear animation to show the countdown
• when recording is finished, display off the countdown.

Ading the two pages

Open Page1.psd and Page2.psd. Create a new Kwik project with iPad Mini.

• Name: Recording
• Use page1.psd

Then add page2 with Add new Page

• page2
• Use page2.psd

Publish images firstly before you do buttons/interacions etc

Corona Simulator to check the images published

Record Button

Now begin to work with page1. Select Record layer and make a button to record your voice.

In Add Button window, Name:but_record and select Record Audio

In Record and Play Audio window, input Duration 5 seconds and Create Record action

Click Create button at the bottom to close the window.

Play button

Next select Play layer to make a button to play back the recorded voice.

In Add Button window, Name: but_play and select External Code.

In Recording_sample zip, you find myvoice.lua and choose it and create an external code

print("myvoice")
local filePath = system.pathForFile("page_"..UI.curPage..".pcm", system.DocumentsDirectory )
 local file = io.open(filePath, "r")
 if file then
    io.close(file)
    UI.allAudios.playback = audio.loadStream( "page_"..UI.curPage..".pcm", system.DocumentsDirectory )
    audio.play(UI.allAudios.playback, {channel=31})
 end

External code is added. Click create button at the bottm to close the window.

Select Cnt layer to to make a countdown while recording voice.

In Countdown Replacement window, add time to 5 sec as same as the time interval for recording and set Starts:Wait request

Click Create button at the bottom to close the window

“Cnt” Countdown is created

Then add ths “Cnt” countdown to the but_record. Select “Cnt” to add actions for the button.

When page1 opens, let’s play the voice recorded. Project and Pages > Actions to add a new action.

In Add Action window, Name as act_play and select External code to add myvoice.lua.

When the page starts, a timer to play the action above

In Add Timer window, set Duration 0 second and Loop count is 1

Timer is created.

Page2.psd

Create the same interactions as same as page1 and additionally when user press the record button, do a linear animation to appear the countdown and when recording is finished, display off the countdown.

Create act_play, but_play, but_recrod, Cnt and timer_start as same as page1.

Add a linear animation to Cnt layer

In Linear Animation window, Name as linear_appear. Loop count is 1 and set Starts as Wait request

Make another Linear animation for Cnt layer. Name as linear_disappear with set Alpha 0%. Select Starts as Wait request.

Then add the linear_appear to the but_record button. Select Play Animation to add linear_appear.

To display off the countdown when countdown is finished, firstly create an action and this action is called when countdown is completed. Project and Pages > Action

In Add Action window, select Play Animation to add linear_disappear.

Now you can add act_disappear to the Countdown replacement window of “Cnt”

Lastly, you can make the opacity 0% to “Cnt” layer when the page2 is displayed

Publish without exporting images.Without exporting images,it is a trick to set “Cnt” layer’s opacity to 0% in lua code only.