ピアノ鍵盤に選択したコードが表示されるよ。レスポンシブ対応。(css+jquery)

  • 2019.04.05
  • css
ピアノ鍵盤に選択したコードが表示されるよ。レスポンシブ対応。(css+jquery)

cssで鍵盤を作りました!ってだけでなく、選択したコードが一発で表示されたら便利だねってことでコードが表示される仕組みも実装しました。

Advertisement

※ボタンを押すと音声も再生されるので注意してください

See the Pen
ZPooLZ
by yoneshi (@yoneshi)
on CodePen.

実際のWebサービスに組み込んだ事例はこちらで紹介しております。

1.css側

基本的にフレックスボックスで実装してます。

考え方としては、「全ての白鍵の横に黒鍵を置く+実際に存在しない黒鍵を消す」という流れで実装しました。白鍵要素の子要素に、隣に来る黒鍵要素を作成しています。

厳密には黒鍵と白鍵は等間隔では並んでいないのですが、一つずつ距離を調整するっていう作業が面倒だったので、そこら辺は手抜きです。

白鍵のサイズは下記で指定しています。

※white_keyクラスは別の箇所で使う必要があるため、実質的なサイズはkey_listクラスで指定しています。

今回widthは7.25%に設定していますが、この部分は、実装する鍵盤の数にあわせて修正しないと、無駄な余白が出てきちゃいます。

white_keyの子要素として、black_keyを作成し、サイズと鍵盤の位置を下記で指定しています。

実際の白鍵と黒鍵のサイズは「白鍵:23mm×150mm 黒鍵:11mm×95mm」らしいので、実際の黒鍵より太いのですが、、、Web上での実際の見た目と実装しやすさを考慮したということで、、、

あとは、いい感じに位置を調整した後に、存在しない黒鍵部分(ミ♯、シ♯)に、非表示にするクラスをつけました。

 

レスポンシブ対応です。

ピアノ要素をposition: fixed;にすると、スクロールしても画面下部に固定されつづけるみたいなこともできます。

2.jquery側

こっちはめちゃ単純です。

鍵盤に予めidを降っておき、コードの構成音に対応するidに何らかのクラスを付与するだけ。

付与するクラスにcssでバックグラウンドカラーを設定しておけば、コードの構成音が発色します。

3.音声の出力

こちらはTone.jsというライブラリを使用しています。

気になる方は下記のページを参照してください。

・基本の使い方の紹介

・ピアノ音源を使用する方法

 

以上、Web上でのピアノの実装についての紹介でした。

コピペで使えて、widthやheightを指定すればサイズのカスタマイズも出来るので、Web上でピアノ鍵盤を使って何かしたいときには参考にしてみてください。