VexFlow

概要

　MathJaxの楽譜版みたいな。MathJax？な人もいますから説明しますと、Webサイトにおいてネットワーク越しに準備されているJavaScriptライブラリを使って、自分のWebサイトで楽譜を描画する仕組みです。楽しい。タブ譜も描けますが、管理人はデザインに納得していません。

簡単な使い方

<div id="output"></div>
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js"></script>
<script>
  // ここにあなたのコードを書く。

…

const vf = new Factory({
  renderer: { elementId: 'output', width: 500, height: 200 },
});

…

</script>

例えば

<div id="output"></div>
<script id ="vexflow" src="https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js"></script>
<script>
const { Factory, EasyScore, System } = Vex.Flow;

const vf = new Factory({
  renderer: { elementId: 'output', width: 500, height: 200 },
});

const score = vf.EasyScore();
const system = vf.System();

system
  .addStave({
    voices: [
      score.voice(score.notes('C#5/q, B4, A4, G#4', { stem: 'up' })),
      score.voice(score.notes('C#4/h, C#4', { stem: 'down' })),
    ],
  })
  .addClef('treble')
  .addTimeSignature('4/4');

vf.draw();

　とすると結果として以下のように

　が得られます。肝心なのは出力するためのタグを与えなければならないことです。<div id="output"><div>が出力先です。出力先のタグはスクリプトの手前に必要なようです。描画コードの中で出力先のid名を指定するところがありまして、renderer: { elementId: 'output'}のoutputと記述しているところが対応しています。1ページに沢山の楽譜を載せる場合はoutputという文字列の部分などの変数に通し番号を付けるとか、楽譜のタイトルにするとか変数名がユニークになるような工夫が必要です。

　2つ目

　とまぁこんな具合に2個目を配置することができます。変数名を分けるのはわりかし面倒なので、もっと賢いやり方もあるはずです。まだ知りません。ちなみにサンプルで使ったのは easyscore という仕組みで、VexFlow の記述よりも簡単な方法らしいですが、文献がきれいにそろっていないので、どういう風に書けばよいのかがわかりません。VexFlow もわかりやすい文献はありません。少なくとも日本語の使いこなしているような巨大説明サイトは現時点ではありませんでした。頑張ればVexFlowの日本支部を作れますよ。今なら日本のTopの座は空いています。英語ですが、本家には、API の説明がありますが、なかなか冷たい。サンプルを解析して勉強するしかないね。VexFlow > Test > flow.html というのがあります。膨大なサンプルで、描画するのに1、2分はかかります。html のソースを見てもサンプルコードは記述されていません。ファイルに分散して配置されているようです。

　ちなみに2つ目の楽譜は12連符を書きたかったのですが、easyscore の仕組みが対応していないようで、描けませんでした。描く方法もあるのかもしれませんが、簡単ではなさそうです。どこが easy やねん！

　とは、言いつつも頑張って調べてたら何となく使い方わかって来たので使い方を纏めます。

　ちな、変数が重複しても大丈夫な様に一つの楽譜事に関数化しておけば変数名の重複を気にせず使えます。即時実行関数(function(){})();の中に書くだけです。

概要

簡単な使い方

関連情報