音量  ↓   ↑ 

 ピアノは、音域の広い楽器です。マウスで白鍵の52個の音(ハ長調とイ短調)をお楽しみ頂けます。

 キーボードで弾ける音域を水色と黒で図示しています。各音域を選択できます。fire foxでは、音が出せないキーがあります。


 fire fox では、?キーを押すと検索ボックスが出ます、Enterキーを押すと元に戻ります。
 なお、Google Chrome では、マウスオーバーで音が出せるようにしています。fire foxでも、音は出せるのですが、マウスを速く動かすと音が籠りますのでお勧めできません。デモ演奏の動画を見て頂ければ、様子が分かります。
 幅広い音域の音が同時に鳴っていることが確認できると思います。ピアノは即興で弾いています。連弾曲や2台ピアノ曲の作曲のツールとして使えそうですね。

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

 音源は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ファイルに変換しました。

動画とBGMのPR
 BGMは、RolandのFA-08で即興で弾いて自作しています。
・海に泳ぎだすハクチョウ(動画)♬
 海に泳ぎだす4羽のオオハクチョウ。川から海に泳ぎだすシーンをはじめて見ました。画像をクリックするとYouTubeで動画が再生されます(2/23掲載)。


・ハクチョウの羽づくろい(動画)♬
 白鳥台セバット。オオハクチョウが器用に羽づくろいをしていました。画像をクリックするとYouTubeで動画が再生されます(2/23掲載)。


・水面を舞い泳ぐハクチョウ(動画)♬
 4羽のハクチョウが舞うかのように水面をゆっくりと泳いでいました。BGMは自作です。画像をクリックするとYouTubeで動画が再生されます(2/20掲載)。


・降りしきる雪の中、氷上のオオハクチョウ(動画)♬
 降りしきる雪の中、凍結した沼の氷上に佇むオオハクチョウ。雪景色も素晴らしい。正に北海道という感じです。画像をクリックするとYouTubeで動画が再生されます(2/16掲載)。


・桂木観音展望台で撮影した日の出の動画です。BGMは、交響曲風な曲です。画像をクリックするとYoutubeで動画が再生されます。


・降りしきる雪
 2018年12月1日。降りしきる雪の中、函館本線赤井川駅に到着。特急列車の待ち合わせ。画像をクリックするとYoutubeで動画が再生されます。


・土肥港から、南アルプスの歌声
 合唱曲風のBGMです。画像をクリックするとYouTubeで動画が再生されます(1/21掲載)


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

このページの訪問者数

(Since Jan/10/2018)

life web siteの全アクセス数

(Since Dec/8/1996)



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



(2016年7月13日掲載。2019年2月25日更新)
メール
Copyright 2016-2017. MiKe All rights reserved.