How to create piano UI in Iphone? [closed]

Question

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

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 2

You can get piano key sounds from here: http://www.sonicspot.com/news/free-musical-instrument-samples.html . The files are quite big, you can cut them with Audacity and export to .wav

Answer 3

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 4

Thanks for replying...

I am almost done with developing UI of piano.

I have used programmatic approach to create black and white keys.

CGFloat buttonWhitePosX = 2.0; //white button start position
for(int i=0;i<8;i++){ //8 keys in one octave
    CGFloat buttonWhitePosY = 105;
    CGFloat buttonWhiteWidth = 57;
    CGFloat buttonWhiteHeight = 190;

    UIButton *buttonWhite = [[UIButton alloc] initWithFrame:CGRectMake(buttonWhitePosX, buttonWhitePosY, buttonWhiteWidth, buttonWhiteHeight)];
    buttonWhitePosX = buttonWhitePosX + WHITE_BUTTON_SPACE + buttonWhiteWidth;
    [buttonWhite setBackgroundImage:whiteImage forState:UIControlStateNormal];
    [buttonWhite addTarget:self action:@selector(pressButtonWhiteTouchDown:) forControlEvents:UIControlEventTouchDown];

    buttonWhite.tag = i;
    [buttonWhite setBackgroundImage:whiteImageHighlighed forState:UIControlEventTouchDragInside];
    [self.view addSubview:buttonWhite];
    [buttonWhite release];

}

Same way for black keys using different coordinates.

Also I am able to play sound on key pressed Using AVPlayer.(on selector touch down)

So far so good but when user slides across the keys, piano should play respected sound.

To achive this is tried with

1) Used UIControl events for UIButton. DragEnter, drag exit, drag inside. But it will not give me which button is pressed exactly, as drag exit location is way outside the drawn button

2) Used touchesBegan, touchesEnded, touchesMoved of main view(in which black and white keys are placed).

-(void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event{
    UITouch *touch = [[event allTouches] anyObject];
    CGPoint touchLocation = [touch locationInView:touch.view];
    currentView = [self.view hitTest:touchLocation withEvent:nil]; //get top view
    if(currentView != self.view){ //check current view is main view, do nothing
        if(currentView == prevView){ //check current view is prev view, keep highlight image
            currentView.backgroundColor = [UIColor colorWithPatternImage:whiteImageHighlighed];
        }else{ //view changed, change image and play sound
            prevView.backgroundColor = [UIColor colorWithPatternImage:whiteImage];
            currentView.backgroundColor = [UIColor colorWithPatternImage:whiteImageHighlighed];
            [self pressButtonWhiteDown1:currentView.tag];
            prevView = currentView;
        }
    }
}

In this approach it gives wrong view when user slides on white keys and comes across X position of black keys (as black key is on top of white key in main view):

alt text http://img215.yfrog.com/img215/1720/pianohelp.png

Is there any other approach or something I/m doing wrong in it. please guide me.

Is it possible to get exact view from touch point?

Thanks.

Answer 5

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.