Learn to Code iOS Apps 4: Making It Beautiful

Adding Sound

Music and sound effects are great ways to add character to your app. There are three sounds you’ll use in your app: background music, a beep every time the player taps the button, and a beep for every second that passes on the countdown clock — just to make the player sweat a little! :]

iOS supports all kinds of features such as GPS, accelerometer, and sound playback. Each of these features is bundled into something called a framework. You’re already using a framework called UIKit, which includes views, view controllers, buttons, storyboards, etc.

To play sounds, there’s a framework called AVFoundaton that you’ll need to use. To add it to the project, click on the Tap Me project at the top of the file browser in the left sidebar, as below:

Then click Tap Me under targets, and select the Summary tab:

Scroll down until you find a section called Linked Frameworks and Libraries. This is a list of all the frameworks currently in your app. To add more frameworks, click the + (plus sign) button.

Whoa — that’s a lot of frameworks to choose from!

Find AVFoundation.framework in the list and select it. Then click the Add button, like this:

Awesome! Now the AVFoundation framework has been added to the project. You’re ready to get grooving with some sound! :]

The sound playback will be handled from the view controller code, so the first step is to set up the header file. Open up ViewController.h. Near the top of the file, you’ll notice this line:

#import <UIKit/UIKit.h>

Hey, look at that! There’s the import statement for the UIKit framework. Add another import statement for the AVFoundation framework so that the code looks like this:

#import <UIKit/UIKit.h>
#import <AVFoundation/AVFoundation.h>

Just as importing UIKit lets you use things like UIButton and UILabel, importing AVFoundation lets you use the very useful AVAudioPlayer class.

Next, you’ll need an instance variable for each of the three sounds. Add a line for each instance variable as shown below:

@interface ViewController : UIViewController<UIAlertViewDelegate> {
    IBOutlet UILabel *scoreLabel;
    IBOutlet UILabel *timerLabel;

    NSInteger count;
    NSInteger seconds;
    NSTimer *timer;

    // Add these AVAudioPlayer objects!
    AVAudioPlayer *buttonBeep;
    AVAudioPlayer *secondBeep;
    AVAudioPlayer *backgroundMusic;
}

That’s it for the header file! Time to get some sound playing. Open ViewController.m, and add this new helper method above the viewDidLoad method:

- (AVAudioPlayer *)setupAudioPlayerWithFile:(NSString *)file type:(NSString *)type
{
  // 1
  NSString *path = [[NSBundle mainBundle] pathForResource:file ofType:type];
  NSURL *url = [NSURL fileURLWithPath:path];

  // 2
  NSError *error;

  // 3
  AVAudioPlayer *audioPlayer = [[AVAudioPlayer alloc] initWithContentsOfURL:url error:&error];

  // 4
  if (!audioPlayer) {
    NSLog(@"%@",[error description]);
  }

  // 5
  return audioPlayer;
}

This method will return an AVAudioPlayer object, and takes two arguments: a file name and type. Let’s look at what it does section by section:

1. You need to know the full path to the sound file, and [NSBundle mainBundle] will tell you where in the project to look. AVAudioPlayer needs to know the path in the form of a URL, so the full path is converted to URL format.
2. A NSError object will store an error message if something goes wrong when setting up the AVAudioPlayer. Usually nothing will go wrong — but it’s always good practice to check for errors, just in case!
3. This is the important call to set up AVAudioPlayer. You’re passing in the URL, and the error will get filled in if something goes wrong.
4. If something goes wrong, the audioPlayer will be set to nil, which you can check for with the exclamation mark symbol. If that happens, the error will be logged to the console.
5. If all goes well, the AVAudioPlayer object will be returned!

Now that you have a handy method that will set up AVAudioPlayer objects, it’s time to use it! Add this code to the viewDidLoad method just after setting up the background images:

  buttonBeep = [self setupAudioPlayerWithFile:@"ButtonTap" type:@"wav"];
  secondBeep = [self setupAudioPlayerWithFile:@"SecondBeep" type:@"wav"];
  backgroundMusic = [self setupAudioPlayerWithFile:@"HallOfTheMountainKing" type:@"mp3"];

At this point in viewDidLoad, you’ll have all three sounds ready to be called in your code! :]

The first sound, buttonBeep, should play when the button is pressed. Update the buttonPressed method to play the sound:

- (IBAction)buttonPressed {
  count++;

  scoreLabel.text = [NSString stringWithFormat:@"Score\n%i", count];

  // add this line
  [buttonBeep play];
}

Run the project to test it out. You should hear a nice beep when you tap the button!

There are two other sounds to add. The secondBeep sound should be played every second when the timer ticks down. Add the call to play that sound in subtractTime method:

- (void)subtractTime {
  seconds--;
  timerLabel.text = [NSString stringWithFormat:@"Time: %i",seconds];

  // add this line
  [secondBeep play];

  // ...the rest of the method continues here...

Run the project again to test it out. You should hear a different beep as the number of seconds counts down. You’re almost done!

The final step is to add the background music. To play the music every time a new game is started, add the play code to the setupGame method. Add this code to the bottom of setupGame:

  [backgroundMusic setVolume:0.3];
  [backgroundMusic play];

You can adjust the volume of the background music so the beeps can still be heard. The setVolume method will take a number from 0 (off) to 1.0 (full volume); 0.3 is a good starting point for the background music.

Now run the project — and experience the glory of your fully featured app!

Feels good to be awesome, doesn’t it? :]

Final Thoughts

Congratulations! You have just made your first iPhone app, and taken it from having very basic functionality, to being a polished looking and sounding app.

There are lots of things that you can modify in your app, such as adding or changing some of the graphics, adding different difficulty levels, or even modifying the sound effects – the sky is the limit!

From here, you might want to try some of the other tutorials on this site. We have a ton to choose from – whatever your interests may be.

In the meantime, if you have any questions or comments, please join the forum discussion below!