欲しいアプリは自分で作る!

Power Platform や Azure などを利用して作成した業務アプリや趣味アプリなどをご紹介します。

PowerAppsでピアノ演奏を録音&再生するアプリを作る その①

はじめに

自宅にある電子ピアノには録音機能がついていて、最近では息子の「あの曲録音して~」という無茶振りに四苦八苦しているのですが、そういえばこの録音再生機能ってどういう仕組みなのかな~と思い、PowerAppsで再現してみることにしました。

といっても実際に音声を録音するのではなく、弾いた鍵盤の種類とそのタイミングを記録する方法を検討。結果的に他の業務に応用できそうな気配がしたので、記事にしてみました。

ということで、その①では準備段階として、タップしたら音が鳴る、ただのピアノを作ってみます。

 

 

実現方法

利用する主なパーツ

鍵盤を模した四角形と、音を鳴らすオーディオのみです。

  

制御方法

四角形をタップしたら、該当のオーディオコントロールを再生するだけです。

 

作り方

1. 音を用意し、取り込む

オーディオファイルを鍵盤の数だけ用意します。今回は、低いド~高いドまでの13音(黒鍵含む)を用意しました。

f:id:jn-kodama:20181219114931p:plain

使う音


最初は個人利用フリーの音源をWebから探して取り込んだのですが、なんか再生が遅延するなーと思ったら、オーディオファイルのサイズと再生遅延が比例することが判明したため(ながちんさん、情報提供ありがとうございました!)、ピアノの音色は諦めて自分で音を作成することにしました。

今回は、Audacityという無料の音声編集ソフトを用いて、0.5秒で振幅0に減衰する正弦波を13音作成し、mp3形式で保存。

各音の周波数は以下を参照しました。

https://tomari.org/main/java/oto.html

f:id:jn-kodama:20181219112334p:plain

正弦波作成画面

1ファイルあたりおよそ3~4KBとなりました。

f:id:jn-kodama:20181219115254p:plain

 

 

作成したオーディオファイルを、PowerAppsのアプリ編集画面から[ファイル]→[メディア]→[オーディオ]の画面から取り込みます。

f:id:jn-kodama:20181219113309p:plain

取り込む画面

取り込みました。ファイル名がそのままオーディオ名となります。

オーディオ名はこの後の設定作業で利用しますので、分かりやすい名前にしてから取り込むと良いかと思います。

f:id:jn-kodama:20181222234332p:plain

取り込んだ画面

 

2. 四角を並べる

13個の四角形をこんな感じに並べました。サイズは適当です。

(画面一番上に半分くらい見えている黒鍵(高いド#)は見栄えを良くする為に配置しただけのダミーボタン)

f:id:jn-kodama:20181219115838p:plain

 

ちなみに、四角形はPowerPointの図形のようにグルーピング(複数選択してCtrl+g)しておくと、変形等が楽になります。

f:id:jn-kodama:20181222203229g:plain

 
3. オーディオコントロールを並べる

挿入タブ→メディア→オーディオで追加します。

演奏時にこれ自体をタップするわけではないので、設定が終わったら非表示でOK。

f:id:jn-kodama:20181222203835p:plain

 

追加した各オーディオコントロールの"Media"欄に、先ほど取り込んだ各オーディオファイル名を入力します。

また、四角形をタップした時点で再生されるよう、"AutoStart"欄に各々変数を埋め込んでおきます(ここではplay+音名の変数を命名)。四角形をタップした際に変数をtrueに書き換えることで、音を鳴らすという仕組みです。

f:id:jn-kodama:20181222205844p:plain

 

この設定を、各オーディオコントロールに対して実施します。ちょっと面倒くさい。

 

4. 四角をタップしたら、該当のオーディオコントロールが鳴るようにする

3.で各オーディオコントロールの"AutoStart"に埋め込んでおいた各変数を、四角形をタップしたタイミングで書き換えます。

"OnSelect"に、3.の変数をtrueにし、直後にまたfalseに戻す処理を追加します。

f:id:jn-kodama:20181222210711p:plain

 

この設定を、各四角形に対して実施します。ちょっと面倒くさい。

なお、"AutoStart"は、trueになった時点で音が最後まで再生され、直後にfalseにしても音は止まらないようです。逆に、falseに戻しておかないと、変数がtrueのままとなり、2回目以降音が鳴らなくなりますのでご注意ください。

 

5. 同じ音を連続タップしたら再生途中でももう一度最初から再生するようにする

4. まででほぼ完成なのですが、このままだと同じ鍵盤を連続でタップした際に、音が鳴らないことがあります。言葉では説明が難しいので図化してみました。

f:id:jn-kodama:20181222212302p:plain

 

この現象は、鍵盤をタップした際に該当のオーディオコントロールをリセット処理することで回避できます(ただし処理がちょっと重くなる)。

方法は、先ほどの変数を書き換える前にReset(オーディオコントロール名)を行うだけです。

再生中かどうかを判定して再生中のみReset処理を行えば、もうちょい軽くなるのかもしれませんが、判定方法が分からないため一律Resetしました。

f:id:jn-kodama:20181222212451p:plain

 

あとは、使用するAutoStart用変数をアプリ起動時に初期化して、完成です。

f:id:jn-kodama:20181222213005p:plain


こんな感じで動きます。

ちなみにこの時はピアノの音を利用していました。

※動画はAndroidで実行したものです。今のところ、iOSでは再生遅延が大きく、残念ながらまともに遊べません。
 

 

まとめ

その①では、四角形とオーディオコントロールのみのシンプルな構成でピアノ演奏アプリを作成しました。

その②では、ここで作成したピアノに録音&再生機能を追加してみます。

 

その② ↓

jn.hateblo.jp