Code Example: iPhone Voice Memos
Date Posted: 12/12/2007 4:19:55 PM
Example Type: Other

Introduction
Record voice memos on your iPhone with the Voice Memos app!  Use it to see how you can build iPhone apps with MyVox.

Documentaion:

As with all iPhone widgets (as of the time of writing, though the iPhone SDK is supposed to appear soon), our app is Web-based, and simply designed to conform to the user interface conventions of the iPhone. It spans multiple pages, and also incorporates some CSS and images - we wanted this one to be pretty - so rather than provide you all the plaintext code here, we've instead zipped it up for you to download to your machine and peruse at your leisure. It also uses a couple of canned Javascript libraries: util.js (something we wrote) and prototype.js (something awesome that we definitely did not write).

Here's how it works:

1. The user should start by hitting the start.html page from his or her iPhone. Here, we collect the user's phone number, which we'll need later in order to identify the user. Note that you could use a more sophisticated and secure identification scheme with real authentication - this is just to keep the demo simple.

2. The phone number gets passed to init_recorder.html. Here, we create a RecordingList for the user.

3. The key to the RecordingList gets passed to voicememo.html. This is where the real work happens. First, we take the passed-in key, and use it to retrieve any voice memos that have already been left, by retrieving the current Recordings in the RecordingList. We display these recordings to the user (see the memoList function).

4. Next, if the user clicks on an existing recording, we take the user to a page where he or she can play or delete the audio (see the playMemoMenu and deleteMemo functions).

5. If the users clicks on the New Memo link, we use CreateRecording to create a new Recording and associate it with the RecordingList (see the newMemo function).

6. We then wait for a response. Once we get it, we immediately use StartRecordingSession to create a new RecordingSession where that single new Recording will get recorded (see the startSession function).  We set up the RecordingSession to be associated specifically with the phone number we collected from the user earlier.  When the user calls, we’ll match that phone number up with his or her caller ID, and in that way know that the user’s call should be associated with this phone session.

7. We wait for a response again. We parse the response to get the phone number for the user to call, and display it as a link (see the displayNew function).

8. The user clicks the link, which causes the iPhone to call myVox. After the user hangs up, he or she is automatically returned to this page.

9. Meanwhile, the page checks the status of the phone call periodically, using the convenient PeriodicalExecutor function from the prototype.js library (see the displayNew function). It executes the checkSession command every three seconds, which invokes the GetSessionStatus command to get the phone call status from MyVox. The results are fed to handleSession, which determines whether the phone call has ended yet or not, and then either adds the new voice memo to the page (if the status returns "ended") or deletes it (if it returns "expired"). Either way, it also stops running the SessionChecker.

You can read the comments in the pages to learn more about details on how we made this look "iPhone-y" and gave it the feel of an app, like removing the address bar once the phone number has been entered.

Download the code here. If you want to run the code, you will need a web server and the ability to run Perl.  Copy “myvoxproxyapi.pl” to your cgi-bin directory; if your cgi-bin is located elsewhere than the usual /cgi-bin, you will need to edit the various HTML pages to refer to your cgi-bin’s location.  Please put the HTML files, the /iphone directory, and the /lib directory at the root of your HTML directory; if you don’t want to do this, you will need to edit the HTML files to refer to the actual location of the /iphone and /lib files.  This file is includes as a readme.rtf file in the above download; you don’t need it to run the code.

You can run the code with the provided VoiceRecorder key, but you might want to set up your own VoiceRecorder instead. 

Example Code:
There's too much code, broken up into multiple docs, for us to put it all here! Check the link in the description above to download all the code.