音量  ↓   ↑ 

【お願い】 全メーカーで調べてはいませんが、PCメーカーの違いで音が籠ることが判明しました。HPの法人向けPCをご使用の方は、HP Sure Click Secure Browserをご使用下さい。

 ピアノは、音域の広い楽器です。マウスで白鍵の52個の音(ハ長調とイ短調)をお楽しみ頂けます。マウスオーバーを選択すると白鍵盤の上にカーソルが載ると音が出ます。

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


 デモ演奏の動画を掲載。参考になればと思います。幅広い音域の音が同時に鳴っていることが確認できると思います。ピアノは即興で弾いています。連弾曲や2台ピアノ曲の作曲のツールとして使えそうですね。

 演奏には JavaScript で書かれたプログラムを使用しています。JavaScript では、ミリ秒単位でキーの打刻状況を記録することができ、それらの記録を元にmidiファイルを作成することも可能だと思われます。midiファイル作成は今後の課題になりそうです。

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

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

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

楽 器
 名 称
実際の音
・チェレスタ
・マリンバ
・チューブラーベル🔊NHKのど自
慢の鐘の音
・リードオルガン
・バイオリン
画像は、次のサイトのものを使用させて頂きました。

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

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

更新履歴
・2018年5月11日:マウスですべての白鍵の音(ハ長調とイ短調)を再生可能にし、キーボーでは、2オクターブとハ長調を弾けるように変更。
・2018年3月27日:ピアノ音源ファイルの音量の増幅。音量調節を追加。



(2016年7月13日掲載。2018年11月1日更新)
コメントやメール
(匿名可) Copyright 2016-2017. MiKe All rights reserved.