VexFlow

概要

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

　

簡単な使い方

<script src="https://cdn.jsdelivr.net/npm/vexflow@4.0.3/build/cjs/vexflow.js"></script>
<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();