「タッチするだけでピアニスト気分になれるサイトを作ってみたよ」海外掲示板で称賛されていたブラウザアプリ:らばQ

レッスンを目的としたり、クリエイティブなシーンでは特におすすめです。 ピアノを置くスペースを考える必要もなく、そのまますぐに利用することができます。

15

webブラウザがピアノになる！「Web Audio API」入門

PCのキーボードでも音をコマンドできるものの、あまり広い範囲の音を打ち込むのは難しいからです。 音の高さは低くするのみと決めたので、このC（ド）が一番高い音、つまり右端の鍵盤がC（ド）となるように、白鍵と黒鍵をならべます。

8

【おすすめ】WEBブラウザピアノ(バーチャルキーボードピアノ)とは?無料鍵盤ピアノソフトを紹介

なので本格的に楽しみたいのであれば、動画のように電子ピアノを利用して、何オクターブもの自由を得て音符を落とし込んでいくと良いでしょう。

13

ピアノの各音の周波数の一覧

ちなみにキーボードの音をブラウザで鳴らせるサイト自体はたくさんあるのだが、アクセスしてみてもキーボード自体を認識してくれないサイトや、サイト自体がうまく動かなくなっているところとかも結構あったので、こちらにすぐ使えるサイトをメモした次第。 「Web Audio API」を用いたwebサイト3選 少しわかりにくいかと思いますので、実際に触って体験していただけるwebサイトを3つほどご紹介します。

11

【おすすめ】WEBブラウザピアノ(バーチャルキーボードピアノ)とは?無料鍵盤ピアノソフトを紹介

start 0 ; 再生速度が遅くなると、周波数も同じ比率で小さくなるため、音は低くなります。 「play」を押すと音が鳴りますのでご注意ください。 「Web Audio API」を使ってwebブラウザでピアノを作ろう では今度こそ、始めていきましょう。

HTML5 Audio ピアノ制作 : Step1

他の利用者と共有して利用する• 参考：• マウスオーバーを選択すると白鍵盤の上にカーソルが載ると音が出ます。

5

ピアノの各音の周波数の一覧

音が鳴りました！ 音の高さを変えてみる AudioNodeには、自身の状態を表す可変の属性を持つものがあります。 ピアノの上の方にある「音名を非表示」をクリックすると音名が表示されません。 ここはいろいろな作曲関連のツールを提供してくれているらしい。