このページは、次のサイトを参考にして作成させて頂きました。
・調を変えて演奏するピアノは、次のサイトを参考にしました。
調の種類
if文の条件式が複数あるときのスマートな書き方
・ピアノの鍵盤をCSSで描く。ピアノの鍵盤を描くのも容易ではありません。
CSSでリストをグリッド状に並べる
これからのCSSレイアウトはFlexboxで決まり!
・鍵盤をクリックした時に音を再生させる方法
HTML5 Audio ピアノ制作:クリックで音を鳴らそう!
Audio でサウンド再生
なお、上記サイトでは" click "イベントで音が鳴るように紹介されていますが、本サイトではclickイベントを"
mousedown "に変更(2018/Feb/24)。
・キーボードを押した時に音を再生させる方法
iPad対応!HTML5 Audioで作るブラウザーピアノ
・key code
キーコード一覧
音のファイルは、楽器の推薦音域で音階毎に4分音符のmidiファイルを
midi-perlで作成し、次にそれらをWavePadで音量を増幅し、mp3ファイルに変換しました。
更新履歴
・2020年8月15日:30種類の長調短調を広い音域で弾けるピアノを作成。
・2020年5月6日:マウスクリックで全ての音域の音を出せるように変更。
・2018年5月11日:マウスで全ての白鍵の音(ハ長調とイ短調)を再生可能にし、キーボーで、48個の白鍵を弾けるように追加。
・2018年3月27日:ピアノ音源ファイルの音量の増幅。音量調節を追加。
PR Mikeホームページ
演奏には JavaScript で書かれたプログラムを使用しています。
寄せられたコメント
※ 同時に複数の鍵盤を弾こうとすると音が出なくなります。対策お願いします。(2021年1月9日)
※ Re: 対策を講じました。1)プログラムの改良。2)音質は低下していますが、音源ファイルのサイズを半分にしています。これでも、だめでしたら、ファイルスサイズを更に半分にします。次のサイトです。
ここをクリックして下さい。(2021年1月23日)
※ 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: ご要望のボタンはありません。
このページの訪問者数



(Since Dec/22/2019)
mike3 web siteの全アクセス数



(Since Dec/8/1996)
(2016年7月13日掲載。2020年1月23日更新)
コメントやメール(匿名可)
(c) Copyright 2016-2020. MiKe All rights reserved.