ブラウザピアノ

メトロノーム

BPM

100

　ピアノは音域の広い楽器です。
　左シフトキーを押すと演奏音域が左側へ、右シフトキーを押すと演奏音域が右側へ、それぞれ移動します。
　マウスでも演奏音域を選択できます。
　マウスオーバーを選択すると白鍵盤の上にカーソルが載ると音が出ます。赤字で示した音はハ長調のドになります。
　旧バージョン

　マウスやキーを押している間、音が鳴り続けます。音はグランドピアノを弾いて収録しました。試作のピアノができましたので掲載致します。ペダル機能を追加しました。なお、ファイルの読み込みに時間掛かります。通常の演奏には不向きかと思います。今後、対応ピアノを作成する予定でいます。
　次の３種類から選択できます。　☞ 33鍵盤　　 58鍵盤　　 88鍵盤

　PWA対応について　（2021年8月26日掲載）
　ブラウザピアノがアプリケーションのように使用できます。ダウンロードする必要はありません。オフラインでピアノが弾けます。PWA対応のページで以下の操作をするだけです。
　⇒ PWA対応サイト
　Google chromeで、ブラウザ右上にあるメニューバーを押すか、ショートカットキー（ Alt ＋ F、Alt ＋ E）をして、メニューバーを開き、⇒ その他のツール ⇒ ショートカットを作成 ⇒ ショートカットを作成しますか？で、ウィンドウとして開くにチェックを入れて、作成をクリックするとディスクトップに鍵盤のアイコンが表示されます。
　マイクロソフトedgeでは、ブラウザ右上の…をクリックしてメニューバーを表示し、⇒ アプリ ⇒ このサイトをアプリとしてインストールでインストールを行う。
　なお、通常のアプリとは異なります。もしも、音が出なくなった時は、再インストールして下さい。

　演奏の録音について　
　PCの設定の変更が必要ですが、Windows 10で、演奏の録音が可能です。次のサイトに設定方法が紹介されています。⇒ PCで内部音声を録音する方法（2022年3月24日掲載）

　新着チェレスタ　

※ 演奏音域を５オクターブ半に拡張しました。 ☛ 新チェレスタ（2021年7月20日掲載）

　新着ピアノ　

　軽量版は廃止しました(2023年1月6日)。

※ 楽譜付きのピアノです。ピアノ初心者の練習に最適です。「よろこびの歌」、「チューリップ」、
「かえるの合唱」の３曲があります。⇒ 楽譜付きピアノ
※ 音の高さ(ピッチ)を選択できます。 ☛ 432、440、448Hzブラウザピアノ（2021年6月21日掲載）
※ 音の長さを選択できるピアノ。８分音符、４分音符、２分音符、全音符の４つです。⇒ 音の長さを選択できるピアノ （2021年6月14日掲載）

※ ピアノは音域の広い楽器です。音域の広さを生かす目的で当ピアノを作成しました。下表の長調短調のペアーを15組それぞれ弾けます。調号による半音の上下を気にせず、演奏できます。（2020年8月15日掲載）
　表をクリックするとハ長調とイ短調の鍵盤が表示されます。なお、Firefoxには対応していません。

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

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

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

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

　他の音色(楽器)　

楽器	名称	楽器	名称	楽器	名称	楽器	名称
	・ピアノ		・チェレスタ		・マリンバ		・チューブラーベル NHKのど自慢の鐘の音
	・トランペット		・バイオリン		・ドラム^新着 47種の楽器

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

　プログラムについて　
　プログラム言語が改良されたのと、不具合を改良しなければならないので、対応のためにプログラムを見直しています。それらの経過を書き留めておきます。 ☛☛☛

　参照サイト　
　このページは、次のサイトを参考にして作成させて頂きました。
・調を変えて演奏するピアノは、次のサイトを参考にしました。
　調の種類
・ピアノの鍵盤をCSSで描く。ピアノの鍵盤を描くのも容易ではありません。
　WEB Piano – HTML5 Audioでピアノを作る(2021/02/15)
・鍵盤をクリックした時に音を再生させる方法
　Audio でサウンド再生
　なお、上記サイトでは" click "イベントで音が鳴るように紹介されていますが、本サイトではclickイベントを" mousedown "に変更(2018/Feb/24)。
・キーボードを押した時に音を再生させる方法
　iPad対応！HTML5 Audioで作るブラウザーピアノ
・if文の条件式が複数あるときのスマートな書き方
・HTMLでラジオボタンを作る簡単な方法(2021/Feb/12)

　音源　
　音源はWindowsに内蔵された音源を使用しています。詳細は分かりません。音のファイルは、楽器の推薦音域で音階毎に４分音符のmidiファイルをmidi-perlで作成し、次にそれらをWavePadで音量を増幅し、mp3ファイルに変換しました。

　更新履歴　
・2021年8月4日：音再生の不備を修正。取り急ぎ、ピアノだけ。
・2021年6月14日：音の長さを選択できるピアノを掲載。
・2021年2月24日：左右のシフトで演奏音域を左右に移動できるように改良。
・2021年2月12日：ピアノの演奏音域をマウス選択できるように改良。
・2020年10月28日：トランペットとバイオリンを追加。
・2020年8月15日：30種類の長調短調を広い音域で弾けるピアノを作成。
・2020年5月6日：マウスクリックで全ての音域の音を出せるように変更。
・2018年5月11日：マウスで全ての白鍵の音(ハ長調とイ短調)を再生可能にし、キーボーで、48個の白鍵を弾けるように追加。
・2018年3月27日：ピアノ音源ファイルの音量の増幅。音量調節を追加。

PR

演奏のデモ(youtube)　
Mikeホームページ

　ピアノの使用　
　音源のyoutubeなどでの使用は可能です。なお、音源の出所を明記して頂ければ幸いです。

　コメント　
　コメントは匿名でできます。⇒ コメント

　新着サイト　
　生物最重要語リスト
　略語検索

このページの訪問者数

(Since Dec/22/2019)

mike3 web siteの全アクセス数

(Since Dec/8/1996)