Vue.jsでピアノロールエディタ3

世の中のライブラリを使ったらどのくらい簡単にブラウザで音がならせるのかを確かめて、ピアノロールをクリックしたら音が鳴るようになるまでのドキュメンタリーである（？）。

Pico.js + Sionic.js

音を鳴らすのはメインではないので、MIDIより簡易？なMMLで扱いたい。Twitterで検索してみたら「Pico.jsとSionic.jsで鳴らせる」的なツイートを見かけたのでこれらを試してみた。

ダウンロードしてきたpico.min.jsとsionic.jsを読み込むとそれぞれグローバルにPicoとSionicというオブジェクトができるので、Sionic(mml)のようにMML文字列をSionicに渡した返り値をPico.play(sionic)みたいに渡すだけで音が再生された。簡単だ。良さそう。

現状

github.com

• ピアノロールをクリックすると音が鳴るようになった。
  • ダウンロードしたJSファイルは何となくGitHubに上げてないのでpico.min.jsとsionic.jsをダウンロードしてstaticディレクトリに入れる必要がある。

そういえば今更ですがChromeでしか確認してないです。

得た知識とか

外部JSのグローバルオブジェクトを扱う

普通にHTMLでJSファイルを読み込めばいいのだけど、そのままだとESLintに怒られるので.eslintrcに無視する設定を追加した。

  globals: {
    'Pico': false,
    'Sionic': false
  }

今後の予定

• エディタを左クリックでノート（音符）を置く
  • 右クリックでノートを削除
• Ctrl+右クリックでカーソルのX軸にあるノートを選択
  • 選択したら構成音からコード名を表示する
  • 実はこれが本来の目的
• 再生してノート通りに音を鳴る（やるかは未定だけどせっかく音鳴ったしやりたい）