ピアノアプリ(SwiftPiano)を作ろう!4. 音が出るコードを書く(まずは、ドの音だけ)

ピアノアプリ(SwiftPiano)を作ろう!3. ピアノの画面を作る」の続き。
いよいよコードを書いていきます!

※2014年10月6日追記
動画撮影しました。ブログだと説明しきれない所などあったので、ぜひご確認ください。
swiftpiano_movie

※2014年10月7日追記
短いコードで書くバージョンも載せました!
https://bick.xyz/swiftpiano_shortversion/

4. 音が出るコードを書く(まずは、ドの音だけ)

まずは、ドの音を出せるように

スクリーンショット 2014-10-03 11.47.34
画面左側、ViewController.swiftを選択。
なんかコードが書いてある画面がでてきます。

スクリーンショット 2014-10-03 12.11.43
赤く囲っている部分を追記してください。

import AVFoundation

var pianoSoundC3 = NSURL(fileURLWithPath: NSBundle.mainBundle().pathForResource(“C3”, ofType: “mp3”)!)
var audioPlayerC3 = AVAudioPlayer()

audioPlayerC3 = AVAudioPlayer(contentsOfURL: pianoSoundC3, error: nil)
audioPlayerC3.prepareToPlay()

です。

スクリーンショット 2014-10-03 12.05.35
画面左側、Main.storyboardを選択。
画面右上、蝶ネクタイみたいなボタンをおしてください。
すると、Main.storyboardの画面と、ViewController.swiftの画面を同時に表示させることができます。

スクリーンショット 2014-10-03 12.06.16
Main.storyboardとViewController.swiftを連動させます。
C3の鍵盤を左クリックで選択、左クリックをおしたまま、controlキーをおす。
左クリック、controlキー、どちらもおしたまま、右側ViewController.swiftへドラッグ。
そのまま、写真の位置まで持っていって、左クリックを離す。
と、↓こんなんが表示されます。

スクリーンショット 2014-10-03 12.06.39
ConnectionをActionに、
NameをC3に
TypeをUIButtonに、
EventをTouch Downにして、
Connectをクリック。

スクリーンショット 2014-10-03 12.07.27
そしたら、こんなコードが追加されますね!

スクリーンショット 2014-10-03 12.07.52
さらに、こうしてあげましょう。

audioPlayerC3.play()

を追記します。

これで、一度左上の再生ボタンを押して、ビルドしてみてください。
C3のボタンを押すと、ドの音が再生されるはず!

でも、一度おしたら、再生が終わるまで、
C3ボタンを押したら押しただけ、音がでて欲しいですよね。

ボタン押したら何度も音が再生されるように

スクリーンショット 2014-10-03 12.14.19
こうしてあげましょう。

audioPlayerC3.currentTime = 0

とすることで、毎回、頭出しで音源を再生するようになります。
これでドの音はOK!全部の音をだせるようにしましょう。

次は、「5. 全鍵盤分、”4. 音が出るコードを書く”の作業を繰り返す。」です。