TheAppleBlog

You’ve seen all the different drum apps, right? Well, they’re really easy to make. In this iPhone Dev Sessions article, I want to teach you how to make Bickboxx, an actual app that’s in the iTunes App Store.

Grab Bickboxx (FREE) from the iTunes App Store if you want to see this puppy in action so you have an idea of what you’re building. Also, I’ve opened up the source code for free at Github. Feel free to download it, report issues, or even fork your own version and change it as you see fit.

More info on the open-source community project at Bickbot’s Bickboxx page.

Note: You don’t need to download the code from Github to get through the tutorial.

An On-going Project

I plan on adding more tutorials with enhancements to this project. Here are a couple of things that could be featured in future iPhone Dev Sessions.

• Key logger
• Adding analytics tracking
• Adding application preferences
• Track recorder and editor
• Vibration feedback
• Add your own custom sounds
• Access your iPod library as a background track

Leave a comment with other enhancements you want to learn.

OK, let’s get to creating Bickboxx!

Get Started

Create a new View-based project in XCode. Name the project “Bickboxx”.

Download this zip file and unzip it. These are all the sounds, images, and icons you need for Bickboxx. Drag all these files to the Resources. Hat tip to John Ellenich for the graphics/sounds.

You need to copy the item to the project’s directory, so put a check mark next to “Copy items into destination group’s folder (if needed).” Your settings should look similar to this. Click Add.

Adding the background image in Interface Builder

Double-click BickboxxViewController.xib to open it in Interface Builder. Drag an Image View (UIImageView) from the Library to the View window. This will act as a placement holder for our background image.

Bring up the Attributes Inspector. Set the Image to Background.png.

Creating the Button in Interface Builder

Drag a Round Rect Button (UIButton) to the View.

Bring up the Attributes Inspector. We don’t want the button to look like an ugly white rectangle. Set the Type to Custom.

Further down the Attributes Inspector, set the button’s state to Normal (or Default State Configuration depending on your version of Xcode). This is what the button looks like when it’s not doing anything.

Set the button’s Image to B Inactive.png. You need to resize the button in the View to make sure the “B” button is fully shown.

Now, change the button’s state to Highlighted (or Highlighted State Configuration depending on your version of Xcode). This is what the button looks like when it’s pressed down.

Set the button’s Image to B Active.png.

Drag another Round Rect Button (UIButton) to the View and repeat this section for the letters “E”, “A”, and “T”. Your View should now look like this:

Close Interface Builder for now.

Build and Go to make sure everything is still working. Touch the buttons, and they should light up.

Adding the Sounds Code

We have an interface that doesn’t do anything. Let’s fix that. The audio framework we need isn’t added by default. We have to add the AudioToolbox framework.

Control+Click the Frameworks folder on the left. Go to Add → Existing Frameworks…

Select the AudioToolbox.framework from /System/Library/Frameworks.

Click OK and add it to the project.

Open BickboxxViewController.h and add this code to it.

#import <UIKit/UIKit.h>
#import <AudioToolbox/AudioServices.h>

@interface BickboxxViewController : UIViewController {
    CFURLRef        bNoteFileURLRef;
    SystemSoundID    bNoteFileObject;
    CFURLRef        eNoteFileURLRef;
    SystemSoundID    eNoteFileObject;
    CFURLRef        aNoteFileURLRef;
    SystemSoundID    aNoteFileObject;
    CFURLRef        tNoteFileURLRef;
    SystemSoundID    tNoteFileObject;
}

@property (readwrite)    CFURLRef        bNoteFileURLRef;
@property (readonly)    SystemSoundID    bNoteFileObject;
@property (readwrite)    CFURLRef        eNoteFileURLRef;
@property (readonly)    SystemSoundID    eNoteFileObject;
@property (readwrite)    CFURLRef        aNoteFileURLRef;
@property (readonly)    SystemSoundID    aNoteFileObject;
@property (readwrite)    CFURLRef        tNoteFileURLRef;
@property (readonly)    SystemSoundID    tNoteFileObject;

@end

At the top, we’re referencing AudioServices.h from the AudioToolbox framework we imported earlier.

Below that is the declaration of properties for four sounds for the “B”, “E”, “A” and “T” buttons.

bNoteFileURLRef is the file location reference for the bNoteFileObject. This is the sound the “B” button will make.

These are the properties for the “E”, “A” and “T” sounds as well.

The BickboxxViewController.m File

