「VexFlow」の版間の差分

提供:yonewiki
107行目: 107行目:
   voices: [
   voices: [
     score2.voice(
     score2.voice(
       score2.tuplet(score2.beam(score2.notes('A4/8, E4, C4, C4, E4, C4, C4, C4')))
       score2.tuplet(score2.beam(score2.notes('A4/8, E4, C4, C4, E4, C4, C4, C4, E4, C4, C4, C4')))
         .concat(
         .concat(
           score2.tuplet(score2.beam(score2.notes('A4/8, E4, C4'))))
           score2.tuplet(score2.beam(score2.notes('A4/8, E4, C4'))))

2022年12月11日 (日) 23:58時点における版

言語と開発環境へ戻る。

概要

 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つ目


 

言語と開発環境へ戻る。