ピアノアプリ(SwiftPiano)を作ろう!追記:より短いコードで書くと。

ピアノアプリ(SwiftPiano)を作ろう!」の追記です。
以前のバージョンはゴリ押しでコードを書きましたが、今回はそれをより効率的に短いコードにまとめてみました。以前のバージョンを参考に、今回のバージョンのものも作ってみてください!

データ

音と画像のデータはこちらからダウンロードしてください。

SwiftPiano

動画

文字と写真だと分かりにくいので、参考動画を撮りました。参照ください。

コード

今回は「Array」と「UIButtonのtagプロパティ」を使用して、より短いコードにまとめています。

let pianoKeys = ["C3", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B", "C4"]

音源は、上記Arrayにまとめています。
C3は0、C#は1、Dは2、、、、という順番(index?)が与えられています。

このArrayの中を取り出すのに、下記tagプロパティを使います。

let keynum = sender.tag

XcodeのInterface Builderで、各鍵盤の画像にそれぞれtag番号をあてがう必要があります。

ViewController.swiftに記述する全コードは以下の通り。


import UIKit
import AVFoundation

class ViewController: UIViewController {

let pianoKeys = ["C3", "C#", "D", "D#", "E", "F", "F#", "G", "G#", "A", "A#", "B", "C4"]
var audioPlayers:[AVAudioPlayer] = []

override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view, typically from a nib.

for key in pianoKeys {
let pianoSoundURL = NSURL(fileURLWithPath: NSBundle.mainBundle().pathForResource(key, ofType: "mp3")!)
let audioPlayer = AVAudioPlayer(contentsOfURL: pianoSoundURL, error: nil)
audioPlayer.prepareToPlay()
audioPlayers.append(audioPlayer)
}
}

override func didReceiveMemoryWarning() {
super.didReceiveMemoryWarning()
// Dispose of any resources that can be recreated.
}

@IBAction func playKey(sender: UIButton) {
let keynum = sender.tag
audioPlayers[keynum].currentTime = 0
audioPlayers[keynum].play()
}

}

tagプロパティの設定

ViewContriller.swiftにコードを入力し終わったら、Main.storyboardにいき、tagプロパティの設定をしましょう。

スクリーンショット 2014-10-07 22.15.25
C3の鍵盤を左クリックし選択、画面右上のネクタイみたいなアイコンをクリックして下の方にスクロールすると、Tagというところがでてきます。ここに「0」を入力。
これで、C3の鍵盤に、0というタグがあてがわれました。

スクリーンショット 2014-10-07 22.16.00
どうように、C#には1をあてがいましょう。
以下、Dは2、D#は3というふうに、C4までtagをあてがってください。

ViewControllerとMain.storyboardの連動

スクリーンショット 2014-10-07 22.16.54
C3の鍵盤を選択し右クリック、でてきた画面のTouch Downの行にある「+」のマークを左クリックし、クリックをしたまま写真のView Controllerのアイコンまでドラッグし、左クリックを離す。

スクリーンショット 2014-10-07 22.16.58
左クリックを離すと、playKeyというのがでてくるのでそれを左クリック。

スクリーンショット 2014-10-07 22.17.10
無事成功していれば、写真のように、Touch Downの行に、View Controller playKeyと表示されます。

同じことを、12鍵全部に行います。

以上!