ブラウザピアノ

　ピアノは、音域の広い楽器です。マウスで全音域の音がお楽しみ頂けます。
　Edgeの最新バージョンでは、PCのキーボード、マウスクリック、マウスオーバーで、全音域の音に対応していますので、Topページをご使用できます。⇒ Topへ

　キーボードで弾ける音域を水色と黒で図示しています。各音域を選択できます。

　このページは、次のサイトを参考にして作成させて頂きました。
・ピアノの鍵盤をCSSで描く。ピアノの鍵盤を描くのも容易ではありません。
　CSSでリストをグリッド状に並べる
　これからのCSSレイアウトはFlexboxで決まり！
・鍵盤をクリックした時に音を再生させる方法
　HTML5 Audio ピアノ制作:クリックで音を鳴らそう!
　Audio でサウンド再生
　なお、上記サイトでは" click "イベントで音が鳴るように紹介されていますが、本サイトではclickイベントを" mousedown "に変更(2018/Feb/24)。
・キーボードを押した時に音を再生させる方法
　iPad対応！HTML5 Audioで作るブラウザーピアノ
・key code
　キーコード一覧

　音のファイルは、楽器の推薦音域で音階毎に４分音符のmidiファイルをmidi-perlで作成し、次にそれらをWavePadで音量を増幅し、mp3ファイルに変換しました。

更新履歴
・2020年5月6日：マウスクリックで全ての音域の音を出せるように変更。
・2018年5月11日：マウスで全ての白鍵の音(ハ長調とイ短調)を再生可能にし、キーボーで、48個の白鍵を弾けるように追加。
・2018年3月27日：ピアノ音源ファイルの音量の増幅。音量調節を追加。

このページの訪問者数

(Since Mar/19/2021)

mike3 web siteの全アクセス数

(Since Dec/8/1996)