音感養成ソフトを作りました。ランダムに鳴る音を聴いてドレミを当ててください。とりあえず鍵盤を３つ以上選んで「トレーニングをはじめる」をタップしてみましょう。
↓お試しください↓
音感トレーナー ver.20181206
・鍵盤をチェックして出題範囲を設定します。音を３つ以上選んでください。
・トレーニングを始めるとチェックした音がランダムに10問、出題されます。
・音を聴いて鍵盤をタップして解答してください。
音感養成ソフトを作りました
前回「自作ソフトを作ろう！」ということで絶対音感ソフトを作った投稿をしました。
当時作ったソフトはすでに使えなくなってしまったので、今回リメイクしました。スマホにも対応しています。
いつでもどこでも聴音練習できます
「習うより慣れろ」ということで、これでいつでもどこでもスマホで「ポンッ」と音が出て「音当てクイズ」ができるようになりました。
とりあえず今回は基本機能のみ作りました。今後折を見てバージョンアップしていこうと思っています。
うまく操作できない場合は こちら をひらいてみてください。
ブラウザでも動くHTML5 Canvas
この音感養成ソフトはAdobe AnimateCCのHTML5 Canvasパブリッシュ機能を使って制作しました。言語はJavaScriptです。仕様としてはCreateJSという種類になるらしいです。
実は私、まともにプログラムを教わったことがないので本を参考にしたり、ネットでサンプルをいろいろ見たり、とりあえずアプリケーションで作りながら動かしてなんとかここまでたどり着いた感じなんですが、今回のHTML5Canvasというのは書いたコードが丸見えなんです。HTMLをソースを見るとところどころ日本語まじりのコメントなどもそのまんま読める状態でアップされちゃうんですね。
まあ好き好んでコードを開いてみてやろうなんていう方はそうそう居ないし自意識過剰だと思いますが、私の場合は基礎がない分、変数やファンクションの命名とか超テキトーにやってるし、書く順序もとっちらかっててお恥ずかしい限りなのです。
しかしながらブログにパッと載せられて、作ってすぐに公開できるのはとても魅力的ですよね。おまけにスマホ対応？！。すばらしい技術です。
今日は絶対音感シリーズ、昔の企画のリバイバルという形でこの技術を使いましたが、とても良い勉強ができました。ゲームなんかも作れそうな手応えバッチリです。
情報が少ない（特に日本語の）
とはいえ、今回の制作にあたりAnimateCCの情報の少なさには参りました。作っていくうちにJavaScriptとかCreateJSというキーワードでゲットした情報がそのまま転用できることに気づいてかなり助けられましたが、これまで私がAnimateCCで使ってきたActionScript3.0とはかなり勝手が違っていて初めはそうとう焦りましたね。
「AnimateCCでHTML5ができる」などと言われて、今まで作ったアプリもボタン一つでHTML5に変換できるものだと思っていたら大間違い。結局はじめから全部JavaScriptで書かなければ動きませんでしたよ。
まとめ：みなさんも使ってみてください
話を戻して、音感養成ソフト。単純すぎて面白味も何もありません、が、これで結構やってみると難しいし、正解できると嬉しいです。
ぜひ、みなさんも使ってみてください。