Open BickboxxViewController.m. We need to synthesize the getters/setters for our properties.

You can do this by adding this after @implementation BickBoxxViewController:

@synthesize bNoteFileURLRef, bNoteFileObject, eNoteFileURLRef,
eNoteFileObject, aNoteFileURLRef, aNoteFileObject,
tNoteFileURLRef, tNoteFileObject;

Changing the viewDidLoad Method

Locate the viewDidLoad method. It will be commented out. You want to uncomment it to activate it.

The viewDidLoad method gets called after all the UI components are created. This is a good place for any startup code you need your app to perform. In this case, we’ll need to set our properties to the correct sounds.

The first thing we need to do in viewDidLoad is get the main bundle for the app. The main bundle allows you to use a folder hierarchy to organize and locate many types of application resources including images, sounds, localized strings, and executable code.

After [super viewDidLoad];, add this code to get the main bundle for the app.

// Get the main bundle for the app
CFBundleRef mainBundle;
mainBundle = CFBundleGetMainBundle ();

To build the sound for the “B” button, we need to get the path of the sound file we want to play. The name of the sound file is B.aifc. This is the code to get the URL to the found file to play. Put this code after the code where you get the main bundle.

// Get the URL to the sound file to play
bNoteFileURLRef  =    CFBundleCopyResourceURL (
                                             mainBundle,
                                             CFSTR ("B"),
                                             CFSTR ("aifc"),
                                             NULL
                                             );

Note that valid system sound packages are .wav, .aif and .caf files.

Now that we have bNoteFileURLRef set we can associate the sound file with the system sound object bNoteFileObject. The AudioServicesPlaySystemSound function lets you very simply play short sound files.

Add this code after the code that gets the sound file URL.

// Create a system sound object representing the sound file
AudioServicesCreateSystemSoundID (bNoteFileURLRef, &bNoteFileObject);

We finished loading up the sound for the “B” button. We’ll need to load up the sounds for the “E”, “A” and “T” buttons.

Try to code this part yourself. If you get stuck, the viewDidLoad method should look like this when you’re done.

// Implement viewDidLoad to do additional setup after loading the view, typically from a nib.
- (void)viewDidLoad {
    [super viewDidLoad];

    // Get the main bundle for the app
    CFBundleRef mainBundle;
    mainBundle = CFBundleGetMainBundle ();

    // Get the URL to the sound file to play
    bNoteFileURLRef  =    CFBundleCopyResourceURL (
                                                 mainBundle,
                                                 CFSTR ("B"),
                                                 CFSTR ("aifc"),
                                                 NULL
                                                 );

    // Create a system sound object representing the sound file
    AudioServicesCreateSystemSoundID (bNoteFileURLRef, &bNoteFileObject);

    // Get the URL to the sound file to play
    eNoteFileURLRef  =    CFBundleCopyResourceURL (
                                                 mainBundle,
                                                 CFSTR ("E"),
                                                 CFSTR ("aifc"),
                                                 NULL
                                                 );

    // Create a system sound object representing the sound file
    AudioServicesCreateSystemSoundID (eNoteFileURLRef, &eNoteFileObject);

    // Get the URL to the sound file to play
    aNoteFileURLRef  =    CFBundleCopyResourceURL (
                                                 mainBundle,
                                                 CFSTR ("A"),
                                                 CFSTR ("aifc"),
                                                 NULL
                                                 );
    // Create a system sound object representing the sound file
    AudioServicesCreateSystemSoundID (aNoteFileURLRef, &aNoteFileObject);

    // Get the URL to the sound file to play
    tNoteFileURLRef  =    CFBundleCopyResourceURL (
                                                 mainBundle,
                                                 CFSTR ("T"),
                                                 CFSTR ("aifc"),
                                                 NULL
                                                 );

    // Create a system sound object representing the sound file
    AudioServicesCreateSystemSoundID (tNoteFileURLRef, &tNoteFileObject);
}

Creating Our IBActions

Our BEAT buttons need to be associated with IBActions to make them do something. First, let’s declare the methods. Open BickboxxViewController.h and add this code before the @end line.

- (IBAction)bSound:(id)sender;
- (IBAction)eSound:(id)sender;
- (IBAction)aSound:(id)sender;
- (IBAction)tSound:(id)sender;

Your BickboxxViewController.h should now look like:

#import <UIKit/UIKit.h>
#import <AudioToolbox/AudioServices.h>

