VexFlow

概要

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

　

簡単な使い方

<div id="output"></div>
<script src="https://cdn.jsdelivr.net/npm/vexflow@3.0.9/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/build/cjs/vexflow-debug.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();

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

　が得られます。