ピアノアプリ(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鍵全部に行います。

以上!


ピアノアプリ(SwiftPiano)を作ろう!追記:より短いコードで書くと。」への9件のフィードバック

  1. Mike

    Hello Bick,

    I want to first say thank you for making these tutorials. I have tried to build the piano app using an array but I am getting an error.

    for the line : let audioPlayer = AVAudioPlayer(contentsOfURL: pianoSoundURL, error: nil)

    I am getting this error: fatal error: unexpectedly found nil while unwrapping an Optional value.

    Could you help me with this? What can I do? Thank you.

    返信
    1. admin 投稿作成者

      Hi, Mike. Thanks for your comment and sorry for my late reply. Unfortunately, I cannot figure out your problem. I tried my tutorials by myself and it worked…

      返信
  2. Takahashi

    私も上記のMikeさんと同様に

    let audioPlayer = AVAudioPlayer(contentsOfURL: pianoSoundURL, error: nil)のところで

    fatal error: unexpectedly found nil while unwrapping an Optional value.

    と出てしまいました。お手数ですが解決方法を教えていただきたいです。

    初心者で全然わからないのですが、よろしくお願いします。

    返信
    1. admin 投稿作成者

      Takahashiさま
      コメントありがとうございます。お返事が遅くなってしまい申し訳ございません。ご質問いただいた件、ちょっと私にも答えがわからないです、、、自分のチュートリアルをもう一回自分でやってみたのですが、エラーなくできてしまって。。。optional valueにnilがあるとのことなので、!とか?とかが怪しいとは思うのですが。。。

      返信
      1. Takachika

        こんにちは。勉強させて頂いてます!
        私も同じエラーがでてしまいました。。。が、解決できました。
        下記のkeyを”sound/\(key)”としたら動くようになりました。フォルダを指定しないといけないようです。
        変更前 let pianoSoundURL = NSURL(fileURLWithPath: NSBundle.mainBundle().pathForResource(key, ofType: “mp3”)!)
        変更後 let pianoSoundURL = NSURL(fileURLWithPath: NSBundle.mainBundle().pathForResource(“sound/\(key)”, ofType: “mp3”)!)

        他に解決策があればご教授いただければと思います。

        返信
        1. Nakatake

          私も同様のエラーが出たのですが、
          フォルダ指定?を行っても、解決できませんでした。
          (バージョンの違いですかね?)
          そこで、
          Xcode7 beta以降で実行されている方は以下の変更を推奨します。
          (ちなみに私は、Xcode7.2です。)
          let audioPlayer = AVAudioPlayer(contentsOfURL: pianoSoundURL, error: nil)
          を下記のように修正すると正常な動作を確認できました。
          let audioPlayer = try! AVAudioPlayer(contentsOfURL: pianoSoundURL)

          返信
  3. yone

    初めまして。
    bickさんのピアノアプリを作る動画を参考に、ピアノアプリを作ろうと思っています。

    bickさんのブログからダウンロードした音源の音質がすごく良かったです。
    私が自分で音源をmp3ファイルで作成したら、ノイズの音がひどかったです。
    そこで質問なんですが、bickさんはどのようにして音源を作成しましたか?
    swiftと直接関係のない質問ですいませんm(_ _)m

    返信
    1. admin 投稿作成者

      コメントありがとうございます!お返事遅く申し訳ございません。音源はGarageBandというDAWソフトで作成しました。作成といっても、GarageBandの音源をmp3で書き出しただけですが。。。ご参考になれば幸いです!

      返信

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です