「VexFlow」の版間の差分

提供:yonewiki
107行目: 107行目:
   .addStave({
   .addStave({
     voices: [
     voices: [
       score2.voice(score2.tuplet(score.beam(score.notes('G5/16, E5, F5, C5, D5, B4, C5, G4, F4, B4, C5, D5',{ stem: 'up' })))),
       score2.voice(score2.tuplet(score2.beam(score2.notes('G5/16, E5, F5, C5, D5, B4, C5, G4, F4, B4, C5, D5',{ stem: 'up' })))),
       score2.voice(score2.notes('C#4/h, C#4', { stem: 'down' })),
       score2.voice(score2.notes('C#4/h, C#4', { stem: 'down' })),
     ],
     ],

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

言語と開発環境へ戻る。

概要

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


 

言語と開発環境へ戻る。