2015年1月2日金曜日

絶対音感トレーニングアプリ開発記録.



引きこもりも,板についてきました.




さて,今日は音の高さを当てるアプリを作りました.
(途中です.)





要素は幾つか,できつつあります.

・ピアノの表示
 (ブログ,上に試しにおいてみました)
・ピアノ音源の作成
・ピアノの鍵盤クリックで音の出力

までできています.







すこし,まとめておこうと思います.



1)ピアノの表示


ピアノのcssとhtmlを編集しました.

便利な世の中です.


bloggerの上のところで試しに出してみましたが,

鍵盤にリンクを貼ると,鍵盤の表示が汚くなりました.

bloggerのcssの何かの要素とかち合っているのだと思います.

bloggerのテンプレートを変更することにより,きれいに表示できました.




2)ピアノ音源の作成


「ド」だとか「レ」,「ミ」等,単音をネット上で探したのですが,

うまく探せませんでした.(落ちているかもしれません)


何かに応用できるかもしれませんので,作ってみました.
以下の手順です.

(1)作曲ツール(studio ftn Score Editor)で例えば「ド」の音を作る.
(2)「ファイル」-「MIDIファイルの作成」でsmfファイル(midiファイル)を作る.
(3) (2)をmp3やwavに変換.(SMF to MP3 with ぼーか郎で変換しました.)
  (すばらしい世の中です)
(4)前後に空白があるので,audacityで切り取り.
  (便利ですね)

で,単純なピアノ音源(mp3やwav)ができました.


3)ピアノの鍵盤クリックで音の出力


これは少々,苦労しました.

audioタグを使って,マウスイベント(onclick)で音再生をやってみましたが,

音は出るもものの,タイムラグがあってストレスです.

ipadから再生すると,1回目がなかなか音が再生されない」をみつけて,

そのなかで,解決されている方がいらっしゃいました.

PreloadJSというのを使うようです.

(ajaxって言うんですかね.かっこいいですね.)




ですが,これをbloggerで使おうとしましたが,うまく行きません.

googleサイトに音声ファイルを置き,bloggerからそれを読み込もうと思ったのですが,






queue.loadManifest()

というところで,音声ファイルを先読みしますが,

違うドメインのファイルを読めません.(というか,今回知りました.)
(例えば,このサイトとか)






なので,googleサイトにhtml・javascript・css・音声ファイルを置いて,

実行しようと思いましたが,

何かの制約ですかね.「禁止されているタグがある」とかが,

でてきて実現できません.





そこで,別のフリーのサーバを探しました.
(fc2にしました.)





fc2ではPreloadJSを使う方法でピアノの鍵盤にidをふることにより,

音を出すことができました.







長かった・・・.


なんだか,仕事しているみたいですね・・・.


あっという間に時間が過ぎてしまいました.





逆に「ランダムに音を出し,鍵盤で正しい音を答える.」は

「これらの要素を組み合わせていく」なので,

それほど苦労はしないかとは思います.

(まだ,わかりません.)



もう少し,かかると思います.









追記:プロトタイプはできました.





今日の音符読み:1分07秒

とくにありません.




にほんブログ村 クラシックブログ ピアノ初心者へ
にほんブログ村


0 件のコメント:

コメントを投稿