How to create piano UI in Iphone?

Question

Hi,

I am newbei in creating such piano based UI application. I am developing an application in which i have to use Piano. How to create piano UI in Iphone? How to create it using Interface builder ? or is there any other way to create the piano?

I am in urgent need to create such UI,If any body has any solution or any useful code or any Link,which would be appreciated.

Thanks, Niraj

Answer 1

Version 1 Easier to code, not so elegant.

Start a view-based project in xcode, and use interface builder, editing MyProjectViewController.xib, to put together a series of buttons in shapes and colors that resemble an on-screen keyboard.

Edit MyProjectViewController.h and .m to add a bunch of methods with signatures like this:

- (IBAction) playMiddleC: (id) sender;
- (IBAction) playMiddleD: (id) sender;
- (IBAction) playMiddleE: (id) sender;

Now you can go back to interface builder, and right-click-drag each button to the File's Owner object (of type MyProjectViewController). When you do this, a menu pops up asking for which method to attach the button to - choose the appropriate method for that key.

Now add a sound file for each of the keys you want to play. For example, let's say you have a file called midC.caf (encoded in, say, linear PCM format, as one of the valid sound file formats). Copy that file into your project directory, and add it to the project by right-clicking (in xcode) on your Resources folder, and choosing Add > Existing Files.. and then choosing your sound file.

Next you need to add the AudioToolbox library as a dependency. Do this by right-clicking on the Frameworks folder, and choosing Add > Existing Frameworks.. and then browsing for the AudioToolbox library and choosing it.

Meanwhile, back in MyProjectViewController.m, add code like this:

#import <AudioToolbox/AudioServices.h>

// (Later...)

- (IBAction) playMiddleC: (id) sender {
  NSString* path = [[NSBundle mainBundle]
                    pathForResource:@"midC" ofType:@"caf"];
  NSURL* url = [NSURL URLWithString:path];
  SystemSoundID midC;
  AudioServicesCreateSystemSoundID((CFURLRef)url, &midC);
  AudioServicesPlaySystemSound(midC);
}

Hit Command-Enter to compile and run, and make some music!

Version 2 Slightly more elegant.

Programmatically construct a keyboard UI with one array for white keys, and another for black (since they'll have slightly different coordinates). I recommend using custom UIButton types with images for pressed and nonpressed versions of each key type (black, C/F, B/E, and A/D/G, which are middle white keys - I'm account for key indents here).

This would allow you to store pointers to these buttons in an array, and have a single method that could play the sound for any key, by also storing sound ID's in a corresponding array.

You might think you'd want to create the sounds programmatically, as they are somewhat mathematical in nature. But the AudioQueue services, which you would use to do so, are significantly more work to deal with than the above code, so I'd actually recommend just using sound bytes, even in an "elegant" version. It might even sound better that way, anyway.

By the way, your question makes it sound like you're thinking of this as a quicky and easy starter app, but I'm not so sure. Learning to develop iPhone apps is fun, but takes some serious time and effort to do well. If you're interested in starter app ideas, I'd suggest looking for things that exercise one new programming skill at a time, such as learning to work with the ubiquitous UITableView, or a quick app that lets you take a picture and attach it to an email, for example (that's easy because the iPhone SDK has great support for photo-taking and email-composing).

Have fun!

Answer 2

One way would be to take picture(s) of a piano keyboard and use the images as the starting point.

Another way would be to draw the keys in Photoshop or other app, in both the default and the key-pressed positions, and use those as the base.

Do a search on the App store and look at the different ways piano keyboards have been implemented. There are a few, and some look more realistic than others.

Doing a good representation of a piano keyboard isn't going to be easy, especially if you try to get the glossy look of the keys and create realistic movement via animation, but it is doable. At the very least, you should study Quartz 2D and possibly some CAAnimation.

Answer 3

Hi Niraj. I am trying to do a similar musical app. Can you help me? Maybe send me some example code to orientate me?

Answer 4

I did something very similar. I used normal buttons with the round corners and made each of them play an WAV sound. It works nicely!

Answer 5

Niraj, can you help with the problem where pressing a Black key which is layered above the White keys ends up playing multiple sounds instead of the single correct key?