🎹 ブラウザピアノ
鍵盤の文字
a
Z
s
X
C
f
V
g
B
N
j
M
1
k
Q
,
2
l
W
.
E
/
4
:
R
\
5
]
T
 
Y
 
7
 
U
 
8
 
I
 
9
 
O
 
P
 
-
 
@
 
^
 
[
 
マウスオーバー  音量:
・ピアノは音域の広い楽器です。 左シフト キーを押すと演奏音域が左側へ、 右シフト キーを押すと演奏音域が右側へ、それぞれ移動します。
赤字で示した音はハ長調のになります。
・ピアノの音量は、演奏中でも半角/全角を押すと小さくなり、Backspaceを押すと大きくなります。
・メトロノームは上のボタンをクリックすると表示されます。を押すと演奏音域番号が表示され、音域を選択できます。
マウスオーバーを選択すると白鍵盤の上にカーソルが載ると音が出ます。
・鍵盤の文字を消去できます。
・遅くなりましたが、右シフトキーが使用できるようにプログラムで対応しました。効かない時はページを更新(再読み込む)して下さい。

 新作ピアノ 

3オクターブに対応したピアノです。Pure CSS3 Pianoを利用しています。演奏音域は固定です。初代ピアノを再掲載しました。 ⇒ 初代ピアノNew(2024年12月7日掲載)

midiキーボードが使えるピアノを作成しました。 ⇒ midiキーボードNew(2024年11月4日掲載)


鍵盤の大きなピアノ
 ピアノの鍵盤サイズを大きくしたピアノです。⇒ 🎹

3和音を弾けるピアノ
 制約がありますが、3和音を弾けるピアノを試作しました。3種類あります。
  ① ⇒ Windows日本語106と108/109キーボード
  ② ⇒ A4ノートPC用
  ③ ⇒ その他のキーボード

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

楽譜付きのピアノ
 ピアノ初心者の練習に最適です。「よろこびの歌」、「チューリップ」、「かえるの合唱」の3曲があります。⇒ 🎹

432、440、448Hzブラウザピアノ
 音の高さ(ピッチ)を選択できます。 ⇒ 🎹(2021年6月21日掲載)

音の長さを選択できるピアノ
 8分音符、4分音符、2分音符、全音符の4つです。⇒ 🎹 (2021年6月14日掲載)

ピアノは音域の広い楽器です。音域の広さを生かす目的で当ピアノを作成しました。下表の長調短調のペアーを15組それぞれ弾けます。調号による半音の上下を気にせず、演奏できます(2020年8月15日掲載)
 表をクリックするとハ長調とイ短調の鍵盤が表示されます。なお、Firefoxには対応していません。
01#2#3#4#5#6#7#1♭2♭3♭4♭5♭6♭7♭
長調嬰へ嬰ハ変ロ変ホ変イ変ニ変ト変ハ
短調嬰へ嬰ハ嬰ト嬰二嬰イ変ロ変ホ変イ

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

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

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

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

 旧バージョン 
 メトロノームはありません。⇒ 旧バージョン

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

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

 新着チェレスタ 

演奏音域を5オクターブ半に拡張しました。⇒ 🎹(2021年7月20日掲載)

 他の音色(楽器) 

楽 器
 名 称
楽 器
 名 称
楽 器
 名 称
楽 器
 名 称
・ピアノ・チェレスタ・マリンバチューブラーベル
 NHKのど自慢の鐘の音
・トランペット・バイオリン・ドラム新着
 47種の楽器
画像は、次のサイトのものを使用させて頂きました。☛ 楽器の画像

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

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

 音源 
 音源はWindowsに内蔵された音源を使用しています。詳細は分かりません。音のファイルは、楽器の推薦音域で音符毎に4分音符の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)