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という文字列の部分などの変数に通し番号を付けるとか、楽譜のタイトルにするとか変数名がユニークになるような工夫が必要です。

　

言語と開発環境へ戻る。