ブラウザピアノ

　ピアノは音域の広い楽器です。マウスで全音域の音をお楽しみ頂けます。マウスオーバーを選択すると白鍵盤の上にカーソルが載ると音が出ます。赤字で示した音はドになります。

　演奏の録音について　（2020年8月27日掲載）
　Windows10およびmacOS Mojave以降に標準搭載のPC画面の録画機能を使うと弾いた曲を録音できます。録画機能の詳しい事は各自でお調べ下さい。録画時、操作画面のマイクはオフにして下さい。キーボードを打つ音も録音されます。曲のファイルだけを取り出すには別途、ソフトが必要になります。

　新着ピアノ　（2020年8月15日掲載）
　下表の長調短調のペアーを15組それぞれ弾けます。調号による半音の上下を気にせず、演奏できます。
　表をクリックするとハ長調とイ短調の鍵盤が表示されます。

1♭

2♭

　キーボードで弾けるハ長調とイ短調の音域を水色と黒で図示しています。

　キーボードで弾けるイ長調と嬰へ短調の音域を水色と黒で図示しています。

　2020年7月10日に調を変更出来ようにして頂きたいとの要望がありました。

　この新作ピアノは、楽譜通りに弾けるように作成してありますので、主音の位置が変化します。他の方式として、主音の位置を固定したピアノを作成することも可能です。後者につきましては、今後の課題です。

　デモ演奏の動画を掲載。参考になればと思います。幅広い音域の音が同時に鳴っていることが確認できると思います。ピアノは即興で弾いています。

　演奏には JavaScript で書かれたプログラムを使用しています。

　他のブラウザ（MSIEやfirefox）でも、マウスオーバーで音を出すことはできますが、音が籠るのでお勧めできません。

　音源はWindowsに内蔵のものを使用しています。作成方法は、下にあります。

　他の音色(楽器)もあります。

楽器	名称	実際の音
	・チェレスタ
	・マリンバ
	・チューブラーベル	🔊NHKのど自慢の鐘の音
	・トランペット
	・バイオリン

画像は、次のサイトのものを使用させて頂きました。

　このページは、次のサイトを参考にして作成させて頂きました。
・調を変えて演奏するピアノは、次のサイトを参考にしました。
　調の種類
　if文の条件式が複数あるときのスマートな書き方

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

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

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

PR　 Mikeホームページ

寄せられたコメント
　とても、楽しかったです。（2020年9月23日21:27）

　自分のPCにダウンロードしたいのでが、方法がわかりません。どこなにダウンロード・インストールのボタンがあるのでしょうか？

Re: ご要望のボタンはありません。
このページの訪問者数

(Since Dec/22/2019)

mike3 web siteの全アクセス数

(Since Dec/8/1996)