@interface BickBoxxViewController : UIViewController {
    CFURLRef        bNoteFileURLRef;
    SystemSoundID    bNoteFileObject;
    CFURLRef        eNoteFileURLRef;
    SystemSoundID    eNoteFileObject;
    CFURLRef        aNoteFileURLRef;
    SystemSoundID    aNoteFileObject;
    CFURLRef        tNoteFileURLRef;
    SystemSoundID    tNoteFileObject;
}

@property (readwrite)    CFURLRef        bNoteFileURLRef;
@property (readonly)    SystemSoundID    bNoteFileObject;
@property (readwrite)    CFURLRef        eNoteFileURLRef;
@property (readonly)    SystemSoundID    eNoteFileObject;
@property (readwrite)    CFURLRef        aNoteFileURLRef;
@property (readonly)    SystemSoundID    aNoteFileObject;
@property (readwrite)    CFURLRef        tNoteFileURLRef;
@property (readonly)    SystemSoundID    tNoteFileObject;

// The new code you added
- (IBAction)bSound:(id)sender;
- (IBAction)eSound:(id)sender;
- (IBAction)aSound:(id)sender;
- (IBAction)tSound:(id)sender;

@end

Close the file and open BickboxxViewController.m. Add the implementation to make the IBAction methods make the appropriate system sounds by invoking the AudioServicesPlaySystemSound method.

To play the “B” sound, the implemented method should make a call to AudioServicesPlaySystemSound and use the bNoteFileObject we created above. Add this after the property synthesis code:

- (IBAction)bSound:(id)sender {
AudioServicesPlaySystemSound (self.bNoteFileObject);
}

Add similar implementations for the “E”, “A” and “T” sounds as well.

For reference, the top of BickboxxViewController.m should look like:

#import "BickBoxxViewController.h" 

@implementation BickBoxxViewController

@synthesize bNoteFileURLRef, bNoteFileObject, eNoteFileURLRef,
eNoteFileObject, aNoteFileURLRef, aNoteFileObject,
tNoteFileURLRef, tNoteFileObject;

- (IBAction)bSound:(id)sender {
    AudioServicesPlaySystemSound (self.bNoteFileObject);
}

- (IBAction)eSound:(id)sender {
    AudioServicesPlaySystemSound (self.eNoteFileObject);
}

- (IBAction)aSound:(id)sender {
    AudioServicesPlaySystemSound (self.aNoteFileObject);
}

- (IBAction)tSound:(id)sender {
    AudioServicesPlaySystemSound (self.tNoteFileObject);
}

For the last piece of code, we need to clean up our mess so we don’t have memory leaks. At the bottom of BickboxxViewController.m, add these lines to your dealloc method:

- (void)dealloc {
    [super dealloc];
    AudioServicesDisposeSystemSoundID (self.bNoteFileObject);
    AudioServicesDisposeSystemSoundID (self.eNoteFileObject);
    AudioServicesDisposeSystemSoundID (self.aNoteFileObject);
    AudioServicesDisposeSystemSoundID (self.tNoteFileObject);
    CFRelease (bNoteFileURLRef);
    CFRelease (eNoteFileURLRef);
    CFRelease (aNoteFileURLRef);
    CFRelease (tNoteFileURLRef);
}

We’re done coding. Build and Go the project to make sure nothing is on fire. Your buttons won’t make any sounds yet. We’ll need to link our code to our interface.

Linking the buttons to the code in Interface Builder

Now that our code is done, we can link our buttons to our code. We’ll start with the “B” button link it with the bsound method. To do this, open up BickboxxViewController.xib.

Control+Click on the File’s Owner object so we can link our “B” button to our bsound.

Drag from the bSound in File’s Owner to the “B” button in the View.

An overlay should pop up. Choose Touch Down. The normal default is to execute the action when the finger is lifted from the button. We don’t want that. Soundboards don’t work that way. This will call the bSound IBAction method when the button is pressed down.

Do this linking with the rest of the buttons. When you’re done, Control+Clicking File’s owner should look like this.

Here’s a video of me using Bickboxx to practice for my opening act for Paul Oakenfold.

You’re done!

That’s it — you’re done! Compile and run this and you’ll be DJ-ing parties with Moby in no time.

Again, you can download the source from social coding site Github. Feel free to file issues here if the code needs fixing or enhancing.

Homework

Are you ready to apply your newfound knowledge? Solidify it with this extra credit assignment.

Your homework: Add a new button and a new sound to the project.

If there are any typos, problems, suggestions, or questions, let me know here in the comments.