iPhone Dev Sessions: Create a Drum App

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.

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…

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.

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.

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.