Making a beep alert (Mastering Sound and Music) (iPhone JavaScript)


This topic introduces you to a set of recipes about how to utilize the audio and video capabilities of the iPhone. Many users decide to use their smartphone as a multimedia player; therefore, developers will find how to build applications for playing video and audio files very interesting.

We’ll start to find out how to make a simple beep sound from our application. Then, we’ll discover another kind of notification for vibrating the device. After learning this, we’ll delve into more advanced features related to iPod and iTunes Store. The last recipes of this topic show how to play audio and video files with a few lines of JavaScript and HTML code.

The first recipe for this topic is focused on how to play a simple beep sound as a response to an event or an action. Specifically, we’ll play a sound when the user clicks on a simple button.

Usually, the beep sound is used for alerting the user. For example, you may want to launch an acoustic signal to indicate that pushing the button is an invalid action.

Instead of beeping, we can use another kind of notification such as an alert box as you’ve learned in topic 2, Building Interfaces.

Getting ready

This recipe requires the use of two different frameworks, UiUIKit and PhoneGap. UiUIKit will be used for building a consistent interface. PhoneGap will allow us to interact with the native hardware and play the beep sound.

Remember, you’ll need to use a Mac OS X computer that has Xcode and the iOS SDK installed for building iPhone applications with PhoneGap.

The complete code for this recipe can be found at code/ch05/beep/ in the code bundle.

How to do it…

1. Our first task will be to create a new PhoneGap project in Xcode. In order to do that, launch Xcode and click on File | New project. Don’t forget to select the PhoneGap-based Application template and click on the Choose, button. Then, choose a name for your new project and click on the Save button when you’re ready.

2. The second task is focused on selecting the appropriate options for the build and run environments. Select the Project | Edit Project Settings menu option for the required configuration of these environments. You’ll see a new dialog box, where you can select the base SDK for your project. Choose the last version for the iOS Simulator. The following screenshot displays the mentioned dialog box for these options:


3. Before continuing, be sure to select the Simulator option on the combobox located at the upper-left side of the main window of Xcode:


4. We’re going to integrate the required code for the UiUIKit framework with our PhoneGap project. This action is pretty simple; you should only copy the files of the UiUIKit framework inside the www folder of your project. For example, suppose you’ve installed the UiUIKit framework in the /Library/WebServer/Documents/ uiuikit and your new project is located at /Library/WebServer/Documents/ ch05/beep. In this scenario, you only need to execute the following command from the terminal:


5. Click on the www item of the Group & Files pane and click again on the index. html item. After this action, the main HTML file of our project will be opened inside the Xcode’s editor. We’re going to add a new code line after the title meta tag:


6. A new JavaScript function should be added inside the JavaScript section of index. html, so we’ll set the following section before the </script> tag:


7. Let’s go to the body section of our main file and replace it in the following code:


8. Before testing our new application, we’ll need to save our changes by clicking on the File | Save menu option. After this operation, click on the Build and Run button for launching our application through the iPhone simulator tool.


How it works…

The PhoneGap framework offers a simple function for invoking a beep sound through the notification object. The beep method uses the number of times as a parameter to repeat the beep sound.

In order to play the beep, we’re using a simple button with the onclick handler for invoking a specific JavaScript function, which calls the beep method. As we used 4 as a parameter, the beep will be repeated four times.

For designing a graphical user interface, which is consistent with the native look and feel of iPhone, we’re applying some elements of the UiUIKit framework. Actually, we defined a div element with id="header" for building a main toolbar with a simple title. UiUIKit contains a specific unordered list (<ul class="data" >) for displaying some text. Finally, our button for playing the beep was built through an anchor element applying two different CSS styles, white and button.

There’s more…

Keep in mind that PhoneGap will build a native iPhone application, so you’ll need to be a member of the iPhone Developer Program to install and run your application in a real device. The audio does not work in the iOS simulator.

In order to prevent dragging of our application, it could be interesting to uncomment the specific code located in the JavaScript section of the index.html file. Actually, the following JavaScript lines should appear in the mentioned section:


A part of the beep method, the notification object of PhoneGap contains two more methods for launching notifications to the user. One of these is alert and the other one is vibrate. We’ve learned how to create alerts in the Creating and customizing a notification box recipe in topic 2, Building Interfaces and we’ll find out how to use the vibrate method in the next recipe.

See also

► Installing the PhoneGap recipe in topic 1, Frameworks Make Life Easier

► Installing the UiUIKit recipe in topic 1, Frameworks Make Life Easier

► Creating and customizing a notification box recipe in topic 2, Building Interfaces

► Triggering a vibration recipe

Next post:

Previous post: