音楽を奏でるキーボードって需要あるよね？

ちょうど2年前のことですが当時、専門学校に通っていた僕は唐突に何かWEBサービスを作ってみたい！という衝動に駆られました。

WEBサービスを作るといってもWEBサービスには色々と種類があり、王道のSNS系のアプリとか、すぐに今季のアニメが閲覧できるサイトとか色々考えましたが最終的に僕は音楽に目をつけました。

僕が扱える技術はHTML、CSS、JSでした。その中でHTML5には面白い機能があり、<audio>タグを使うことで曲を流すことができます。

ただ、ユーザーとしては意図せず勝手に音楽が流れると邪魔になるため、ユーザーに音楽を流していいかの確認を促してから音楽が流れる仕様にするのが大半だと思います。エンタメ系のサイトで使われている印象です。

それはさておき、曲を流すだけでは物足りないと感じたのでHTMLの相棒であるJSも使用することにしました。このJS＋HTML5の相乗効果によりあることができるようになります。

そう！なんとPCのキーボードでドレミを鳴らすことができるのです！！
凄くないですか！？キーボードを鍵盤にして鳴らせるんですよ。

最早、音楽ALL5間違いなしです！（※個人的な感想です）
仕組みとしてはまずJSでキーイベントを操作します。
キーイベントは下記3種類です。
＝＝＝＝
keydown
└キーを押した時に発生
keypress
└ShiftやAlt、Ctrlなどの修飾キーではない場合に発生
keyup
└ユーザーがキーを離した時に発生
＝＝＝

次にキーボードにはそれぞれ対応する値があるのでそれを取得します。
そしてそのキーの値とキーイベントを活用して例えば「H」のキーを押したときに「ド」の音がなるように設定します。これを各キーごとに対応させていくことでキーボードを鍵盤化できます。

このWEBサービス？を先生に見られ、「何作ってるの？」と言われたため、正直に「キーボードを鍵盤にしました！」と声高らかに宣言したところ
「えっ、それ何の需要があるの？」と正論で返されて我に返った日はいい思い出ですw

何はともあれキーイベントの操作は何らかの役には立つと思うので興味のある方は下記記事とか参考にしてみるといいと思います。

https://techacademy.jp/magazine/19613