HTML5でハープを作った

2017/07/07

どうも、ほのづきです。

思い立ってHTML5 Harpというブラウザ上で動くハープを作ってみました。

HTML5Harp

FirefoxかChromeの最新版ならちゃんと動くはずです。
iPhoneやタブレットは無理でした、すいません。

実際の楽器として使用に堪えるほどのものではありませんが、

  • ペダルの仕組みを再現している
  • ボタンひとつでグリッサンドが鳴らせる

のがウリです。

DTMをやっている人の中にはハープの打ち込みがややこしくてイライラするという方は少なくないと思います。

そんな方にとってHTML5 Harpは、

ハープのペダルの仕組みに慣れる(重要)

とか

グリッサンドをガンガン鳴らしてストレスを解消する(もっと重要)

とか、そういったことに使えます。

快適なDTMライフのお供にうってつけ。

どうぞご活用ください。

以下、使い方をメモしておきます。

 

できること と そのやり方

  • 弦を鳴らす:マウスを弦の上にのせるだけ。

ペダル関係

現在の一般的なハープはC, D, E, F, G, A, Bの各弦を上下に半音動かすためのペダルがついています。

それを再現し、かつワンクリックで切り替えられるようにしました。

  • ペダルの設定:動かしたい弦について、セレクトボックスでフラット、ナチュラル、シャープを選択。黒い四角のペダル画像を上下にドラッグ&ドロップしても動かせます。
  • ペダルをリセット:Resetボタンを押すと、ペダルがデフォルトのC, D, E, F, G, A, Bに戻ります。プリセットはリセットされません。
  • ペダルの状態を保存:ペダルのセッティングを3つまで保存できます。Save1, Save2, Save3ボタンで右側のPedal preset1, 2, 3にそれぞれ上書き保存されます。
  • プリセットの適用:右のプリセットのボタンを押すと、ペダルの状態を呼び出して適用できます。

グリッサンド関係

曲が盛り上がるシーンでハープをグリッサンドでかき鳴らす動きがよく見られるので、それをボタン一つで再現できるようにしました。

  • グリッサンドを鳴らす:Play Glissボタン。
  • グリッサンドを止める:Stopボタン。
  • 演奏のテンポを変える:tempoのスライドバーで10bpmずつ変更できます。20~500まで対応。
  • 何分音符刻みで鳴らすかを変える:lengthで16分音符、32分音符(デフォルト)、64分音符のうちから選んでください。
  • グリッサンドの最低音を変える:lowのところから選んでください。それより下の音はグリッサンドから除外されます。
  • グリッサンドの最高音を変える:highから選んでください。それより上の音はグリッサンドから除外されます。
  • 上昇・下降を変える:typeからグリッサンドの方向が選べます。上昇、下降、上昇して下降、下降して上昇の全4タイプ。

ショートカットキー

キーボードで操作するためのショートカットキーもいくつか用意しました。

  • \:グリッサンドを鳴らす。
  • /:グリッサンドを止める。
  • Ctrl+←(→):最低音を変更する。
  • Ctrl+↑(↓):最高音を変更する。
  • s:ペダルの状態をプリセット1に保存する。
  • d:ペダルの状態をプリセット2に保存する。
  • f:ペダルの状態をプリセット3に保存する。
  • r:ペダルの状態をリセットする。
  • 1:プリセット1を適用する。
  • 2:プリセット2を適用する。
  • 3:プリセット3を適用する。

 

さいごに

今回JavaScript、php、HTML5を使用しました。
どれも超がつくほどの初心者です。

なので、何か変なところがあれば教えてください。

HTML5Harp

 

参考にしたもの

解説記事

iPad対応!HTML5 Audioで作るブラウザーピアノ
ちょっと古い記事ですが、イチから丁寧に仕組みを説明してくれています。

Web Audio API の基礎

Web Audio API BufferLoader
英語の記事ですが、BufferLoaderの扱いでハマったときに参考になりました。

作例

VIRTUAL KALIMBA
上のWeb Audio API BufferLoaderの解説記事を書いている人が作ったカリンバ。ショートカットキーをつけるアイディアはここから。

HTML5 Drums
一番パクった参考になったのがこれ。
シンプルなぶん、どこでどの機能を実現しているのか分かりやすく、とても助かります。

Color Piano
midiをリアルタイム再生できるすごいやつ。でもちょっと重い。

-DTM, 開発
-