ブラウザピアノ

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

　コメントやご要望などは、末尾のコメント欄からできます。☛ コメント欄

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

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

1♭

2♭

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

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

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

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

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

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

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

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

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

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

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

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

PR　Mikeホームページ

寄せられたコメント
＞面白いねえ (2021年3月7日)

＞あの、同時に複数の音が出ません。最大4つまでなんですね・・・もうちょい増やせませんか？ (2021年2月27日)

  Re: コメントありがとうございます。残念ですが、確実に同時に出せる音の個数を言うことは、控えさせて下さい。２個か３個まででしたら、まあまあ、同時に音が出るのではないかと思われます。javascriptでは、キーボードからの入力信号の入口が１個だけなので、複数の音を同時に出せる音を増やすのは、困難かと思われます。別途アプリケーションを作成すれば、対応できそうな気がしますが、アプリケーションの作成はご容赦下さい。 (2021年2月28日)

　関連事項６点入力。PCのキーボードが６文字の同時入力に対応しているか確認する方法。

＞いいねwwwwwwwwwwww (2021年2月16日)

＞音域選択グッドです！ (2021年2月13日)

＞キーの配置を変えれるようにしてほしい！(⋈◍＞◡＜◍)。✧♡ (2021年2月8日)

  Re: 申しわけありません。現況でご使用下さい。

＞同時に複数の鍵盤を弾こうとすると音が出なくなります。対策お願いします。 (2021年1月9日)

  Re: 対策を講じました。１）プログラムの改良。２）音源ファイルのサイズを半分にしています。☛ 対応ピアノ

  Re: 状況が改善するかどうか分かりませんが、ブラウザは、Google Chromeを使用してみて下さい。なお、ブラウザは最新版を使用して下さい。 (2021年1月14日)

＞ありがとうございまこめじす。「きよしこの夜」をはもるのに下の部の音を確認するのにとても調法いたしました。こんな素晴らしいページに出会えましたことに感謝いたします。（2020年12月7日）

＞「シ・シ・シ・ソ#ミー」がやりたくて来ました。とっても、楽しかったです。（2020年11月21日）

＞いいね。（2020年10月24日）

＞曲を作るときに役立っております！（2020年10月24日）

＞とても、楽しかったです。（2020年9月23日21:27）

＞ PCで作業中、CMで一瞬流れた曲の音を取りたいなんて時も間に合う機動力。ピアノの場所まで移動したり別のアプリを立ち上げるのでなく、ブラウザ上ですぐに音を取れるのが本当に良いです。こういうのを探していました。感謝！（2020年8月24日）

＞ページ表示後すぐ音が出せるようになったのがすごく嬉しいです。（2020年8月19日）

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

  Re: ご要望のボタンはありません。