「VexFlow 入門その1」の版間の差分

提供:yonewiki
 
(同じ利用者による、間の22版が非表示)
1行目: 1行目:
<yjavascript></script>
<script src="https://wiki.yo-net.jp/vexflow/build/cjs/vexflow@4.2.2.0001.js"></script>
<script>
</yjavascript>
[[VexFlow 使い方]]へ戻る。
[[VexFlow 使い方]]へ戻る。
== '''概要''' ==
== '''概要''' ==
 ひとつひとつの構成要素を知る前に入門用の楽譜をいくつか描いて全貌をつかもうとするのが最初です。公式サイトにもあるものと同じです。
 ひとつひとつの構成要素を知る前に入門用の楽譜をいくつか描いて全貌をつかもうとするのが最初です。公式サイトにもあるものと同じです。このサイトでは'''[[VexFlow 使い方|使い方]]'''を最後まで学習すると以下のようなスコアブックのような描画もできるようになります。
 
<div id="yonet202403Mid_Output01"></div>
<yjavascript></script>
<script>
///////////////////////
(function(){
class Position {
  constructor(x = 0, y = 0) {
    this.x = x;
    this.y = y;
  }
}
var VF = Vex.Flow;
const Vocal = new Position();
const Guitar1Inst = new Position();
const Guitar2Inst = new Position();
const Guitar2Tab1 = new Position();
const BaseInst = new Position();
const BaseTab1 = new Position();
const DrumInst = new Position();
const PercInst = new Position();
const Stave9Pos = new Position();


var StaveBase1;
var StaveBase2;
var StaveBase3;
var StaveBase4;


=== '''五線譜''' ===
const Perc_note1_1_0 = new Position();
 五線譜を描いてみます。目安になる線を引きました。左上の角の頂点が(x, y)対応で(1, 1)、そこから時計回りに(499, 1)→(499, 199)→(410, 100)→(10, 40)という線です。


<div id="output"></div>
var shiftGuitar1_1;
var shiftGuitar1_tab4_tr;


var shiftGuitar1_tab1;
var shiftGuitar1_tab2;
var shiftGuitar1_tab3;
var shiftGuitar1_tab4;
var shiftDrum1;
var shiftPerc1;


 スクリプトは以下のとおり。
function insertBaseEndBarPathToSVG(Stave) {
  var newGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
  newGroup.setAttribute('transform', 'translate(0, 0)');
  var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  var pathStr = 'M ' + (Stave.x + Stave.width) + ' ' + (Stave.y + 50) +
    ' L ' + (Stave.x + Stave.width) + ' ' + (Stave.y + 80);
  path.setAttribute('d', pathStr);
  path.setAttribute('stroke', 'black');
  path.setAttribute('stroke-width', '1');
  path.setAttribute('fill', 'none');
  newGroup.appendChild(path);
  svgElement.appendChild(newGroup);
}


<syntaxhighlight lang="javascript">
function insertTiePathToSVG(StartPos, EndPos, Direction = 1, Depth = 10) {
<div id="output"></div>
  var newGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js"></script>
  newGroup.setAttribute('transform', 'translate(0, 0)');
<script>
  var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
const {
  var pathStr = 'M' + (StartPos.x) + ' ' + (StartPos.y) + 'Q' + (StartPos.x + (EndPos.x - StartPos.x)/2) + ' ' + ((StartPos.y + EndPos.y)/2 + Direction * (Depth - 2)) +
   Renderer,
    ',' + (EndPos.x) + ' ' + (EndPos.y) + 'Q' + ((StartPos.x + EndPos.x)/2) + ' ' + (StartPos.y + (EndPos.y - StartPos.y)/2 + Direction * (Depth + 2)) +
   Stave
    ','  + (StartPos.x) + ' ' + (StartPos.y) + 'Z';
} = Vex.Flow;
  path.setAttribute('d', pathStr);
  path.setAttribute('stroke', 'none');
  path.setAttribute('stroke-width', '1');
   path.setAttribute('fill', 'black');
   newGroup.appendChild(path);
  svgElement.appendChild(newGroup);
}


// Create an SVG renderer and attach it to the DIV element named "boo".
function insertTrilPathToSVG(Shift, Direction = 1) {
const div = document.getElementById('output');
  var newGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
const renderer = new Renderer(div, Renderer.Backends.SVG);
  newGroup.setAttribute('transform', 'translate(0, 0)');
  var DirectionOffset = 0;
  if (Direction == -1) DirectionOffset = 60;
  var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  var pathStr = 'M ' + (Shift[0].x + 11.934 + 5) + ' ' + (Shift[0].y - 40 + DirectionOffset) +
    ' L ' + (Shift[1].x + 11.934 - 5) + ' ' + (Shift[1].y - 40 + DirectionOffset) +
    ' L ' + (Shift[1].x + 11.934 - 5) + ' ' + (Shift[1].y - 36 + DirectionOffset) +
    ' L ' + (Shift[0].x + 11.934 + 5) + ' ' + (Shift[0].y - 36 + DirectionOffset) +
    ' L ' + (Shift[0].x + 11.934 + 5) + ' ' + (Shift[0].y - 40 + DirectionOffset);
  path.setAttribute('d', pathStr);
  path.setAttribute('stroke', 'none');
  path.setAttribute('stroke-width', '1');
  path.setAttribute('fill', 'black');
  var path2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  var pathStr2 = 'M ' + (Shift[0].x + 11.934 + 5) + ' ' + (Shift[0].y - 40 + DirectionOffset + Direction * 7) +
    ' L ' + (Shift[1].x + 11.934 - 5) + ' ' + (Shift[1].y - 40 + DirectionOffset + Direction * 7) +
    ' L ' + (Shift[1].x + 11.934 - 5) + ' ' + (Shift[1].y - 36 + DirectionOffset + Direction * 7) +
    ' L ' + (Shift[0].x + 11.934 + 5) + ' ' + (Shift[0].y - 36 + DirectionOffset + Direction * 7) +
    ' L ' + (Shift[0].x + 11.934 + 5) + ' ' + (Shift[0].y - 40 + DirectionOffset + Direction * 7);
  path2.setAttribute('d', pathStr2);
  path2.setAttribute('stroke', 'none');
  path2.setAttribute('stroke-width', '1');
  path2.setAttribute('fill', 'black');
  var path3 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
  var pathStr3 = 'M ' + (Shift[0].x + 11.934 + 5) + ' ' + (Shift[0].y - 40 + DirectionOffset + Direction * 14) +
    ' L ' + (Shift[1].x + 11.934 - 5) + ' ' + (Shift[1].y - 40 + DirectionOffset + Direction * 14) +
    ' L ' + (Shift[1].x + 11.934 - 5) + ' ' + (Shift[1].y - 36 + DirectionOffset + Direction * 14) +
    ' L ' + (Shift[0].x + 11.934 + 5) + ' ' + (Shift[0].y - 36 + DirectionOffset + Direction * 14) +
    ' L ' + (Shift[0].x + 11.934 + 5) + ' ' + (Shift[0].y - 40 + DirectionOffset + Direction * 14);
  path3.setAttribute('d', pathStr3);
  path3.setAttribute('stroke', 'none');
  path3.setAttribute('stroke-width', '1');
  path3.setAttribute('fill', 'black');
  newGroup.appendChild(path);
  newGroup.appendChild(path2);
  newGroup.appendChild(path3);
  svgElement.appendChild(newGroup);
}


// Configure the rendering context.
renderer.resize(500, 200);
const context = renderer.getContext();


// Create a stave of width 400 at position 10, 40 on the canvas.
function insertTextToSVG(options) {
const stave = new Stave(10, 40, 400);
    var textContent = options.textContent;
    var strID = options.strID;
    var Stave_x = options.Stave_x || 0;
    var Stave_y = options.Stave_y || 0;
    var isOffset_x_abs = options.IsOffset_x_Abs || false;
    var Stave_x_Offset = options.Stave_x_Offset || 0;
    var Stave_y_Offset = options.Stave_y_Offset || 0;
    var StaveWidth = options.StaveWidth || 0;
    var StaveHeight = options.StaveHeight || 0;
    var StaveVerticalScale = options.StaveVerticalScale || 0;
    var fontSize = options.fontSize || 40;
    var fontFamily = options.fontFamily || "Bravura, Arial";
    var shift_x = options.shift_x || [0];
    var Rotate = options.Rotate || 0;
    var offset_sum = 0;
    var Stave_x_Offset_Value = 0;
    var Stave_y_Offset_Value = 0;
    var last_Stave_x_Offset = 0;
    var last_Stave_y_Offset = 0;
    var last_textContent = "";
    shift_x.forEach(function(offset, index) {
        offset_sum = offset_sum + offset;
        var newText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
        newText.setAttribute('id', strID + '_' + index); // テキスト要素にIDを付ける
        newText.setAttribute('x', 0);
        newText.setAttribute('y', 0);
        newText.setAttribute('font-family', fontFamily);
        newText.setAttribute('font-size', fontSize);
        newText.setAttribute('fill', 'black');


// Add a clef and time signature.
        if(typeof textContent === "string"){
stave.addClef('treble').addTimeSignature('C');
          newText.textContent = textContent;
        }
        else{
          if(textContent.length - 1 < index){
            newText.textContent = last_textContent;
          }
          else{
            newText.textContent = textContent[index];
            last_textContent = textContent[index];
          }
        }


// Connect it to the rendering context and draw!
        if(Stave_x_Offset.length - 1 < index){
stave.setContext(context).draw();
          Stave_x_Offset_Value = last_Stave_x_Offset;
</script>
        }
</syntaxhighlight>
        else{
          if(Stave_x_Offset.length >= 2){
            Stave_x_Offset_Value = Stave_x_Offset[index];
            last_Stave_x_Offset = Stave_x_Offset[index];
          }
          else{
            Stave_x_Offset_Value = Stave_x_Offset;
          }
        }


 最初に、div に 出力するタグを取得する。ここでは &lt;div id="output"&gt;&lt;/div&gt; のタグ全体要素を取得している。次にnew Renderer(div, Renderer.Backends.SVG); でSVGでの描画処理をしてくれるようになります。他にもRenderer.Backends.CANVASという指定もできます。自分はSVGバージョンが好みです。なんか問題報告が少ない。CANVASはスケールサイズ表示がおかしいとか言ってる人もいます。renderer.resize(500, 200); は描画エリアのサイズを指定しています。そして、この描画エリアに五線譜のオブジェクトとして構築した stave を配置します。
        if(Stave_y_Offset.length - 1 < index){
          Stave_y_Offset_Value = last_Stave_y_Offset;
        }
        else{
          if(Stave_y_Offset.length >= 2){
            Stave_y_Offset_Value = Stave_y_Offset[index];
            last_Stave_y_Offset = Stave_y_Offset[index];
          }
          else{
            Stave_y_Offset_Value = Stave_y_Offset;
          }
        }
        var textGroup = document.createElementNS('http://www.w3.org/2000/svg', 'g');
        if(Rotate != 0){
          textGroup.setAttribute('transform', 'rotate(' + Rotate + ' ' + 0 + ' ' + 0 + ')');
          textGroup.appendChild(newText);
          svgElement.appendChild(textGroup);
        }
        else{
          svgElement.appendChild(newText);
        }
        (function() {
            var textWidth = newText.getBBox().width;
            var textHeight = newText.getBBox().height;
            var horizontalScale;
            if (typeof StaveWidth === 'undefined' || StaveWidth == 0) {
                horizontalScale = 1;
            }
            else {
                horizontalScale = StaveWidth / textWidth;
            }
            var verticalScale;
            if (typeof StaveHeight === 'undefined' || StaveHeight == 0) {
                verticalScale = 1;
            }
            else if (StaveVerticalScale != 0) {
                verticalScale = StaveVerticalScale;
            }
            else {
                verticalScale = StaveHeight / textHeight;
            }
            if(isOffset_x_abs){
              var StavePos_x = offset.x + Stave_x_Offset_Value;
              var StavePos_y = offset.y + Stave_y_Offset_Value;
            }
            else{
              var StavePos_x = Stave_x + Stave_x_Offset + offset_sum;
              var StavePos_y = Stave_y + Stave_y_Offset;
            }


            newText.setAttribute('transform', 'translate(' + StavePos_x + ',' + StavePos_y + ') scale(' + horizontalScale + ',' + verticalScale + ')');


 New Stave(10, 40, 400)で、描画エリアの x = 10, y = 40の位置に幅 400 の五線譜を描きます。(410, 100)の頂点位置をみればわかりますが、きっちり 10+400 の大きさになっています。五線譜の真ん中の第三線が中央になっており縦 200 が 1 行にちょうど良いようです。楽譜部分の表示スケールを変更して小さくする予定なので、その時にまた、描画領域について考えてみたいと思います。
            if(Rotate != 0){
              textGroup.setAttribute('transform', 'rotate(' + Rotate + ' ' + StavePos_x + ' ' + StavePos_y + ')');
            }
        })();


        if(Rotate != 0){
          textGroup.appendChild(newText);
          svgElement.appendChild(textGroup);
        }
        else{
          svgElement.appendChild(newText);
        }
    });
}


 stave.addClef('treble').addTimeSignature('4/4'); で treble ト音記号 4/4 つまり4分の4拍子という五線譜になります。
var allUniqueIds = [];
var allFlagUniqueIds = [];
(function(){
function addShift(notes, arrx = [], arry = []) {
  let tempnote;
  let retShift = [];
 
  for(let i = 0; i < arrx.length || i == 0; i++){
    const pos = new Position();
    //notesのchildrenの各要素について処理
    if(arrx.length === 0){
      tempnote = notes;
    }
    else{
      tempnote = notes[arrx[i]];
      temp_y = arry[i];
    }
    pos.x = tempnote.getAbsoluteX();
    pos.y = tempnote.getStave().getYForLine(temp_y);


    retShift.push(pos);
  }
  return retShift;
}


 自分は、持っているPCが12型で1920x1280を使っていますので、表示倍率を150%にしています。その関係で、実質は横サイズが1920の66%で、横は1280pxと変わらない表示領域です。したがって、Wikiの横幅も最大にして、1000pxくらいがちょうどいい限界の大きさです。しかし、そのサイズでは、4小節くらいを1行にするには楽譜が大きすぎるので、もうちょっと小さくしないといけないなとは思っていますが、その処理も、もうちょっと後でやるとします。続けて、実際の音符を配置してみます。
var UniqueIds;
function getUniqueNoteheadIds(notes, arr = []) {
    //すべてのidを格納するためのセットを作成
    let tempnote;
    uniqueIds = new Set();
    for(let i = 0; i < arr.length || i == 0; i++){
    //notesのchildrenの各要素について処理
      if(arr.length === 0){
        tempnote = notes;
      }
      else{
        tempnote = notes[arr[i]];
      }
      tempnote.children.forEach(child => {
        //typeが"notehead"であるかチェックし、idを取得
        if (child.attrs){
          if(child.attrs.type === "NoteHead") {
            uniqueIds.add(child.attrs.id);
          }
        }
      });
    }
    // セットを配列に変換して戻り値として返す
    return Array.from(uniqueIds);
}


function updateAllUniqueIds(UniqueIds) {
    // allUniqueIdsにUniqueIdsを追加または結合
    if (allUniqueIds.length === 0) {//allUniqueIdsはグローバルな変数
      // allUniqueIdsが空の場合、UniqueIdsをそのままコピー
      allUniqueIds = [...UniqueIds];//スプレッド演算子で要素の中身を書き出す。
    } else {
      UniqueIds.forEach(id => {
        if (!allUniqueIds.includes(id)) {
            allUniqueIds.push(id);
        }
      });
    }
    // 更新されたallUniqueIdsを戻り値として返す
    return allUniqueIds;
}


 拍子記号は以下のようなものが使えます。
var SteveNoteUniqueIds;
<table style="width: 100%; text-align: left; border-collapse: collapse; border-spacing: 0;">
function getUniqueStaveNotesIds(notes, arr = []) {
<tr style=" background: #778ca3; border-right: solid 1px #778ca3; color: #ffffff;">
    //すべてのidを格納するためのセットを作成
  <th style="width: 200px;">シーケンス</th>
    let tempnote;
  <th>意味</th>
    uniqueIds = new Set();
  </tr>
    for(let i = 0; i < arr.length || i == 0; i++){
<tr>
    //notesのchildrenの各要素について処理
  <td>C</td>
      if(arr.length === 0){
  <td>Cを表示(4/4拍子)</td>
        tempnote = notes;
</tr>
      }
<tr style=" background: #dddddd;">
      else{
  <td>C|</td>
        tempnote = notes[arr[i]];
  <td>Cの横中央に縦棒を表示(2/2拍子)</td>
      }
</tr>
      if (tempnote.attrs){
<tr>
        if(tempnote.attrs.type === "StaveNote") {
  <td>n1/n2</td>
          uniqueIds.add(tempnote.attrs.id);
  <td>n2 分の n1 拍子</td>
        }
</tr>
      }
</table>
    }
    // セットを配列に変換して戻り値として返す
    return Array.from(uniqueIds);
}


 
function updateAllFlagUniqueIds(FlagUniqueIds) {
    // allUniqueIdsにUniqueIdsを追加または結合
    if (allFlagUniqueIds.length === 0) {
      // allUniqueIdsが空の場合、UniqueIdsをそのままコピー
      allFlagUniqueIds = [...FlagUniqueIds];//スプレッド演算子で要素の中身を書き出す。
    } else {
      FlagUniqueIds.forEach(id => {
        if (!allFlagUniqueIds.includes(id)) {
            allFlagUniqueIds.push(id);
        }
      });
    }
    // 更新されたallUniqueIdsを戻り値として返す
    return allFlagUniqueIds;
}


=== '''五線譜に音符を配置''' ===
function dotted(staveNote, noteIndex = -1) {
 目安になる線を引きました。左上の角の頂点が(x, y)対応で(1, 1)、そこから時計回りに(499, 1)(499, 199)(360, 100)です。
  if (noteIndex < 0) {
<div id="output2"></div>
    Dot.buildAndAttach([staveNote], {
      all: true
    });
  }
  else {
    for(noteIndexValue of noteIndex){
      Dot.buildAndAttach([staveNote], {
        index: noteIndexValue
      });
    }
  }
  return staveNote;
}


スクリプトは以下のようなものです。
<syntaxhighlight lang="javascript">
const {
const {
   Renderer,
   Factory,
   Stave,
   Stave,
   StaveNote,
   StaveNote,
  Formatter,
   Voice,
   Voice,
   Formatter
   StaveTie,
  BarLine,
  Beam,
  Dot,
  StaveConnector,
  Modifier,
  RenderContext,
  TextDynamics,
  Articulation,
  TextNote,
  Crescendo,
  Renderer
} = Vex.Flow;
} = Vex.Flow;


const div2 = document.getElementById('output2');
let nscale = 0.64;
const renderer2 = new Renderer(div2, Renderer.Backends.SVG);
let nwidth = 1040;
let nheight = 1120;
 
let nHeadMargin = 70;
let nStaveWidth = 350;


// Configure the rendering context.
const f = new Factory({
renderer2.resize(500, 200);
  renderer: { elementId: 'yonet202403Mid_Output01', width: nwidth, height: nheight * nscale }
const context2 = renderer2.getContext();
  });
const ctx = f.getContext();
ctx.scale(nscale, nscale);
 
const defaultStyle = {
  lineWidth: ctx.lineWidth,
  strokeStyle: ctx.strokeStyle,
};
 
for (let i = 0; i <= nwidth * (1 / nscale); i += 10) {
  ctx.beginPath();
  ctx.moveTo(0 + i, 0);
  ctx.lineTo(0 + i, nheight);
  if (i % 100 === 0){
    ctx.setLineWidth(1);
    ctx.setStrokeStyle('rgba(200, 200, 200, 0.8)');
  }
  else{
    ctx.setLineWidth(0.5);
    ctx.setStrokeStyle('rgba(230, 230, 230, 0.8)');
  }
  ctx.stroke();
}
 
for (let i = 0; i <= nheight; i += 10) {
  ctx.beginPath();
  ctx.moveTo(0, i);
  ctx.lineTo(nwidth * (1 / nscale), i);
  if (i % 100 === 0){
    ctx.setLineWidth(1);
    ctx.setStrokeStyle('rgba(200, 200, 200, 0.8)');
  }
  else{
    ctx.setLineWidth(0.5);
    ctx.setStrokeStyle('rgba(230, 230, 230, 0.8)');
  }
  ctx.stroke();
}
 
ctx.lineWidth = defaultStyle.lineWidth;
ctx.strokeStyle = defaultStyle.strokeStyle;
 
const VocalSt1 = new Stave(80, 30, nHeadMargin + nStaveWidth).setContext(ctx);
VocalSt1.setClef("treble").setContext(ctx);
VocalSt1.setTimeSignature('4/4').setContext(ctx);
VocalSt1.addKeySignature('D').setContext(ctx);
VocalSt1.setMeasure(1);
VocalSt1.draw();
 
Vocal.x = VocalSt1.x - 30;
Vocal.y = VocalSt1.y + 90;  


// Create a stave of width 400 at position 10, 40 on the canvas.
const VocalSt2 = f.Stave({ x: VocalSt1.width + VocalSt1.x, y: VocalSt1.y, width: nStaveWidth });
const stave2 = new Stave(10, 40, 400);
VocalSt2.setMeasure(2);
VocalSt2.setContext(ctx).draw();


// Add a clef and time signature.
const VocalSt3 = new Stave(VocalSt2.width + VocalSt2.x, VocalSt1.y, nStaveWidth).setContext(ctx);
stave2.addClef('treble').addTimeSignature('C|');
VocalSt3.setMeasure(3);
VocalSt3.draw();


// Connect it to the rendering context and draw!
const VocalSt4 = new Stave(VocalSt3.width + VocalSt3.x, VocalSt1.y, nStaveWidth).setContext(ctx);
stave2.setContext(context2).draw();
VocalSt4.setMeasure(4);
VocalSt4.draw();


// Create the notes
const Guitar1St1 = new Stave(VocalSt1.x, VocalSt1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);
const notes2 = [
Guitar1St1.addClef("treble").setContext(ctx);
  new StaveNote({
Guitar1St1.addTimeSignature('4/4').setContext(ctx);
    keys: ['c/5'],
Guitar1St1.addKeySignature('D').setContext(ctx);
    duration: 'q'
Guitar1St1.draw();
  }),
 
   new StaveNote({
const Guitar1_notes1_1 = [
    keys: ['d/4'],
   new VF.StaveNote({ keys: ["a/3", "e/4", "a/4", "c/5"], duration: "2" }),
    duration: 'q'
   new VF.StaveNote({ keys: ["e/5"], duration: "8", stem_direction: -1 }),
  }),
   dotted(new VF.StaveNote({ keys: ["c/6"], duration: "4d", stem_direction: -1 })),
   new StaveNote({
    keys: ['b/4'],
    duration: 'qr'
  }),
   new StaveNote({
    keys: ['c/4', 'e/4', 'g/4'],
    duration: 'q'
  }),
];
];
const Guitar1_notes1_2 = [
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),


// Create a voice in 4/4 and add above notes
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
const voice2 = new Voice({ num_beats: 4, beat_value: 4 });
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
voice2.addTickables(notes2);
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),


// Format and justify the notes to 400 pixels.
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
new Formatter().joinVoices([voice2]).format([voice2], 350);
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),


// Render voice
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
voice2.draw(context2, stave2);
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
</syntaxhighlight>
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),


];
var Guitar1_St1_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });
Guitar1_St1_1Voice.setStrict(true);
Guitar1_St1_1Voice.addTickables(Guitar1_notes1_1);


 変数名が最初の楽譜とダブるところは数字を付けました。一番最初の  StaveNote, Voice, Formatterの部分は最初のと共通なので書き換えが必要です。あとの部分で2重で定義してもダメです。最初のがエラーになって、致命的エラーで何も描画処理がされなくなります。コード全体としては、音符を付ける部分は、五線譜に付け足すので、すべて、最初のコードより後ろに付け足す感じです。const notes2 以降が付け足した部分です。ここまで書いて言えるのは VexFlow はプログラミングに近いです。音楽や楽譜しか知らない人が、この方式で楽譜を描くのは難しいと感じると思います。ABC記述方式のモノが好まれる理由が少しわかります。ただVexflowの方が複雑な記述であるゆえに、複雑な楽譜が書ける言えるのかもしれない。まるで配列の中にひとつづつの音符を生成している感じで、ひとつの音符ごとに区切って new StaveNote() 関数に引数としてオブジェクト値(自分はこれをPerlの連想配列と似ているので連想配列とちょくちょく呼んでいます)を指定しています。プロパティ名にkeys: とduration: が指定されます。プロパティ名であることがわかりやすいように:までつけていますが名前自体は keys と duration です。keys プロパティ名に対応するものとして、配列が指定されるようです。値が一つしかなくてもです。そこに音の高さ相当する値、音階名と段階番号を付けます。実音記号のA(ラ), B(シ), C(ド), D(レ), E(ミ), F(ファ), G()に対応していて、/ で区切って段階の番号を付与します。
var Guitar1_St1_2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });
Guitar1_St1_2Voice.setStrict(true);
Guitar1_St1_2Voice.addTickables(Guitar1_notes1_2);


var formatterGuitar1_St1_1 = new Vex.Flow.Formatter().joinVoices([Guitar1_St1_2Voice, Guitar1_St1_1Voice]);
formatterGuitar1_St1_1.format([Guitar1_St1_2Voice, Guitar1_St1_1Voice], nStaveWidth - 20 - 10);
Guitar1_St1_1Voice.draw(ctx, Guitar1St1);
Guitar1_St1_2Voice.draw(ctx, Guitar1St1);


 ピアノと同じで88音の下から1, 2, … , 10, 11 まであります。ピアノ譜のト音記号の五線譜に下に一つ補助線を付けたドが C/4 に相当します。通常、ト音記号の五線譜には E/3 が最低音、 最高の音しても G/6 までくらいを使います。C/6 から 上の音での演奏が続くときは オクターブ記号を使って、その下に描くことがあります。ギターも同じです。ギターは4オクターブしかありません。が一番上の音付近を使うときは、オクターブ記号を置いて、一段階下げて表記します。どの楽器もピアノの88鍵盤には負けます。ギターの一番低い音でもE/3です。クラリネットの音域もギターに似ていますが、最高音はギターよりも狭い範囲が一般的です。最高音のあたりはかなりうまい人だと出せなくはない音ですが狙うのはスゴイ難しいです。ベースとピアノの最低音あたりはヘ音記号の五線譜に書かれることが普通です。ピアノはト音記号とヘ音記号の二つ同時に使うこともあります。音域やばいっす。バイオリンあたりはテノール記号(ハ音記号)というト音記号でもヘ音記号でもないものを使う場合があります。この3種類しかないと思います。あとは変則の五線譜として、通常の位置とは異なる部分に、記号を配置する手法があります。
const Guitar1St2 = new Stave(Guitar1St1.width + Guitar1St1.x, Guitar1St1.y, nStaveWidth).setContext(ctx);
Guitar1St2.draw();


const Guitar1_gracenotes2 = [
  new VF.GraceNote({ keys: ['e/5', 'g/5'], duration: '8', slash: true })
  .addModifier(new VF.Accidental('#'), 1)
];


 durationの値には文字列が設定されて、 q が四分音符、h が2分音符、w が全音符を表します。8, 16, 32, 64 がそれぞれ8分音符、 16分音符、 32分音符、64分音符に対応しますが、連符もありますので、ひとことで言えるほど簡単ではないです。後ろに r をつけると休符になります。rest の r だそうです。 voice2.draw(context2, stave2);
const Guitar1_notes2_1 = [
  new VF.StaveNote({ keys: ["f/5", "a/5"], duration: "8", stem_direction: -1 })
  .addModifier(new VF.Accidental('n'), 0),
  new VF.StaveNote({ keys: ["e/5", "g/5"], duration: "8", stem_direction: -1 }),
  new VF.StaveNote({ keys: ["f/5"], duration: "8", stem_direction: -1 }),
  new VF.StaveNote({ keys: ["e/5"], duration: "8", stem_direction: -1 }),
  new VF.StaveNote({ keys: ["a/4", "d/5"], duration: "8" }),
  new VF.StaveNote({ keys: ["g/4"], duration: "8" }),
  new VF.StaveNote({ keys: ["f/4"], duration: "8" }),
  new VF.StaveNote({ keys: ["e/4"], duration: "8" }),
];
const Guitar1_notes2_2 = [
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),


  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),


 このようにして作った notes2 を Voiceという単位に格納するため new Voice({ num_beats: 4, beat_value: 4 }); でプロパティ名 num_beats beat_value を持ったオブジェクトを引数にしています。ともに 4 拍子の中に 4つの拍子をもった音だと定義されていて、その中に、notes2 を取り込むべく、voice2.addTickables(notes2); としています。
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
 
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
 
];
Guitar1_notes2_1[0].addModifier(new VF.Articulation('a.').setPosition(3));
Guitar1_notes2_1[1].addModifier(new VF.Articulation('a.').setPosition(3));
Guitar1_notes2_1[2].addModifier(new VF.Articulation('a.').setPosition(3));
Guitar1_notes2_1[3].addModifier(new VF.Articulation('a.').setPosition(3));
Guitar1_notes2_1[4].addModifier(new VF.Articulation('a.').setPosition(4));
Guitar1_notes2_1[5].addModifier(new VF.Articulation('a.').setPosition(4));
Guitar1_notes2_1[6].addModifier(new VF.Articulation('a.').setPosition(4));
Guitar1_notes2_1[7].addModifier(new VF.Articulation('a.').setPosition(4));
Guitar1_notes2_1[0].addModifier(new VF.GraceNoteGroup(Guitar1_gracenotes2, true), 0);
 
const Guitar1_beam1_1 = new VF.Beam([Guitar1_notes2_1[0], Guitar1_notes2_1[1], Guitar1_notes2_1[2], Guitar1_notes2_1[3]]);
const Guitar1_beam1_2 = new VF.Beam([Guitar1_notes2_1[4], Guitar1_notes2_1[5], Guitar1_notes2_1[6], Guitar1_notes2_1[7]]);
 
var Guitar1_St2_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });
Guitar1_St2_1Voice.setStrict(true);
Guitar1_St2_1Voice.addTickables(Guitar1_notes2_1);
 
var Guitar1_St2_2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });
Guitar1_St2_2Voice.setStrict(true);
Guitar1_St2_2Voice.addTickables(Guitar1_notes2_2);
 
var formatterGuitar1_St2_1 = new Vex.Flow.Formatter().joinVoices([Guitar1_St2_2Voice, Guitar1_St2_1Voice]);
formatterGuitar1_St2_1.format([Guitar1_St2_2Voice, Guitar1_St2_1Voice], nStaveWidth - 30);
Guitar1_St2_1Voice.draw(ctx, Guitar1St2);
Guitar1_St2_2Voice.draw(ctx, Guitar1St2);
 
Guitar1_beam1_1.setContext(ctx).draw();
Guitar1_beam1_2.setContext(ctx).draw();
 
const Guitar1St3 = new Stave(Guitar1St2.width + Guitar1St2.x, Guitar1St1.y, nStaveWidth).setContext(ctx);
Guitar1St3.draw();
 
const Guitar1_notes3_1 = [
  new VF.StaveNote({ keys: ["g/4"], duration: "16" }),
  new VF.StaveNote({ keys: ["a/4"], duration: "16" }),
  new VF.StaveNote({ keys: ["g/4"], duration: "16" }),
  new VF.StaveNote({ keys: ["a/4"], duration: "16" }),
  new VF.StaveNote({ keys: ["g/4"], duration: "8" }),
  new VF.StaveNote({ keys: ["e/4"], duration: "16" }),
  new VF.StaveNote({ keys: ["e/4"], duration: "16" }),
  new VF.StaveNote({ keys: ["e/4"], duration: "2" }),
];
const Guitar1_notes3_2 = [
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),


  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),


 そして、これらを400pxの五線譜の中に納まるように、new Formatter().joinVoices([voice2]).format([voice2], 350); としています。x = 350のところに最後の音符が収まっていることも確認できます。このように処理した voice2 を context2 の描画領域に stave2 の 五線譜に描画します。
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),


  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),


 duration に設定できる値は以下のようなものです。
];
<table style="width: 400px; text-align: left; border-collapse: collapse; border-spacing: 0;">
const Guitar1_beam3_1 = new VF.Beam([Guitar1_notes3_1[0], Guitar1_notes3_1[1], Guitar1_notes3_1[2], Guitar1_notes3_1[3]]);
<tr style=" background: #778ca3; border-right: solid 1px #778ca3; color: #ffffff;">
const Guitar1_beam3_2 = new VF.Beam([Guitar1_notes3_1[4], Guitar1_notes3_1[5], Guitar1_notes3_1[6]]);
  <th style="width: 200px;">シーケンス</th>
 
  <th>意味</th>
var Guitar1_St3_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });
  </tr>
Guitar1_St3_1Voice.setStrict(true);
<tr>
Guitar1_St3_1Voice.addTickables(Guitar1_notes3_1);
  <td>w</td>
  <td>全音符</td>
</tr>
<tr style=" background: #dddddd;">
  <td>h</td>
  <td>2分音符</td>
</tr>
<tr>
  <td>q</td>
  <td>4分音符</td>
</tr>
<tr style=" background: #dddddd;">
  <td>8</td>
  <td>8分音符</td>
</tr>
<tr>
  <td>16</td>
  <td>16分音符</td>
</tr>
<tr style=" background: #dddddd;">
  <td>32</td>
  <td>32分音符</td>
</tr>
</table>


 
var Guitar1_St3_2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });
Guitar1_St3_2Voice.setStrict(true);
Guitar1_St3_2Voice.addTickables(Guitar1_notes3_2);


=== '''五線譜に音符を配置 2Voices''' ===
var formatterGuitar1_St3_1 = new Vex.Flow.Formatter().joinVoices([Guitar1_St3_2Voice, Guitar1_St3_1Voice]);
<div id="output3"></div>
formatterGuitar1_St3_1.format([Guitar1_St3_2Voice, Guitar1_St3_1Voice], nStaveWidth - 30);
Guitar1_St3_1Voice.draw(ctx, Guitar1St3);
Guitar1_St3_2Voice.draw(ctx, Guitar1St3);


Guitar1_beam3_1.setContext(ctx).draw();
Guitar1_beam3_2.setContext(ctx).draw();


 スクリプトは以下のようなものです。
const Guitar1_ties3 = [
<syntaxhighlight lang="javascript">
    new StaveTie({
<div id="output3"></div>
        first_note: Guitar1_notes3_1[0],
//******************ここから複数の楽譜表示における共通のスクリプト**
        last_note: Guitar1_notes3_1[1],
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js"></script>
        first_indices: [0],
<script>
        last_indices: [0],
const {
    }),
  Renderer,
    new StaveTie({
  Stave,
        first_note: Guitar1_notes3_1[1],
  StaveNote,
        last_note: Guitar1_notes3_1[2],
   Voice,
        first_indices: [0],
   Formatter
        last_indices: [0],
} = Vex.Flow;
    }),
//******************ここまで共通**
    new StaveTie({
// Create an SVG renderer and attach it to the DIV element named "boo".
        first_note: Guitar1_notes3_1[2],
const div3 = document.getElementById('output3');
        last_note: Guitar1_notes3_1[3],
const renderer3 = new Renderer(div3, Renderer.Backends.SVG);
        first_indices: [0],
        last_indices: [0],
    }),
    new StaveTie({
        first_note: Guitar1_notes3_1[3],
        last_note: Guitar1_notes3_1[4],
        first_indices: [0],
        last_indices: [0],
    }),
    new StaveTie({
        first_note: Guitar1_notes3_1[6],
        last_note: Guitar1_notes3_1[7],
        first_indices: [0],
        last_indices: [0],
    }),
];
 
Guitar1_ties3.forEach((t) => {
    t.setContext(ctx).draw();
});
 
var Guitar1_vibrato3 = new VF.VibratoBracket({
   start: Guitar1_notes3_1[7],
   stop: null,
});
Guitar1_vibrato3.setLine(0);
Guitar1_vibrato3.setHarsh(true);
Guitar1_vibrato3.setContext(ctx).draw();
 
const Guitar1St4 = new Stave(Guitar1St3.width + Guitar1St3.x, Guitar1St1.y, nStaveWidth).setContext(ctx);
Guitar1St4.draw();
 
const Guitar1_gracenotes4 = [
  new VF.GraceNote({ keys: ['a/4'], duration: '8', slash: true })
];


// Configure the rendering context.
const Guitar1_notes4_1 = [
renderer3.resize(500, 200);
  new VF.StaveNote({ keys: ["g/4"], duration: "8" }),
const context3 = renderer3.getContext();
  new VF.StaveNote({ keys: ["a/4"], duration: "8" }),
  new VF.StaveNote({ keys: ["g/4"], duration: "8" }),
  new VF.StaveNote({ keys: ["b/4"], duration: "8" }),
  new VF.StaveNote({ keys: ["b/4"], duration: "4" }),
  new VF.StaveNote({ keys: ["b/4"], duration: "16", stem_direction: -1 }),
  new VF.StaveNote({ keys: ["c/5"], duration: "16", stem_direction: -1 }),
  new VF.StaveNote({ keys: ["b/4"], duration: "8", stem_direction: -1 }),
];
const Guitar1_notes4_2 = [
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),


// Create a stave of width 400 at position 10, 40 on the canvas.
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
const stave3 = new Stave(10, 40, 400);
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),


// Add a clef and time signature.
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
stave3.addClef('treble').addTimeSignature('4/4');
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),


// Connect it to the rendering context and draw!
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
stave3.setContext(context3).draw();
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),


// Create the notes
const notes3 = [
  new StaveNote({
    keys: ['c/5'],
    duration: 'q'
  }),
  new StaveNote({
    keys: ['d/4'],
    duration: 'q'
  }),
  new StaveNote({
    keys: ['b/4'],
    duration: 'qr'
  }),
  new StaveNote({
    keys: ['c/4', 'e/4', 'g/4'],
    duration: 'q'
  }),
];
];
Guitar1_notes4_1[7].addModifier(new VF.Articulation('a.').setPosition(3));
Guitar1_notes4_1[3].addModifier(new VF.GraceNoteGroup(Guitar1_gracenotes4, true), 0);


const notes32 = [new StaveNote({
SteveNoteUniqueIds = getUniqueStaveNotesIds(Guitar1_notes4_1, [0, 1]);
  keys: ['c/4'],
allFlagUniqueIds = updateAllFlagUniqueIds(SteveNoteUniqueIds);
  duration: 'w'
 
})];
const Guitar1_beam4_1 = new VF.Beam([Guitar1_notes4_1[2], Guitar1_notes4_1[3]]);
const Guitar1_beam4_2 = new VF.Beam([Guitar1_notes4_1[5], Guitar1_notes4_1[6], Guitar1_notes4_1[7]]);
 
var Guitar1_St4_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });
Guitar1_St4_1Voice.setStrict(true);
Guitar1_St4_1Voice.addTickables(Guitar1_notes4_1);
 
var Guitar1_St4_2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });
Guitar1_St4_2Voice.setStrict(true);
Guitar1_St4_2Voice.addTickables(Guitar1_notes4_2);
 
var formatterGuitar1_St4_1 = new Vex.Flow.Formatter().joinVoices([Guitar1_St4_2Voice, Guitar1_St4_1Voice]);
formatterGuitar1_St4_1.format([Guitar1_St4_2Voice, Guitar1_St4_1Voice], nStaveWidth - 30);
Guitar1_St4_1Voice.draw(ctx, Guitar1St4);
Guitar1_St4_2Voice.draw(ctx, Guitar1St4);
 
Guitar1_beam4_1.setContext(ctx).draw();
Guitar1_beam4_2.setContext(ctx).draw();


// Create a voice in 4/4 and add above notes
shiftGuitar1_1 = addShift(
const voices3 = [
  Guitar1_notes4_1,
  new Voice({
  [0, 1],
    num_beats: 4,
  [4, 3.5]
    beat_value: 4
);
  }).addTickables(notes3),
 
  new Voice({
const Guitar1_ties4 = [
    num_beats: 4,
    new StaveTie({
    beat_value: 4
        first_note: Guitar1_notes4_1[0],
  }).addTickables(notes32),
        last_note: Guitar1_notes4_1[1],
        first_indices: [0],
        last_indices: [0],
    }),
    new StaveTie({
        first_note: Guitar1_notes4_1[1],
        last_note: Guitar1_notes4_1[2],
        first_indices: [0],
        last_indices: [0],
    }),
    new StaveTie({
        first_note: Guitar1_notes4_1[3],
        last_note: Guitar1_notes4_1[4],
        first_indices: [0],
        last_indices: [0],
    }),
    new StaveTie({
        first_note: Guitar1_notes4_1[5],
        last_note: Guitar1_notes4_1[6],
        first_indices: [0],
        last_indices: [0],
    }),
];
];


// Format and justify the notes to 400 pixels.
Guitar1_ties4.forEach((t) => {
new Formatter().joinVoices(voices3).format(voices3, 350);
    t.setContext(ctx).draw();
});
 


// Render voices.
const Guitar1_tab1 = new Stave(Guitar1St1.x, Guitar1St1.y + 110, nHeadMargin + nStaveWidth).setContext(ctx);
voices3.forEach(function(v) {
for (var i = 0; i < 5; i++) {
   v.draw(context3, stave3);
  if (i == 0) continue;
});
  Guitar1_tab1.setConfigForLine(i, {visible: false} );
</syntaxhighlight>
}
Guitar1_tab1.draw();
 
const Guitar1_tab2 = new Stave(Guitar1_tab1.width + Guitar1_tab1.x, Guitar1_tab1.y, nStaveWidth).setContext(ctx);
for (var i = 0; i < 5; i++) {
   if (i == 0) continue;
  Guitar1_tab2.setConfigForLine(i, {visible: false} );
}
Guitar1_tab2.draw();
 
const Guitar1_tab3 = new Stave(Guitar1_tab2.width + Guitar1_tab2.x, Guitar1_tab1.y, nStaveWidth).setContext(ctx);
for (var i = 0; i < 5; i++) {
  if (i == 0) continue;
  Guitar1_tab3.setConfigForLine(i, {visible: false} );
}
Guitar1_tab3.draw();
 
const Guitar1_tab4 = new Stave(Guitar1_tab3.width + Guitar1_tab3.x, Guitar1_tab1.y, nStaveWidth).setContext(ctx);
for (var i = 0; i < 5; i++) {
  if (i == 0) continue;
  Guitar1_tab4.setConfigForLine(i, {visible: false} );
}
Guitar1_tab4.draw();
 
 
 
const Guitar1_Tab1 = new Stave(Guitar1St1.x, Guitar1St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);
Guitar1_Tab1.draw();


Stave9Pos.x = Guitar1_Tab1.x;
Stave9Pos.y = Guitar1_Tab1.y;


 和音を除いて、通常、一人では演奏できないような記譜法を2Voicesと呼んでいます。和音を引けない楽器ならそれだけで2Voices 3Voicesとも言えますが、この例のように1小節の中を休符と音符とで分かち合うのを1Voiceとした考え方を保有する記譜の場合は、特別な記述が必要です。別の音という意味付けになります。スコア譜なんかではよく2Voiceや3Voiceの記述が入ります。アレンジするうえで、音を足していくことはよくあるためです。ただしスコア譜では、一小節を短くして |1Voice(2Voice)|のように記譜している方式もよくあります。パートを増やせばいいじゃんと思いますが、限られたスペースにちょっとした音のためだけにパートを増やすことは通常は、実施しません。
var connector9_2 = new VF.StaveConnector(Guitar1St1, Guitar1_Tab1);
connector9_2.setType(VF.StaveConnector.type.BRACKET);
connector9_2.setContext(ctx);
connector9_2.draw();


Guitar1Inst.x = VocalSt1.x - 30;
Guitar1Inst.y = Guitar1St1.y + ((Guitar1_Tab1.y - Guitar1St1.y) / 2) + 90;


 const notes32の部分の定義のように、音符の定義を別で実施します。Voiceを生成するときに、2つの音符をまとめるときに配列に個別のオブジェクトとして定義します。そして作られた配列2の大きさのVoiceをFormatter関数を呼び出して、そのメンバ関数 joinVoices で結合します。joinVoices 関数は返り値が formatter 形式で .format も Formatter のメンバ関数です。そして 350px の中に描画するようになります。そして、2要素の配列の Voices それぞれを繰り返し処理によって、引数の描画エリア context3 五線譜 stave3 に音符を配置して描画します。


const Guitar1_Tab1_1 = new Stave(Guitar1_Tab1.x + nHeadMargin + 20, Guitar1_Tab1.y, 0).setContext(ctx);
Guitar1_Tab1_1.setBegBarType(VF.Barline.type.NONE);
Guitar1_Tab1_1.setEndBarType(VF.Barline.type.NONE);
Guitar1_Tab1_1.draw();


=== '''五線譜に音符を配置 付点臨時記号''' ===
const Guitar1_tab_notes1_1 = [
<div id="output4"></div>
  new VF.GhostNote({ keys: ["a/3", "e/4", "a/4", "c/5"], duration: "2" }),
  new VF.StaveNote({ keys: ["b/4"], duration: "8", stem_direction: -1 }),
  dotted(new VF.StaveNote({ keys: ["f/5"], duration: "4d", stem_direction: -1 })),
];
const Guitar1_tab_notes1_2 = [
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),


  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),


 スクリプトは以下のようなものです。
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
<syntaxhighlight lang="javascript">
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
<div id="output4"></div>
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
//******************ここから複数の楽譜表示における共通のスクリプト**
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js"></script>
 
<script>
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
const {
   new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  Renderer,
   new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  Stave,
   new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
   StaveNote,
 
  Voice,
];
   Accidental,
UniqueIds = getUniqueNoteheadIds(Guitar1_tab_notes1_1, [1, 2]);
  Formatter,
allUniqueIds = updateAllUniqueIds(UniqueIds);
   Dot
} = Vex.Flow;
//******************ここまで共通**
</script>
<script>
// Create an SVG renderer and attach it to the DIV element named "boo".
const div4 = document.getElementById('output4');
const renderer4 = new Renderer(div4, Renderer.Backends.SVG);


// Configure the rendering context.
var Guitar1_tab_St1_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });
renderer4.resize(500, 200);
Guitar1_tab_St1_1Voice.setStrict(true);
const context4 = renderer4.getContext();
Guitar1_tab_St1_1Voice.addTickables(Guitar1_tab_notes1_1);


// Create a stave of width 400 at position 10, 40 on the canvas.
var Guitar1_tab_St1_2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });
const stave4 = new Stave(10, 40, 400);
Guitar1_tab_St1_2Voice.setStrict(true);
Guitar1_tab_St1_2Voice.addTickables(Guitar1_tab_notes1_2);


// Add a clef and time signature.
var formatterGuitar1_tab_St1_1 = new Vex.Flow.Formatter().joinVoices([Guitar1_tab_St1_2Voice, Guitar1_tab_St1_1Voice]);
stave4.addClef('treble').addTimeSignature('4/4');
formatterGuitar1_tab_St1_1.format([Guitar1_tab_St1_2Voice, Guitar1_tab_St1_1Voice], nStaveWidth - 20 - 10);
Guitar1_tab_St1_1Voice.draw(ctx, Guitar1_Tab1_1);
Guitar1_tab_St1_2Voice.draw(ctx, Guitar1_Tab1_1);


// Connect it to the rendering context and draw!
shiftGuitar1_tab1 = addShift(
stave4.setContext(context4).draw();
  Guitar1_tab_notes1_1,
  [0, 0, 0, 0, 1,  2],
  [3, 2, 1, 0, 1, -1]
);


// Create the notes
 
const notes4 = [
 
   dotted(new StaveNote({
const Guitar1_Tab2 = new Stave(Guitar1_Tab1.width + Guitar1_Tab1.x, Guitar1_Tab1.y, nStaveWidth).setContext(ctx);
    keys: ['c##/5'],
Guitar1_Tab2.draw();
    duration: '8d'
 
   }).addModifier(new Accidental('##'))),
const Guitar1_tab_gracenotes2 = [
   new StaveNote({
   new VF.GraceNote({ keys: ['a/5'], duration: '8', slash: true })
    keys: ['db/4'],
   .addModifier(new VF.Accidental('#'), 0)
    duration: '16'
];
   }).addModifier(new Accidental('b')),
 
   dotted(new StaveNote({
const Guitar1_tab_notes2_1 = [
    keys: ['b/4', 'd/5', 'f/5'],
   new VF.StaveNote({ keys: ["b/4"], duration: "8", stem_direction: -1 })
    duration: 'h'
   .addModifier(new VF.Accidental('n'), 0),
   }).addModifier(new Accidental('#'),0),[0, 2]),
   new VF.StaveNote({ keys: ["b/4"], duration: "8", stem_direction: -1 }),
   dotted(new StaveNote({
  new VF.StaveNote({ keys: ["d/5"], duration: "8", stem_direction: -1 }),
    keys: ['c/4', 'e/4', 'g/4'],
  new VF.StaveNote({ keys: ["b/4"], duration: "8", stem_direction: -1 }),
    duration: '8'
   new VF.StaveNote({ keys: ["f/5"], duration: "8" }),
  })),
  new VF.StaveNote({ keys: ["d/5"], duration: "8" }),
   new VF.StaveNote({ keys: ["d/5"], duration: "8" }),
  new VF.StaveNote({ keys: ["b/4"], duration: "8" }),
];
];
const Guitar1_tab_notes2_2 = [
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),


Formatter.FormatAndDraw(context4, stave4, notes4);
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),


function dotted(staveNote, noteIndex = -1) {
];
  if (noteIndex < 0) {
Guitar1_tab_notes2_1[0].addModifier(new VF.GraceNoteGroup(Guitar1_tab_gracenotes2, false), 0);
    Dot.buildAndAttach([staveNote], {
 
      all: true
UniqueIds = getUniqueNoteheadIds(Guitar1_tab_notes2_1, [0, 1, 2, 3, 4, 5, 6, 7]);
    });
allUniqueIds = updateAllUniqueIds(UniqueIds);
  } else {
 
    for(noteIndexValue of noteIndex){
const Guitar1_tab_beam2_1 = new VF.Beam([Guitar1_tab_notes2_1[0], Guitar1_tab_notes2_1[1], Guitar1_tab_notes2_1[2], Guitar1_tab_notes2_1[3]]);
      Dot.buildAndAttach([staveNote], {
const Guitar1_tab_beam2_2 = new VF.Beam([Guitar1_tab_notes2_1[4], Guitar1_tab_notes2_1[5], Guitar1_tab_notes2_1[6], Guitar1_tab_notes2_1[7]]);
        index: noteIndexValue
 
      });
var Guitar1_tab_St2_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });
    }
Guitar1_tab_St2_1Voice.setStrict(true);
  }
Guitar1_tab_St2_1Voice.addTickables(Guitar1_tab_notes2_1);
  return staveNote;
 
}
var Guitar1_tab_St2_2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });
</script>
Guitar1_tab_St2_2Voice.setStrict(true);
</syntaxhighlight>
Guitar1_tab_St2_2Voice.addTickables(Guitar1_tab_notes2_2);


var formatterGuitar1_tab_St2_1 = new Vex.Flow.Formatter().joinVoices([Guitar1_tab_St2_2Voice, Guitar1_tab_St2_1Voice]);
formatterGuitar1_tab_St2_1.format([Guitar1_tab_St2_2Voice, Guitar1_tab_St2_1Voice], nStaveWidth - 20);
Guitar1_tab_St2_1Voice.draw(ctx, Guitar1_Tab2);
Guitar1_tab_St2_2Voice.draw(ctx, Guitar1_Tab2);


 付点を付けるにはDot.buildAndAttach([ staveNoteオブジェクト ], { index: 数値 }) といった関数を実行する必要があります。例では何度も呼び出すのが面倒なので、ユーザ関数を定義しています。公式では、特定のひとつの音符にしか、付点をつけることができないユーザ関数になっていたので、引数に数値単独の値を付与するところに、数値配列に、何番目の音符に付点をつけるかを指定するようなものに変更しています。Formatter.FormatAndDraw(context4, stave4, notes4); だけでも五線譜に音符を描画できるという便利な一面も紹介してくれています。
shiftGuitar1_tab2 = addShift(
  Guitar1_tab_notes2_1,
  [0, 0, 0, 0, 1, 1, 2, 3, 4, 4, 5, 6, 7],
  [1, 0, 1, 0, 1, 0, 0, 1, 2, 1, 2, 2, 3]
);


Guitar1_tab_beam2_1.setContext(ctx).draw();
Guitar1_tab_beam2_2.setContext(ctx).draw();


 臨時記号をつける処理をしているが、keys: ['c##/5']のように指定しても描画には反映されない。描画に影響しているのは、.addModifier(new Accidental('#'), 0) という部分です。一つ目の引数で Accidental オブジェクトのコンストラクタ引数に臨時記号の種類を与えています。##が二重シャープ。#がシャープ。bがフラット。bbが二重フラットです。今回は使いませんでしたが、ナチュラルはnです。.addModifier の2つめの引数はコードになっているときの、何番目の音に適用するかを指定しています。
const Guitar1_Tab3 = new Stave(Guitar1_Tab2.width + Guitar1_Tab2.x, Guitar1_Tab1.y, nStaveWidth).setContext(ctx);
Guitar1_Tab3.draw();


const Guitar1_tab_notes3_1 = [
  new VF.StaveNote({ keys: ["d/5"], duration: "16" }),
  new VF.StaveNote({ keys: ["d/5"], duration: "16" }),
  new VF.StaveNote({ keys: ["d/5"], duration: "16" }),
  new VF.StaveNote({ keys: ["d/5"], duration: "16" }),
  new VF.StaveNote({ keys: ["d/5"], duration: "8" }),
  new VF.StaveNote({ keys: ["g/4"], duration: "16" }),
  new VF.StaveNote({ keys: ["g/4"], duration: "16" }),
  new VF.GhostNote({ keys: ["b/4"], duration: "2" }),
];
const Guitar1_tab_notes3_2 = [
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),


 改めてまとめると、臨時記号の種類は以下のようになっています。
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
<table style="width: 100%; text-align: left; border-collapse: collapse; border-spacing: 0;">
   new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
<tr style=" background: #778ca3; border-right: solid 1px #778ca3; color: #ffffff;">
   new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
   <th style="width: 200px;">シーケンス</th>
   new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
   <th>意味</th>
 
   </tr>
   new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
<tr>
   new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
   <td>n</td>
   new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
   <td>ナチュラル</td>
   new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
</tr>
 
<tr style=" background: #dddddd;">
   new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
   <td>#</td>
   new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
   <td>シャープ(半音上げる)</td>
   new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
</tr>
   new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
<tr>
   <td>##</td>
   <td>ダブルシャープ(半音2回上げる)</td>
</tr>
<tr style=" background: #dddddd;">
   <td>b</td>
   <td>フラット(半音下げる)</td>
</tr>
<tr>
  <td>bb</td>
  <td>ダブルフラット(半音2回下げる)</td>
</tr>
</table>


];
UniqueIds = getUniqueNoteheadIds(Guitar1_tab_notes3_1, [0, 1, 2, 3, 4, 5, 6, 7]);
allUniqueIds = updateAllUniqueIds(UniqueIds);


const Guitar1_tab_beam3_1 = new VF.Beam([Guitar1_tab_notes3_1[0], Guitar1_tab_notes3_1[1], Guitar1_tab_notes3_1[2], Guitar1_tab_notes3_1[3]]);
const Guitar1_tab_beam3_2 = new VF.Beam([Guitar1_tab_notes3_1[4], Guitar1_tab_notes3_1[5], Guitar1_tab_notes3_1[6]]);


 Dot.…によって付点をつけるだけで、長さに不整合が起こっても記譜に問題は起こりません。どちらかというと一小節の中に納まるように配置されるかは、durationの組み合わせのほうが重要です。
var Guitar1_tab_St3_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });
Guitar1_tab_St3_1Voice.setStrict(true);
Guitar1_tab_St3_1Voice.addTickables(Guitar1_tab_notes3_1);


var Guitar1_tab_St3_2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });
Guitar1_tab_St3_2Voice.setStrict(true);
Guitar1_tab_St3_2Voice.addTickables(Guitar1_tab_notes3_2);


 今回はト音記号 treble からヘ音記号 bass に変えました。他にも以下のような記号があります。
var formatterGuitar1_tab_St3_1 = new Vex.Flow.Formatter().joinVoices([Guitar1_tab_St3_2Voice, Guitar1_tab_St3_1Voice]);
<table style="width: 100%; text-align: left; border-collapse: collapse; border-spacing: 0;">
formatterGuitar1_tab_St3_1.format([Guitar1_tab_St3_2Voice, Guitar1_tab_St3_1Voice], nStaveWidth - 20);
<tr style=" background: #778ca3; border-right: solid 1px #778ca3; color: #ffffff;">
Guitar1_tab_St3_1Voice.draw(ctx, Guitar1_Tab3);
   <th style="width: 200px;">シーケンス</th>
Guitar1_tab_St3_2Voice.draw(ctx, Guitar1_Tab3);
   <th>意味</th>
 
   </tr>
shiftGuitar1_tab3 = addShift(
<tr>
  Guitar1_tab_notes3_1,
   <td>treble</td>
  [0, 1, 2, 3, 4, 5, 6, 7],
   <td>ト音記号 &#x1D11E;</td>
  [2, 2, 2, 2, 2, 4, 4, 4]
</tr>
);
<tr style=" background: #dddddd;">
 
   <td>bass</td>
Guitar1_tab_beam3_1.setContext(ctx).draw();
   <td>ヘ音記号 &#x1D122;</td>
Guitar1_tab_beam3_2.setContext(ctx).draw();
</tr>
 
<tr>
var Guitar1_tab_vibrato3 = new VF.VibratoBracket({
   <td>alto</td>
  start: Guitar1_tab_notes3_1[7],
   <td>ハ音記号(アルト) &#x1D121;</td>
  stop: null,
</tr>
});
<tr style=" background: #dddddd;">
Guitar1_tab_vibrato3.setLine(1);
   <td>percussion</td>
Guitar1_tab_vibrato3.setHarsh(true);
   <td>打楽器記号</td>
Guitar1_tab_vibrato3.setContext(ctx).draw();
</tr>
 
<tr>
 
   <td>tenor</td>
 
   <td>ハ音記号(テナー) &#x1D121;一つ上にシフト</td>
const Guitar1_Tab4 = new Stave(Guitar1_Tab3.width + Guitar1_Tab3.x, Guitar1_Tab1.y, nStaveWidth).setContext(ctx);
</tr>
Guitar1_Tab4.draw();
<tr style=" background: #dddddd;">
 
   <td>soprano</td>
const Guitar1_tab_gracenotes4 = [
  <td>ハ音記号(ソプラノ) &#x1D121;二つ下にシフト</td>
  new VF.GraceNote({ keys: ['d/5'], duration: '8', slash: true })
</tr>
];
<tr>
 
  <td>mezzo-soprano</td>
const Guitar1_tab_notes4_1 = [
  <td>ハ音記号(メゾソプラノ) &#x1D121;一つ下にシフト</td>
  new VF.StaveNote({ keys: ["d/5"], duration: "8" }),
</tr>
   new VF.StaveNote({ keys: ["d/5"], duration: "8" }),
<tr style=" background: #dddddd;">
  new VF.StaveNote({ keys: ["d/5"], duration: "8" }),
  <td>baritone-c</td>
   new VF.StaveNote({ keys: ["d/5"], duration: "8" }),
  <td>ハ音記号(バリトン) &#x1D121;二つ上にシフト</td>
   new VF.StaveNote({ keys: ["d/5"], duration: "4" }),
</tr>
  new VF.StaveNote({ keys: ["b/4"], duration: "16", stem_direction: -1 }),
<tr>
   new VF.StaveNote({ keys: ["b/4"], duration: "16", stem_direction: -1 }),
   <td>baritone-f</td>
   new VF.StaveNote({ keys: ["b/4"], duration: "8", stem_direction: -1 }),
   <td>ヘ音記号(バリトン) &#x1D122;一つ下にシフト</td>
];
</tr>
const Guitar1_tab_notes4_2 = [
<tr style=" background: #dddddd;">
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
   <td>subbass</td>
   new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
   <td>ヘ音記号(サブバス) &#x1D122;一つ上にシフト</td>
   new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
</tr>
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
<tr>
 
  <td>french</td>
   new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  <td>ト音記号(フレンチ) &#x1D11E;一つ下にシフト</td>
   new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
</tr>
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
</table>
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
 
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
   new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
   new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
 
   new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
   new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
  new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
   new VF.GhostNote({ keys: ["f/4"], duration: "16"}),
 
];
Guitar1_tab_notes4_1[3].addModifier(new VF.GraceNoteGroup(Guitar1_tab_gracenotes4, false), 0);
 
SteveNoteUniqueIds = getUniqueStaveNotesIds(Guitar1_tab_notes4_1, [0, 1]);
allFlagUniqueIds = updateAllFlagUniqueIds(SteveNoteUniqueIds);
 
UniqueIds = getUniqueNoteheadIds(Guitar1_tab_notes4_1, [0, 1, 2, 3, 4, 5, 6, 7]);
allUniqueIds = updateAllUniqueIds(UniqueIds);
 
const Guitar1_tab_beam4_1 = new VF.Beam([Guitar1_tab_notes4_1[2], Guitar1_tab_notes4_1[3]]);
const Guitar1_tab_beam4_2 = new VF.Beam([Guitar1_tab_notes4_1[5], Guitar1_tab_notes4_1[6], Guitar1_tab_notes4_1[7]]);
 
var Guitar1_tab_St4_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });
Guitar1_tab_St4_1Voice.setStrict(true);
Guitar1_tab_St4_1Voice.addTickables(Guitar1_tab_notes4_1);
 
var Guitar1_tab_St4_2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });
Guitar1_tab_St4_2Voice.setStrict(true);
Guitar1_tab_St4_2Voice.addTickables(Guitar1_tab_notes4_2);
 
var formatterGuitar1_tab_St4_1 = new Vex.Flow.Formatter().joinVoices([Guitar1_tab_St4_2Voice, Guitar1_tab_St4_1Voice]);
formatterGuitar1_tab_St4_1.format([Guitar1_tab_St4_2Voice, Guitar1_tab_St4_1Voice], nStaveWidth - 20);
Guitar1_tab_St4_1Voice.draw(ctx, Guitar1_Tab4);
Guitar1_tab_St4_2Voice.draw(ctx, Guitar1_Tab4);
 
shiftGuitar1_tab4 = addShift(
  Guitar1_tab_notes4_1,
   [0, 1, 2, 3, 3, 4, 5, 6, 7, 7],
   [2, 2, 2, 2, 2, 2, 1, 1, 1, 1]
);
 
shiftGuitar1_tab4_tr = addShift(
  Guitar1_tab_notes4_1,
   [0, 1],
   [3, 2.5]
);
 
Guitar1_tab_beam4_1.setContext(ctx).draw();
Guitar1_tab_beam4_2.setContext(ctx).draw();
 
 
const Guitar2_St1 = new Stave(Guitar1_Tab1.x, Guitar1_Tab1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);
Guitar2_St1.addClef("treble").setContext(ctx);
Guitar2_St1.addTimeSignature('4/4').setContext(ctx);
Guitar2_St1.addKeySignature('D').setContext(ctx);
Guitar2_St1.draw();
 
const Guitar2_St2 = new Stave(Guitar2_St1.width + Guitar2_St1.x, Guitar2_St1.y, nStaveWidth).setContext(ctx);
Guitar2_St2.draw();


 
const Guitar2_St3 = new Stave(Guitar2_St2.width + Guitar2_St2.x, Guitar2_St2.y, nStaveWidth).setContext(ctx);
Guitar2_St3.draw();


=== '''五線譜に音符を配置 連桁(れんこう)・ビーム・梁  new Beam()による方法''' ===
const Guitar2_St4 = new Stave(Guitar2_St3.width + Guitar2_St3.x, Guitar2_St3.y, nStaveWidth).setContext(ctx);
<div id="output5"></div>
Guitar2_St4.draw();


const Guitar2_Tab1 = new Stave(Guitar2_St1.x, Guitar2_St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);
Guitar2_Tab1.draw();


 スクリプトは以下のようなものです。
Guitar2Tab1.x = Guitar2_Tab1.x;
<syntaxhighlight lang="javascript">
Guitar2Tab1.y = Guitar2_Tab1.y;
<div id="output5"></div>
//******************ここから複数の楽譜表示における共通のスクリプト**
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js"></script>
<script>
const {
  Renderer,
  Stave,
  StaveNote,
  Voice,
  Accidental,
  Beam,
  Formatter,
  Dot
} = Vex.Flow;
//******************ここまで共通**
</script>
<script>
// Create an SVG renderer and attach it to the DIV element named "boo".
const div5 = document.getElementById('output5');
const renderer5 = new Renderer(div5, Renderer.Backends.SVG);


// Configure the rendering context.
const Guitar2_Tab2 = new Stave(Guitar2_Tab1.width + Guitar2_Tab1.x, Guitar2_Tab1.y, nStaveWidth).setContext(ctx);
renderer5.resize(500, 200);
Guitar2_Tab2.draw();
const context5 = renderer5.getContext();


// Create a stave of width 400 at position 10, 40 on the canvas.
const Guitar2_Tab3 = new Stave(Guitar2_Tab2.width + Guitar2_Tab2.x, Guitar2_Tab2.y, nStaveWidth).setContext(ctx);
const stave5 = new Stave(10, 40, 400);
Guitar2_Tab3.draw();


// Add a clef and time signature.
const Guitar2_Tab4 = new Stave(Guitar2_Tab3.width + Guitar2_Tab3.x, Guitar2_Tab3.y, nStaveWidth).setContext(ctx);
stave5.addClef('treble').addTimeSignature('4/4');
Guitar2_Tab4.draw();
 
var Guitar2_connect = new VF.StaveConnector(Guitar2_St1, Guitar2_Tab1);
Guitar2_connect.setType(VF.StaveConnector.type.BRACKET);
Guitar2_connect.setContext(ctx);
Guitar2_connect.draw();
 
const Guitar2_Tab1_tab = new Stave(Guitar2_Tab1.x, Guitar2_Tab1.y - 10, nHeadMargin + nStaveWidth).setContext(ctx);
for (var i = 0; i < 5; i++) {
  if (i == 0) continue;
  Guitar2_Tab1_tab.setConfigForLine(i, {visible: false} );
}
Guitar2_Tab1_tab.draw();


// Connect it to the rendering context and draw!
const Guitar2_Tab2_tab = new Stave(Guitar2_Tab1_tab.width + Guitar2_Tab1_tab.x, Guitar2_Tab1_tab.y, nStaveWidth).setContext(ctx);
stave5.setContext(context5).draw();
for (var i = 0; i < 5; i++) {
  if (i == 0) continue;
  Guitar2_Tab2_tab.setConfigForLine(i, {visible: false} );
}
Guitar2_Tab2_tab.draw();


// Create the notes
const Guitar2_Tab3_tab = new Stave(Guitar2_Tab2_tab.width + Guitar2_Tab2_tab.x, Guitar2_Tab2_tab.y, nStaveWidth).setContext(ctx);
const notes51 = [
for (var i = 0; i < 5; i++) {
    dotted(
  if (i == 0) continue;
        new StaveNote({
  Guitar2_Tab3_tab.setConfigForLine(i, {visible: false} );
            keys: ["e##/5"],
}
            duration: "8d",
Guitar2_Tab3_tab.draw();
        }).addModifier(new Accidental("##"))
    ),
    new StaveNote({
        keys: ["b/4"],
        duration: "16",
    }).addModifier(new Accidental("b")),
];


const notes52 = [
const Guitar2_Tab4_tab = new Stave(Guitar2_Tab3_tab.width + Guitar2_Tab3_tab.x, Guitar2_Tab3_tab.y, nStaveWidth).setContext(ctx);
    new StaveNote({
for (var i = 0; i < 5; i++) {
        keys: ["c/4"],
  if (i == 0) continue;
        duration: "8",
  Guitar2_Tab4_tab.setConfigForLine(i, {visible: false} );
    }),
}
    new StaveNote({
Guitar2_Tab4_tab.draw();
        keys: ["d/4"],
 
        duration: "16",
Guitar2Inst.x = Guitar2_St1.x - 30;
    }),
Guitar2Inst.y = Guitar2_St1.y + ((Guitar2_Tab1.y - Guitar2_St1.y) / 2) + 90;
    new StaveNote({
 
        keys: ["e/4"],
const Base_St1 = new Stave(Guitar2_Tab1.x, Guitar2_Tab1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);
        duration: "16",
Base_St1.addClef("bass").setContext(ctx);
    }).addModifier(new Accidental("b")),
Base_St1.addTimeSignature('4/4').setContext(ctx);
];
Base_St1.addKeySignature('D').setContext(ctx);
Base_St1.draw();
 
const Base_St2 = new Stave(Base_St1.width + Base_St1.x, Base_St1.y, nStaveWidth).setContext(ctx);
Base_St2.draw();
 
const Base_St3 = new Stave(Base_St2.width + Base_St2.x, Base_St2.y, nStaveWidth).setContext(ctx);
Base_St3.draw();
 
const Base_St4 = new Stave(Base_St3.width + Base_St3.x, Base_St3.y, nStaveWidth).setContext(ctx);
Base_St4.draw();
 
const Base_Tab1 = new Stave(Base_St1.x, Base_St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);
Base_Tab1.setEndBarType(VF.Barline.type.NONE);
for (var i = 0; i < 5; i++) {
  if (i != 0) continue;
  Base_Tab1.setConfigForLine(i, {visible: false} );
}
Base_Tab1.draw();
 
BaseTab1.x = Base_Tab1.x;
BaseTab1.y = Base_Tab1.y;
 
BaseInst.x = Base_St1.x - 30;
BaseInst.y = Base_St1.y + ((Base_Tab1.y - Base_St1.y) / 2) + 90;  


const notes53 = [
StaveBase1 = Base_Tab1;
    new StaveNote({
        keys: ["d/4"],
        duration: "16",
    }),
    new StaveNote({
        keys: ["e/4"],
        duration: "16",
    }).addModifier(new Accidental("#")),
    new StaveNote({
        keys: ["g/4"],
        duration: "32",
    }),
    new StaveNote({
        keys: ["a/4"],
        duration: "32",
    }),
    new StaveNote({
        keys: ["g/4"],
        duration: "16",
    }),
];


const notes54 = [
const Base_Tab2 = new Stave(Base_Tab1.width + Base_Tab1.x, Base_Tab1.y, nStaveWidth).setContext(ctx);
    new StaveNote({
Base_Tab2.setBegBarType(VF.Barline.type.NONE);
        keys: ["d/4"],
Base_Tab2.setEndBarType(VF.Barline.type.NONE);
        duration: "q",
for (var i = 0; i < 5; i++) {
    }),
  if (i != 0) continue;
];
  Base_Tab2.setConfigForLine(i, {visible: false} );
}
Base_Tab2.draw();


const allNotes5 = notes51.concat(notes52).concat(notes53).concat(notes54);
StaveBase2 = Base_Tab2;


// Create the beams for the first three groups.
const Base_Tab3 = new Stave(Base_Tab2.width + Base_Tab2.x, Base_Tab2.y, nStaveWidth).setContext(ctx);
// This hides the normal stems and flags.
Base_Tab3.setBegBarType(VF.Barline.type.NONE);
const beams5 = [new Beam(notes51), new Beam(notes52), new Beam(notes53)];
Base_Tab3.setEndBarType(VF.Barline.type.NONE);
for (var i = 0; i < 5; i++) {
  if (i != 0) continue;
  Base_Tab3.setConfigForLine(i, {visible: false} );
}
Base_Tab3.draw();


Formatter.FormatAndDraw(context5, stave5, allNotes5);
StaveBase3 = Base_Tab3;


// Draw the beams and stems.
const Base_Tab4 = new Stave(Base_Tab3.width + Base_Tab3.x, Base_Tab3.y, nStaveWidth).setContext(ctx);
beams5.forEach((b) => {
Base_Tab4.setBegBarType(VF.Barline.type.NONE);
    b.setContext(context5).draw();
Base_Tab4.setEndBarType(VF.Barline.type.NONE);
});
for (var i = 0; i < 5; i++) {
 
   if (i != 0) continue;
//********前の記譜と共通の関数です。2重定義しないように注意******
   Base_Tab4.setConfigForLine(i, {visible: false} );
function dotted(staveNote, noteIndex = -1) {
   if (noteIndex < 0) {
    Dot.buildAndAttach([staveNote], {
      all: true
    });
   } else {
    for(noteIndexValue of noteIndex){
      Dot.buildAndAttach([staveNote], {
        index: noteIndexValue
      });
    }
  }
  return staveNote;
}
}
//********ここまで
Base_Tab4.draw();
</script>
</syntaxhighlight>


StaveBase4 = Base_Tab4;


 音符の旗を描画せずにつなぐのを連桁といいます。表紙のひと固まりを繋ぎ演奏しやすいような表記にしています。8分音符の場合4つをつないで、2分音符のかたまりにしたりもします。例の楽譜では3拍目が16分音符で四分音符1つ分のひとかたまりになっています。16分音符の3つ目が32分なっています。キッチリ演奏しようとすると32分はめちゃくちゃ短いのでアタックからの立ち上がりが早い楽器でかつ技術力が要求される奏法になってきます。そんな演奏面の話はどうでもよいでしょうか。
var Base_connect = new VF.StaveConnector(Base_St1, Base_Tab1);
Base_connect.setType(VF.StaveConnector.type.BRACKET);
Base_connect.setContext(ctx);
Base_connect.draw();


const Drum_St1 = new Stave(Base_Tab1.x, Base_Tab1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);
Drum_St1.addClef("bass").setContext(ctx);
Drum_St1.addTimeSignature('4/4').setContext(ctx);
Drum_St1.draw();


 連桁は、Beam というシーケンスによって描画されます。Notesを連桁にしたい塊でひとつになるように作ると、const beams5 = [new Beam(notes51), new Beam(notes52), new Beam(notes53)];という記法によって、連桁のかたまりごとに配列にすることができます。このそれぞれの要素について関数、new Beam(notes51).setContext(context5).draw();のような操作によって蓮桁の描画準備がされます。小節の全体は const allNotes5 = notes51.concat(notes52).concat(notes53).concat(notes54); のように結合されたものを.FormatAndDraw(context5, stave5, allNotes5);のようにして描画されます。
DrumInst.x = Drum_St1.x - 30;
DrumInst.y = Drum_St1.y + 90;  


 
const Drum_St1_1 = new Stave(nHeadMargin + Base_Tab1.x, Base_Tab1.y + 120, 0).setContext(ctx);
Drum_St1_1.setBegBarType(VF.Barline.type.NONE);
Drum_St1_1.setEndBarType(VF.Barline.type.NONE);
Drum_St1_1.draw();


=== '''五線譜に音符を配置 連桁(れんこう)・ビーム・梁  Beam.generateBeams()による方法''' ===
const Drum_notes1_1 = [
<div id="output6"></div>
  new StaveNote({ keys: ["f/4"], duration: "4", stem_direction: -1 }),
  new StaveNote({ keys: ["c/4"], duration: "4r" }),
  new StaveNote({ keys: ["c/4"], duration: "8r" }),
  new StaveNote({ keys: ["f/4"], duration: "8", stem_direction: -1 }),
  new StaveNote({ keys: ["c/4"], duration: "8r" }),
  new StaveNote({ keys: ["f/4"], duration: "8", stem_direction: -1 })
];
const Drum_beam1_1 = new VF.Beam([Drum_notes1_1[3],Drum_notes1_1[5]]);


var Drum_St1_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });
Drum_St1_1Voice.setStrict(true);
Drum_St1_1Voice.addTickables(Drum_notes1_1);


 スクリプトは以下のようなものです。
const Drum_St1_2 = new Stave(nHeadMargin + Base_Tab1.x, Base_Tab1.y + 120, 0).setContext(ctx);
<syntaxhighlight lang="javascript">
Drum_St1_2.setBegBarType(VF.Barline.type.NONE);
<div id="output6"></div>
Drum_St1_2.setEndBarType(VF.Barline.type.NONE);
//******************ここから複数の楽譜表示における共通のスクリプト**
Drum_St1_2.draw();
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js"></script>
<script>
const {
  Renderer,
  Stave,
  StaveNote,
  Voice,
  Accidental,
  Beam,
  Formatter,
  Dot
} = Vex.Flow;
//******************ここまで共通**
</script>
<script>
// Create an SVG renderer and attach it to the DIV element named "boo".
const div6 = document.getElementById("output6");
const renderer6 = new Renderer(div6, Renderer.Backends.SVG);


// Configure the rendering context.
const Drum_notes1_2 = [
renderer6.resize(500, 500);
  new VF.StaveNote({ keys: ["g/5"], duration: "8", stem_direction: 1 }),
const context6 = renderer6.getContext();
  new VF.StaveNote({ keys: ["g/5"], duration: "8", stem_direction: 1 }),
  new VF.StaveNote({ keys: ["c/5"], duration: "8", stem_direction: 1 }),
  new VF.StaveNote({ keys: ["g/5"], duration: "16", stem_direction: 1 }),
  new VF.StaveNote({ keys: ["c/5"], duration: "16", stem_direction: 1 }),
  new VF.StaveNote({ keys: ["g/5"], duration: "8", stem_direction: 1 }),
  new VF.StaveNote({ keys: ["g/5"], duration: "8", stem_direction: 1 }),
  new VF.StaveNote({ keys: ["c/5"], duration: "8", stem_direction: 1 }),
  new VF.StaveNote({ keys: ["g/5"], duration: "8", stem_direction: 1 })
];


// Create a stave of width 400 at position 10, 40 on the canvas.
const Drum_notes1_3 = [
const stave6 = new Stave(10, 40, 400);
  new VF.GhostNote({ keys: ["a/5"], duration: "16", stem_direction: 1 }),
  new VF.GhostNote({ keys: ["a/5"], duration: "16", stem_direction: 1 }),
  new VF.GhostNote({ keys: ["a/5"], duration: "16", stem_direction: 1 }),
  new VF.GhostNote({ keys: ["a/5"], duration: "16", stem_direction: 1 }),


// Add a clef and time signature.
  new VF.GhostNote({ keys: ["a/5"], duration: "16", stem_direction: 1 }),
stave6.addClef("treble").addTimeSignature("4/4");
  new VF.GhostNote({ keys: ["a/5"], duration: "16", stem_direction: 1 }),
  new VF.GhostNote({ keys: ["a/5"], duration: "16", stem_direction: 1 }),
  new VF.GhostNote({ keys: ["a/5"], duration: "16", stem_direction: 1 }),


// Connect it to the rendering context and draw!
  new VF.GhostNote({ keys: ["a/5"], duration: "16", stem_direction: 1 }),
stave6.setContext(context6).draw();
  new VF.GhostNote({ keys: ["a/5"], duration: "16", stem_direction: 1 }),
  new VF.GhostNote({ keys: ["a/5"], duration: "16", stem_direction: 1 }),
  new VF.GhostNote({ keys: ["a/5"], duration: "16", stem_direction: 1 }),


const notes6 = [
  new VF.GhostNote({ keys: ["a/5"], duration: "16", stem_direction: 1 }),
    dotted(new StaveNote({ keys: ["e##/5"], duration: "8d" }).addModifier(new Accidental("##"))),
  new VF.GhostNote({ keys: ["a/5"], duration: "16", stem_direction: 1 }),
    new StaveNote({ keys: ["b/4"], duration: "16" }).addModifier(new Accidental("b")),
  new VF.GhostNote({ keys: ["a/5"], duration: "16", stem_direction: 1 }),
    new StaveNote({ keys: ["c/4"], duration: "8" }),
  new VF.GhostNote({ keys: ["a/5"], duration: "16", stem_direction: 1 })
    new StaveNote({ keys: ["d/4"], duration: "16" }),
    new StaveNote({ keys: ["e/4"], duration: "16" }).addModifier(new Accidental("b")),
    new StaveNote({ keys: ["d/4"], duration: "16" }),
    new StaveNote({ keys: ["e/4"], duration: "16" }).addModifier(new Accidental("#")),
    new StaveNote({ keys: ["g/4"], duration: "32" }),
    new StaveNote({ keys: ["a/4"], duration: "32" }),
    new StaveNote({ keys: ["g/4"], duration: "16" }),
    new StaveNote({ keys: ["d/4"], duration: "q" }),
];
];


const beams6 = Beam.generateBeams(notes6);
UniqueIds = getUniqueNoteheadIds(Drum_notes1_2, [0, 1, 3, 5, 6, 8]);
Formatter.FormatAndDraw(context6, stave6, notes6);
allUniqueIds = updateAllUniqueIds(UniqueIds);
beams6.forEach((b) => {
 
    b.setContext(context6).draw();
const Drum_beam1_2_1 = new VF.Beam([Drum_notes1_2[0], Drum_notes1_2[1]]);
});
const Drum_beam1_2_2 = new VF.Beam([Drum_notes1_2[2], Drum_notes1_2[3], Drum_notes1_2[4]]);
//********前の記譜と共通の関数です。2重定義しないように注意******
const Drum_beam1_2_3 = new VF.Beam([Drum_notes1_2[5], Drum_notes1_2[6], Drum_notes1_2[7], Drum_notes1_2[8]]);
function dotted(staveNote, noteIndex = -1) {
 
  if (noteIndex < 0) {
var Drum_St1_2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });
    Dot.buildAndAttach([staveNote], {
Drum_St1_2Voice.setStrict(true);
      all: true
Drum_St1_2Voice.addTickables(Drum_notes1_2);
    });
 
  } else {
var Drum_St1_3Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });
    for(noteIndexValue of noteIndex){
Drum_St1_3Voice.setStrict(true);
      Dot.buildAndAttach([staveNote], {
Drum_St1_3Voice.addTickables(Drum_notes1_3);
        index: noteIndexValue
 
      });
var formatterDrum_St1_2 = new Vex.Flow.Formatter().joinVoices([Drum_St1_3Voice, Drum_St1_1Voice, Drum_St1_2Voice]);
    }
//formatter13_2.formatToStave([stave13_3Voice, stave13_1Voice, stave13_2Voice], stave13_2);
   }
formatterDrum_St1_2.format([Drum_St1_3Voice, Drum_St1_1Voice, Drum_St1_2Voice], nStaveWidth - 30);
   return staveNote;
Drum_St1_1Voice.draw(ctx, Drum_St1_2);
}
Drum_St1_2Voice.draw(ctx, Drum_St1_2);
//********ここまで
 
</script>
Drum_beam1_1.setContext(ctx).draw();
</syntaxhighlight>
 
Drum_beam1_2_1.setContext(ctx).draw();
Drum_beam1_2_2.setContext(ctx).draw();
Drum_beam1_2_3.setContext(ctx).draw();
 
shiftDrum1 = addShift(
   Drum_notes1_2,
   [0, 1, 2, 3, 5, 5, 6, 6, 7, 7, 8, 8],
  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1]
);




 notesで一小節分をまとめて定義した後、const beams6 = Beam.generateBeams(notes6); とするだけです。自動なので、思い通りになっていない可能性もありますが、8分音符4つは最大で二分音符にそれ以下は四分音符単位で連桁してくれるようです。連桁に含まれるので、ここまでの知識では連符には対応できないです。3連とか5/6/7/9/10/11/12…連とかは違う表記が必要です。また別の項目で確認するつもりなので、それまでは我慢です。自分もまだ知らないし。知らんけどじゃないし。本当に知らないし。本当に知らんけど。なんだけど。
const Drum_St2 = new Stave(Drum_St1.width + Drum_St1.x, Drum_St1.y, nStaveWidth).setContext(ctx);
Drum_St2.draw();




 連符って演奏上においては最難関だね。3連でも、2分三連はさらにムズイ。2分三連くらいの長さになると、適当だとさすがにだめだし、あってないことを多い。ビート分割して、感じないとね。2分三連の中抜きみたいに1個あるいは2個だけ鳴らすとか、ありえないくらいむずかしい。心で刻むのつらいな。演奏家としては向いてないんだろうな。
const Drum_St3 = new Stave(Drum_St2.width + Drum_St2.x, Drum_St1.y, nStaveWidth).setContext(ctx);
Drum_St3.draw();


 


=== '''五線譜に音符を配置 タイ''' ===
const Drum_St4 = new Stave(Drum_St3.width + Drum_St3.x, Drum_St1.y, nStaveWidth).setContext(ctx);
<div id="output7"></div>
Drum_St4.draw();




 スクリプトは以下のようなものです。
const Perc_St1 = new Stave(Drum_St1.x, Drum_St1.y + 100, nHeadMargin + nStaveWidth).setContext(ctx);
<syntaxhighlight lang="javascript">
Perc_St1.addTimeSignature('4/4').setContext(ctx);
<div id="output7"></div>
//******************ここから複数の楽譜表示における共通のスクリプト**
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js"></script>
<script>
const {
  Renderer,
  Stave,
  StaveNote,
  Voice,
  Accidental,
  Beam,
  Formatter,
  Dot,
  StaveTie
} = Vex.Flow;
//******************ここまで共通**
</script>
<script>
// Create an SVG renderer and attach it to the DIV element named "boo".
const div7 = document.getElementById("output7");
const renderer7 = new Renderer(div7, Renderer.Backends.SVG);


// Configure the rendering context.
const Perc_St1_1 = new Stave(nHeadMargin + Drum_St1.x, Drum_St1.y + 100, 0).setContext(ctx);
renderer7.resize(500, 200);
Perc_St1_1.setBegBarType(VF.Barline.type.NONE);
const context7 = renderer7.getContext();
Perc_St1_1.setEndBarType(VF.Barline.type.NONE);
Perc_St1_1.draw();


// Create a stave of width 400 at position 10, 40 on the canvas.
for (var i = 0; i < 5; i++) {
const stave7 = new Stave(10, 40, 400);
  if (i == 2) continue;
  Perc_St1.setConfigForLine(i, {visible: false} );
}
 
Perc_St1.draw();
 
PercInst.x = Perc_St1.x - 30;
PercInst.y = Perc_St1.y + 90;
 
var AllConnector = new VF.StaveConnector(VocalSt1, Perc_St1);
AllConnector.setType(VF.StaveConnector.type.SINGLE);
AllConnector.setContext(ctx);
AllConnector.draw();
 
const Perc_notes1_1 = [
  new VF.StaveNote({ keys: ["a/4"], duration: "16", stem_direction: -1 }),
  new VF.StaveNote({ keys: ["a/4"], duration: "16", stem_direction: -1 }),
  new VF.StaveNote({ keys: ["a/4"], duration: "16", stem_direction: -1 }),
  new VF.StaveNote({ keys: ["a/4"], duration: "16", stem_direction: -1 }),
 
  new VF.StaveNote({ keys: ["a/4"], duration: "16", stem_direction: -1 }),
  new VF.StaveNote({ keys: ["a/4"], duration: "16", stem_direction: -1 }),
  new VF.StaveNote({ keys: ["a/4"], duration: "16", stem_direction: -1 }),
  new VF.StaveNote({ keys: ["a/4"], duration: "16", stem_direction: -1 }),
 
  new VF.StaveNote({ keys: ["a/4"], duration: "16", stem_direction: -1 }),
  new VF.StaveNote({ keys: ["a/4"], duration: "16", stem_direction: -1 }),
  new VF.StaveNote({ keys: ["a/4"], duration: "16", stem_direction: -1 }),
  new VF.StaveNote({ keys: ["a/4"], duration: "16", stem_direction: -1 }),
 
  new VF.StaveNote({ keys: ["a/4"], duration: "16", stem_direction: -1 }),
  new VF.StaveNote({ keys: ["a/4"], duration: "16", stem_direction: -1 }),
  new VF.StaveNote({ keys: ["a/4"], duration: "16", stem_direction: -1 }),
  new VF.StaveNote({ keys: ["a/4"], duration: "16", stem_direction: -1 })
];
UniqueIds = getUniqueNoteheadIds(Perc_notes1_1, [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15]);
allUniqueIds = updateAllUniqueIds(UniqueIds);
 
const Perc_beam1_1_1 = new VF.Beam([Perc_notes1_1[0], Perc_notes1_1[1], Perc_notes1_1[2], Perc_notes1_1[3]]);
const Perc_beam1_1_2 = new VF.Beam([Perc_notes1_1[4], Perc_notes1_1[5], Perc_notes1_1[6], Perc_notes1_1[7]]);
const Perc_beam1_1_3 = new VF.Beam([Perc_notes1_1[8], Perc_notes1_1[9], Perc_notes1_1[10], Perc_notes1_1[11]]);
const Perc_beam1_1_4 = new VF.Beam([Perc_notes1_1[12], Perc_notes1_1[13], Perc_notes1_1[14], Perc_notes1_1[15]]);
 
var Perc_St1_1Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });
Perc_St1_1Voice.setStrict(true);
Perc_St1_1Voice.addTickables(Perc_notes1_1);
 
var formatterPerc_St1_1 = new Vex.Flow.Formatter().joinVoices([Perc_St1_1Voice]);
//formatterPerc_St1_1.formatToStave([stave17_1Voice], Perc_St1_1);
formatterPerc_St1_1.format([Perc_St1_1Voice], nStaveWidth - 30);
Perc_St1_1Voice.draw(ctx, Perc_St1_1);


// Add a clef and time signature.
Perc_beam1_1_1.setContext(ctx).draw();
stave7.addClef("treble").addTimeSignature("4/4");
Perc_beam1_1_2.setContext(ctx).draw();
Perc_beam1_1_3.setContext(ctx).draw();
Perc_beam1_1_4.setContext(ctx).draw();


// Connect it to the rendering context and draw!
Perc_note1_1_0.x = Perc_notes1_1[0].getAbsoluteX();
stave7.setContext(context7).draw();
Perc_note1_1_0.y = Perc_notes1_1[0].getStave().getYForLine(1);


const notes7 = [
shiftPerc1 = addShift(
    dotted(
  Perc_notes1_1,
        new StaveNote({
  [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
            keys: ["e##/5"],
  [4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4]
            duration: "8d",
);
        }).addModifier(new Accidental("##"))
    ),
    new StaveNote({
        keys: ["b/4"],
        duration: "16",
    }).addModifier(new Accidental("b")),
    new StaveNote({
        keys: ["c/4"],
        duration: "8",
    }),
    new StaveNote({
        keys: ["d/4"],
        duration: "16",
    }),
    new StaveNote({
        keys: ["d/4"],
        duration: "16",
    }),
    new StaveNote({
        keys: ["d/4", "A/3"],
        duration: "q",
    }),
    new StaveNote({
        keys: ["d/4", "A/3"],
        duration: "q",
    }),
];


const beams7 = Beam.generateBeams(notes7);
const Perc_St2 = new Stave(Perc_St1.width + Perc_St1.x, Perc_St1.y, nStaveWidth).setContext(ctx);
Formatter.FormatAndDraw(context7, stave7, notes7);
for (var i = 0; i < 5; i++) {
beams7.forEach(function (b) {
  if (i == 2) continue;
    b.setContext(context7).draw();
  Perc_St2.setConfigForLine(i, {visible: false} );
});
}
Perc_St2.draw();


const ties7 = [
const Perc_St3 = new Stave(Perc_St2.width + Perc_St2.x, Perc_St2.y, nStaveWidth).setContext(ctx);
    new StaveTie({
for (var i = 0; i < 5; i++) {
        first_note: notes7[4],
  if (i == 2) continue;
        last_note: notes7[5],
  Perc_St3.setConfigForLine(i, {visible: false} );
        first_indices: [0],
}
        last_indices: [0],
Perc_St3.draw();
     }),
 
     new StaveTie({
const Perc_St4 = new Stave(Perc_St3.width + Perc_St3.x, Perc_St3.y, nStaveWidth).setContext(ctx);
        first_note: notes7[5],
for (var i = 0; i < 5; i++) {
        last_note: notes7[6],
  if (i == 2) continue;
        first_indices: [1],
  Perc_St4.setConfigForLine(i, {visible: false} );
        last_indices: [1],
}
     }),
Perc_St4.draw();
];
 
})();
 
const svgElement2 = document.querySelector('#yonet202403Mid_Output01 svg');
svgElement2.style.backgroundColor = '#F5F5F5';
var svgContainer = document.getElementById('yonet202403Mid_Output01');
var svgElement = svgContainer.querySelector('svg');
 
var VocalText_options = {
    textContent: ["Vocal"], // 必須文字列
    strID: "VocalText", // 必須
    Stave_x: Vocal.x,
    Stave_y: Vocal.y,
    fontFamily: "Arial, sans-serif",
     fontSize: "20pt",
     Rotate: -90
};
insertTextToSVG(VocalText_options);
 
var EGuitarText_options = {
    textContent: ["E.Guitar1"], // 必須文字列
    strID: "EGuitarText", // 必須
    Stave_x: Guitar1Inst.x,
    Stave_y: Guitar1Inst.y,
    fontFamily: "Arial, sans-serif",
    fontSize: "20pt",
     Rotate: -90
};
insertTextToSVG(EGuitarText_options);


ties7.forEach((t) => {
var EGuitarTab_options = {
     t.setContext(context7).draw();
     textContent: ["@"], // 必須文字列
});
    strID: "EGuitarTab", // 必須
//********前の記譜と共通の関数です。2重定義しないように注意******
    Stave_x: Stave9Pos.x,
function dotted(staveNote, noteIndex = -1) {
    Stave_y: Stave9Pos.y,
  if (noteIndex < 0) {
    Stave_x_Offset: 10,
     Dot.buildAndAttach([staveNote], {
    Stave_y_Offset: 80,
      all: true
    fontFamily: "YonetMuFL, Arial",
     });
};
  } else {
insertTextToSVG(EGuitarTab_options);
     for(noteIndexValue of noteIndex){
 
      Dot.buildAndAttach([staveNote], {
insertTrilPathToSVG(shiftGuitar1_1);
        index: noteIndexValue
 
      });
var Guitar1_notes4_tr_option = {
     }
    textContent: ["tr."], // 必須文字列
  }
    strID: "Guitar1_notes4_tr", // 必須
  return staveNote;
    Stave_x: shiftGuitar1_1[0].x,
}
     Stave_y: shiftGuitar1_1[0].y,
//********ここまで
    Stave_x_Offset: 25,
</script>
    Stave_y_Offset: -50,
</syntaxhighlight>
    fontSize: 40,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
     shift_x: [0] // xのオフセット値配列
};
insertTextToSVG(Guitar1_notes4_tr_option);
 
var Guitar1_notes1_option = {
     textContent: ["0", "2", "2", "2", "9", "9"], // 必須文字列
    strID: "Guitar1_notes1", // 必須
    Stave_x_Offset: [10, 0, 10, 0, 0, 0],
     Stave_y_Offset: 0,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    fontSize: 50,
    shift_x: shiftGuitar1_tab1, // xのオフセット値配列
    IsOffset_x_Abs: true
};
insertTextToSVG(Guitar1_notes1_option);


insertTiePathToSVG({x:shiftGuitar1_tab1[4].x - 40, y:shiftGuitar1_tab1[4].y + 30}, {x:shiftGuitar1_tab1[4].x - 5, y:shiftGuitar1_tab1[4].y});


 タイは、notes に対してconst ties7 = [ new StaveTie({ first_note: notes7[4], last_note: notes7[5], first_indices: [0],       last_indices: [0],}) ] という具合に StaveTie() の引数にオブジェクトを定義していて、主に4つのプロパティを設定します。first_noteがタイの始まり、last_noteがタイの終わりの音符です。和音を構成していない場合は必ず 0 ですが、first_indicesとlast_indicesにどの和音に対してタイを描画するかを指定しています。高さの異なる音に対して指定した場合はスラーになりそうですが、本当にそうなるかどうか確かめてみました。そしたら、やっぱりスラーと同じ役割になりそうでした。ついでに和音に2番目の音、配列番号1番に対してタイを描画する例は最後のA/3に対しての描画が参考になるでしょう。スラーについて言及したドキュメントもありそうなので、はっきりしたことはそれを確かめてみてからですね。何か不都合があるかもしれないし。タイでスラーを描画するのはね。どうなんだろうね。
insertTiePathToSVG({x:shiftGuitar1_tab1[4].x - 40, y:shiftGuitar1_tab1[4].y + 30 - 110}, {x:shiftGuitar1_tab1[4].x - 5, y:shiftGuitar1_tab1[4].y - 110});


var Guitar1_notes1_g_option = {
    textContent: ["g"], // 必須文字列
    strID: "Guitar1_notes1_g", // 必須
    Stave_x_Offset: -30,
    Stave_y_Offset: 0,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    fontSize: 50,
    shift_x: [{x:shiftGuitar1_tab1[4].x, y:shiftGuitar1_tab1[4].y}], // xのオフセット値配列
    IsOffset_x_Abs: true
};
insertTextToSVG(Guitar1_notes1_g_option);


 あー。いっけん大丈夫そうだけど、駄目だ。スラーは旗の根元からとか自由に描くこともありました。タイは音符で接続するだけで大丈夫な法則があったんですね。なるほど。気が付かなかった。やるなVexFlow。楽譜をじっくり眺めないと気付かないことだな。どうやらslurというキーワードではなく、その柔軟さを必要とするため、curveという名前で実現しているっぽい。またその時がきたら説明できると思います。VexFlow作者も大変だな。かなり完璧だけど、できないこともあるんだろうね。ここまで網羅されていると、できないことがあってもしゃーねぇな。
var Guitar1_st1_notes1_g_option = {
    textContent: ["g"], // 必須文字列
    strID: "Guitar1_st1_notes1_g", // 必須
    Stave_x_Offset: -30,
    Stave_y_Offset: 0 - 110,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    fontSize: 50,
    shift_x: [{x:shiftGuitar1_tab1[4].x, y:shiftGuitar1_tab1[4].y}], // xのオフセット値配列
    IsOffset_x_Abs: true
};
insertTextToSVG(Guitar1_st1_notes1_g_option);




 ここまで書いて思ったんだけど、(function(){ コード記述部 })();の中に書けば、変数を名前空間で分け隔てることができるんじゃねと思えてきた。変数に番号とかつけてるのってカッコ悪いのかな。次の記事で試してみよう。
var Guitar1_notes1_Arpeggio_option = {
    textContent: ["┌ Arpeggio ──────┐"], // 必須文字列
    strID: "Guitar1_notes1_g", // 必須
    Stave_x_Offset: 0,
    Stave_y_Offset: -40,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    fontSize: 40,
    shift_x: [{x:shiftGuitar1_tab1[4].x, y:shiftGuitar1_tab1[4].y}], // xのオフセット値配列
    IsOffset_x_Abs: true
};
insertTextToSVG(Guitar1_notes1_Arpeggio_option);


 
var Guitar1_st1_notes1_Arpeggio_option = {
    textContent: ["┌ Arpeggio ──────┐"], // 必須文字列
    strID: "Guitar1_st1_notes1_g", // 必須
    Stave_x_Offset: 0,
    Stave_y_Offset: -40 - 110 - 20,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    fontSize: 40,
    shift_x: [{x:shiftGuitar1_tab1[4].x, y:shiftGuitar1_tab1[4].y}], // xのオフセット値配列
    IsOffset_x_Abs: true
};
insertTextToSVG(Guitar1_st1_notes1_Arpeggio_option);


=== '''タブ譜''' ===
var Guitar1_notes1_0_option = {
<div id="output8"></div>
    textContent: ["\uFF7C"], // 必須文字列 4和音コード2分音符
    strID: "Guitar1_notes1_ele0", // 必須
    Stave_x: shiftGuitar1_tab1[0].x,
    Stave_y: shiftGuitar1_tab1[0].y,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
};
insertTextToSVG(Guitar1_notes1_0_option);


var Guitar1_notes2_option = {
    textContent: ["9", "9", "9", "9", "9", "9", "7", "9", "7", "7", "5", "4", "7"], // 必須文字列
    strID: "Guitar1_notes1", // 必須
    Stave_x_Offset: [-30, -40, 0, -10, 0, -10, 0, 0, 10, 0, 0, 0, 0],
    Stave_y_Offset: 0,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    fontSize: 50,
    shift_x: shiftGuitar1_tab2, // xのオフセット値配列
    IsOffset_x_Abs: true
};
insertTextToSVG(Guitar1_notes2_option);


 スクリプトは以下のようなものです。
var Guitar1_notes2_c_option = {
<syntaxhighlight lang="javascript">
    textContent: ["H.C."], // 必須文字列
<div id="output8"></div>
    strID: "Guitar1_notes1", // 必須
//******************ここから複数の楽譜表示における共通のスクリプト**
    Stave_x_Offset: 0,
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js"></script>
    Stave_y_Offset: -40,
<script>
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
const {
    fontSize: 50,
  Renderer,
    shift_x: [{x:shiftGuitar1_tab2[1].x -30, y:shiftGuitar1_tab2[1].y}], // xのオフセット値配列
  Stave,
    IsOffset_x_Abs: true
  StaveNote,
};
  Voice,
insertTextToSVG(Guitar1_notes2_c_option);
  Accidental,
  Beam,
  Formatter,
  Dot,
  StaveTie,
  TabStave,
  TabNote,  
  Bend,
  Vibrato
} = Vex.Flow;
//******************ここまで共通**
</script>
<script>
// Create an SVG renderer and attach it to the DIV element with id="output".
const div8 = document.getElementById("output8");
const renderer8 = new Renderer(div8, Renderer.Backends.SVG);


// Configure the rendering context.
var Guitar1_st1_notes2_c_option = {
renderer8.resize(500, 300);
    textContent: ["H.C."], // 必須文字列
const context8 = renderer8.getContext();
    strID: "Guitar1_st1_notes1", // 必須
    Stave_x_Offset: 0,
    Stave_y_Offset: -40 - 110,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    fontSize: 50,
    shift_x: [{x:shiftGuitar1_tab2[1].x -30, y:shiftGuitar1_tab2[1].y}], // xのオフセット値配列
    IsOffset_x_Abs: true
};
insertTextToSVG(Guitar1_st1_notes2_c_option);


// Create a tab stave of width 400 at position 10, 40 on the canvas.
var Guitar1_notes2_a_option = {
const stave8 = new TabStave(10, 40, 400);
    textContent: [".", ".", ".", ".", ".", ".", ".", "."], // 必須文字列
stave8.addClef("tab").setContext(context8).draw();
    strID: "Guitar1_notes2", // 必須
    Stave_x_Offset: [0, 0, 0, 0, 0, 0, 0, 0],
    Stave_y_Offset: [-15, -15, -15, -15, 15, 15, 15, 15],
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    fontSize: 50,
    shift_x: [{x:shiftGuitar1_tab2[3].x, y:shiftGuitar1_tab2[3].y},
              {x:shiftGuitar1_tab2[5].x, y:shiftGuitar1_tab2[5].y},
              {x:shiftGuitar1_tab2[6].x, y:shiftGuitar1_tab2[6].y},
              {x:shiftGuitar1_tab2[7].x, y:shiftGuitar1_tab2[7].y},
              {x:shiftGuitar1_tab2[8].x, y:shiftGuitar1_tab2[8].y},
              {x:shiftGuitar1_tab2[10].x, y:shiftGuitar1_tab2[10].y},  
              {x:shiftGuitar1_tab2[11].x, y:shiftGuitar1_tab2[11].y},
              {x:shiftGuitar1_tab2[12].x, y:shiftGuitar1_tab2[12].y}], // xのオフセット値配列
    IsOffset_x_Abs: true
};
insertTextToSVG(Guitar1_notes2_a_option);


const notes8 = [
insertTiePathToSVG({x:shiftGuitar1_tab2[0].x - 20 - 10, y:shiftGuitar1_tab2[0].y + 10}, {x:shiftGuitar1_tab2[0].x, y:shiftGuitar1_tab2[0].y + 10});
    // A single note
    new TabNote({
        positions: [{ str: 3, fret: 7 }],
        duration: "q",
    }),


    // A chord with the note on the 3rd string bent
insertTiePathToSVG({x:shiftGuitar1_tab2[0].x - 20 - 10, y:shiftGuitar1_tab2[0].y - 40}, {x:shiftGuitar1_tab2[0].x, y:shiftGuitar1_tab2[0].y - 40}, -1);
    new TabNote({
        positions: [
            { str: 2, fret: 10 },
            { str: 3, fret: 9 },
        ],
        duration: "q",
    }).addModifier(new Bend("Full"), 1),


     // A single note with a harsh vibrato
var Guitar1_notes3_option = {
     new TabNote({
     textContent: ["5", "7", "5", "7", "5", "7", "7", "7"], // 必須文字列
        positions: [{ str: 2, fret: 5 }],
     strID: "Guitar1_notes3", // 必須
        duration: "h",
    Stave_x_Offset: [0, 0, 0, 0, 0, 0, 0, 5],
     }).addModifier(new Vibrato().setHarsh(true).setVibratoWidth(70), 0),
    Stave_y_Offset: 0,
];
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    fontSize: 50,
     shift_x: shiftGuitar1_tab3, // xのオフセット値配列
    IsOffset_x_Abs: true
};
insertTextToSVG(Guitar1_notes3_option);


Formatter.FormatAndDraw(context8, stave8, notes8);
var Guitar1_notes3_H_P_H_P_option = {
</script>
    textContent: ["H", "P", "H", "P"], // 必須文字列
</syntaxhighlight>
    strID: "Guitar1_notes1", // 必須
    Stave_x_Offset: 10,
    Stave_y_Offset: 35,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    fontSize: 50,
    shift_x: [{x:shiftGuitar1_tab3[0].x , y:shiftGuitar1_tab3[0].y},
{x:shiftGuitar1_tab3[1].x , y:shiftGuitar1_tab3[1].y},
{x:shiftGuitar1_tab3[2].x , y:shiftGuitar1_tab3[2].y},
{x:shiftGuitar1_tab3[3].x , y:shiftGuitar1_tab3[3].y}], // xのオフセット値配列
    IsOffset_x_Abs: true
};
insertTextToSVG(Guitar1_notes3_H_P_H_P_option);


var Guitar1_st1_notes3_H_P_H_P_option = {
    textContent: ["H", "P", "H", "P"], // 必須文字列
    strID: "Guitar1_st1_notes1", // 必須
    Stave_x_Offset: 10,
    Stave_y_Offset: 35 - 110,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    fontSize: 50,
    shift_x: [{x:shiftGuitar1_tab3[0].x , y:shiftGuitar1_tab3[0].y},
{x:shiftGuitar1_tab3[1].x , y:shiftGuitar1_tab3[1].y},
{x:shiftGuitar1_tab3[2].x , y:shiftGuitar1_tab3[2].y},
{x:shiftGuitar1_tab3[3].x , y:shiftGuitar1_tab3[3].y}], // xのオフセット値配列
    IsOffset_x_Abs: true
};
insertTextToSVG(Guitar1_st1_notes3_H_P_H_P_option);


 タブの文字フォントが公式の例と違うな。淋しい。どれが何音符かわからないダサい。2分音符には〇と棒が、全音符には〇が、四分音符いかにも旗は必要だと思う。あとタブは指番号だけでなくフレットの一部抜粋でコードの図が記入できた方がいいんじゃね。あとこんな大げさなFullとかいうチョーキングってダサくない。W.C と Cho. または C やH.Cでいいよ。あと数字は手書きフォントのがいいね。総じていえばリットーミュージックがやっぱさえてると思う。リットーミュージックのは綺麗なスコアだけど内容がダメダメっていうね。何かしらデメリットあるわ。どの立場から言ってるのかとお思いでしょうけど。なんでスコア譜ってあんなにダメダメなんだろうね。お金出して買ってる人もいるのに。ここに。耳コピができないというややる気もない子がここにいるのに。スコア譜命なんだけど。Youtubeのスコア出してる神レベルの人だけが最強だとおもう。あれは弾いていて本当に楽だし、現実的な運指になってるし、弾き心地最高。ロックを感じれる。時代が味方してくれている。あとは市販のスコア譜がもっと魂のはいったものになってほしい。弾きにくいとこをちょっと考えるくらいは自分でできるけど、なんか違うんだよなが解決できない。何が違うんだろうな。差分を埋め合わせる技術力が付かない。悲しい。という愚痴。あと音作りもよくわからないんだよな。でかい音出して練習できないからな。あと、ずっとヘッドフォンでやってると耳おかしくなるから生音だけで練習する時間も結構あって、あれはあれで淋しい。運指の練習にはなるけど、最後の弾き方の練習はやっぱヘッドフォンでやるしかなくて、結局、いい音作りできなくて、折れるということを繰り返してる。悔しいな。小さい才能の引き出し方がまったくわからないから、全く開花しないのな。もんくばっかりしか思いつかないもん。やだよな。こんな志向の奴の音楽なんて聴きたくないよな。わかるよ。だから、部屋にこもってめいわくかけないくらいのことしか思いつかない。つまんない。結局そこに落ち着く。つまんない。でも音楽もクラリネットもギターも大好き!これだけは譲れない。でも、どうすんのコレって感じだね。ハハハ。
insertTiePathToSVG({x:shiftGuitar1_tab3[0].x , y:shiftGuitar1_tab3[0].y + 10}, {x:shiftGuitar1_tab3[1].x + 5, y:shiftGuitar1_tab3[0].y + 10});


insertTiePathToSVG({x:shiftGuitar1_tab3[1].x , y:shiftGuitar1_tab3[1].y + 10}, {x:shiftGuitar1_tab3[2].x + 5, y:shiftGuitar1_tab3[1].y + 10});


 何が変わったかっていうと、Stave が TabStaveに変わった。Notes が TabNote に、Keysが positions になって、[{ str: 3, fret: 7 }] っていう指定に変わった。str が弦番号ね。1弦が細い方、6弦が太い方。なので、弦番号の数字の小ささ大きさが弦の幅に'''<span style="color: darkred;">比例</span>'''していると覚えておきましょう。そしたら、どっちが1弦だっけ問題はなくなるね。fret がタブ譜に書かれる数字そのもの、あとでこれを手書き調のフォントに変える方法を考えてみたいと思います。あとは数字を〇で囲ったりできるんかな。無理かな。旗つけたり。やえもするとフレット図いれたり。
insertTiePathToSVG({x:shiftGuitar1_tab3[2].x , y:shiftGuitar1_tab3[2].y + 10}, {x:shiftGuitar1_tab3[3].x + 5, y:shiftGuitar1_tab3[2].y + 10});


insertTiePathToSVG({x:shiftGuitar1_tab3[3].x , y:shiftGuitar1_tab3[3].y + 10}, {x:shiftGuitar1_tab3[4].x + 5, y:shiftGuitar1_tab3[3].y + 10});


 音符の装飾は、addModifier()で同じなんだけど、臨時記号の#のようなAccidentalではなく、new Bend("Full"), 1のような指定でチョーキング。new Vibrato().setHarsh(true).setVibratoWidth(70) で、長さ70のビブラート。setHarsh(true)でカクカクのビブラート。falseなら丸みを帯びた波線です。falseのほうが好きだな。Harshはヒドイとかっていう意味だそうで荒々しくをON OFFみたいな感じですね。その他についてはまた後ほどですね。ビブラートは通常の楽譜でも描画できるべきなので、五線譜の方でもできるかためしておきますか。いや、試してみたら簡単にはいかないな。同じではないのだな。五線譜上に表示させるのはまた考えないとだめですね。なんか方法はありそう。
insertTiePathToSVG({x:shiftGuitar1_tab3[6].x , y:shiftGuitar1_tab3[6].y + 15}, {x:shiftGuitar1_tab3[6].x + 35, y:shiftGuitar1_tab3[6].y + 15});
 
 
var Guitar1_notes3_7_option = {
    textContent: ["\uFF7F"], // 必須文字列 1音2分音符
    strID: "Guitar1_notes3_ele7", // 必須
    Stave_x: shiftGuitar1_tab3[7].x - 7,
    Stave_y: shiftGuitar1_tab3[7].y,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
};
insertTextToSVG(Guitar1_notes3_7_option);
 
var Guitar1_notes4_option = {
    textContent: ["5", "7", "5", "7", "7", "7", "4", "6", "4", "."], // 必須文字列
    strID: "Guitar1_notes3", // 必須
    Stave_x_Offset: [0, 0, 0, -20, 0, 0, 0, 0, 0,  0],
    Stave_y_Offset: [0, 0, 0,  0, 0, 0, 0, 0, 0, -15],
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    fontSize: 50,
    shift_x: shiftGuitar1_tab4, // xのオフセット値配列
    IsOffset_x_Abs: true
};
insertTextToSVG(Guitar1_notes4_option);


 
var Guitar1_notes4_P_C_H_option = {
    textContent: ["P", "C", "H"], // 必須文字列
    strID: "Guitar1_notes1", // 必須
    Stave_x_Offset: 10,
    Stave_y_Offset: 35,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    fontSize: 50,
    shift_x: [{x:shiftGuitar1_tab4[1].x + 10 , y:shiftGuitar1_tab4[1].y},
{x:shiftGuitar1_tab4[3].x - 20, y:shiftGuitar1_tab4[3].y},
{x:shiftGuitar1_tab4[6].x , y:shiftGuitar1_tab4[6].y - 60}], // xのオフセット値配列
    IsOffset_x_Abs: true
};
insertTextToSVG(Guitar1_notes4_P_C_H_option);


[[VexFlow 使い方]]へ戻る。
var Guitar1_st1_notes4_P_C_H_option = {
    textContent: ["P", "C", "H"], // 必須文字列
    strID: "Guitar1_st1_notes1", // 必須
    Stave_x_Offset: 10,
    Stave_y_Offset: 35 - 110,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    fontSize: 50,
    shift_x: [{x:shiftGuitar1_tab4[1].x + 10 , y:shiftGuitar1_tab4[1].y},
{x:shiftGuitar1_tab4[3].x - 20, y:shiftGuitar1_tab4[3].y},
{x:shiftGuitar1_tab4[6].x , y:shiftGuitar1_tab4[6].y - 60}], // xのオフセット値配列
    IsOffset_x_Abs: true
};
insertTextToSVG(Guitar1_st1_notes4_P_C_H_option);


<yjavascript></script>
<script src="https://wiki.yo-net.jp/vexflow/build/cjs/vexflow.js"></script>
<script>
const {
  Renderer,
  Stave,
  StaveNote,
  Voice,
  Accidental,
  Beam,
  Formatter,
  Dot,
  StaveTie
} = Vex.Flow;


// Create an SVG renderer and attach it to the DIV element named "boo".
insertTiePathToSVG({x:shiftGuitar1_tab4[0].x, y:shiftGuitar1_tab4[0].y + 10}, {x:shiftGuitar1_tab4[1].x + 2, y:shiftGuitar1_tab4[0].y + 10});
const div = document.getElementById('output');
const renderer = new Renderer(div, Renderer.Backends.SVG);


// Configure the rendering context.
insertTiePathToSVG({x:shiftGuitar1_tab4[1].x, y:shiftGuitar1_tab4[1].y + 10}, {x:shiftGuitar1_tab4[2].x + 2, y:shiftGuitar1_tab4[1].y + 10});
renderer.resize(500, 200);
 
const context = renderer.getContext();
insertTiePathToSVG({x:shiftGuitar1_tab4[4].x - 15, y:shiftGuitar1_tab4[4].y + 10}, {x:shiftGuitar1_tab4[4].x + 2, y:shiftGuitar1_tab4[4].y + 10});
 
insertTiePathToSVG({x:shiftGuitar1_tab4[4].x, y:shiftGuitar1_tab4[4].y + 10}, {x:shiftGuitar1_tab4[5].x + 2, y:shiftGuitar1_tab4[4].y + 10});
 
insertTiePathToSVG({x:shiftGuitar1_tab4[6].x, y:shiftGuitar1_tab4[6].y - 10}, {x:shiftGuitar1_tab4[7].x + 2, y:shiftGuitar1_tab4[6].y - 10}, -1);


context.beginPath(); // start recording our pen's moves.
context.moveTo(0, 0);
context.lineTo(499, 0);
context.lineTo(499, 199);
context.lineTo(410, 100);
context.lineTo(10, 40);
context.closePath();
context.stroke();


// Create a stave of width 400 at position 10, 40 on the canvas.
insertTrilPathToSVG(shiftGuitar1_tab4_tr);
const stave = new Stave(10, 40, 400);


// Add a clef and time signature.
var Guitar1_tab_notes4_tr_option = {
stave.addClef('treble').addTimeSignature('C');
    textContent: ["tr."], // 必須文字列
    strID: "Guitar1_tab_notes4_tr", // 必須
    Stave_x: shiftGuitar1_tab4_tr[0].x,
    Stave_y: shiftGuitar1_tab4_tr[0].y,
    Stave_x_Offset: 25,
    Stave_y_Offset: -50,
    fontSize: 40,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    shift_x: [0] // xのオフセット値配列
};
insertTextToSVG(Guitar1_tab_notes4_tr_option);


// Connect it to the rendering context and draw!
var EGuitar2Text_options = {
stave.setContext(context).draw();
    textContent: ["E.Guitar2"], // 必須文字列
    strID: "EGuitar2Text", // 必須
    Stave_x: Guitar2Inst.x,
    Stave_y: Guitar2Inst.y,
    fontFamily: "Arial, sans-serif",
    fontSize: "20pt",
    Rotate: -90
};
insertTextToSVG(EGuitar2Text_options);


</yjavascript>
var EGuitar2Tab_options = {
    textContent: ["@"], // 必須文字列
    strID: "EGuitar2Tab", // 必須
    Stave_x: Guitar2Tab1.x,
    Stave_y: Guitar2Tab1.y,
    Stave_x_Offset: 10,
    Stave_y_Offset: 80,
    fontFamily: "YonetMuFL, Arial",
};
insertTextToSVG(EGuitar2Tab_options);


<yjavascript></script>
var BaseText_options = {
<script>
    textContent: ["Base"], // 必須文字列
    strID: "BaseText", // 必須
    Stave_x: BaseInst.x,
    Stave_y: BaseInst.y,
    fontFamily: "Arial, sans-serif",
    fontSize: "20pt",
    Rotate: -90
};
insertTextToSVG(BaseText_options);


// Create an SVG renderer and attach it to the DIV element named "boo".
var BaseTab_options = {
const div2 = document.getElementById('output2');
    textContent: ["@"], // 必須文字列
const renderer2 = new Renderer(div2, Renderer.Backends.SVG);
    strID: "BaseTab", // 必須
    Stave_x: BaseTab1.x,
    Stave_y: BaseTab1.y,
    Stave_x_Offset: 10,
    Stave_y_Offset: 90,
    fontFamily: "YonetMuFL, Arial",
};
insertTextToSVG(BaseTab_options);
insertBaseEndBarPathToSVG(StaveBase1);
insertBaseEndBarPathToSVG(StaveBase2);
insertBaseEndBarPathToSVG(StaveBase3);
insertBaseEndBarPathToSVG(StaveBase4);


// Configure the rendering context.
var DrumText_options = {
renderer2.resize(500, 200);
    textContent: ["Drum"], // 必須文字列
const context2 = renderer2.getContext();
    strID: "DrumText", // 必須
    Stave_x: DrumInst.x,
    Stave_y: DrumInst.y,
    fontFamily: "Arial, sans-serif",
    fontSize: "20pt",
    Rotate: -90
};
insertTextToSVG(DrumText_options);


context2.beginPath(); // start recording our pen's moves.
var PercText_options = {
context2.moveTo(0, 0);
    textContent: ["Perc."], // 必須文字列
context2.lineTo(499, 0);
    strID: "PercText", // 必須
context2.lineTo(499, 199);
    Stave_x: PercInst.x,
context2.lineTo(360, 100);
    Stave_y: PercInst.y,
context2.closePath();
    fontFamily: "Arial, sans-serif",
context2.stroke();
    fontSize: "20pt",
    Rotate: -90
};
insertTextToSVG(PercText_options);
 
var note13_2_0_option = {
    textContent: ["\uFF65", "\uFF65", "\uFF65", "\uFF65",
                  "\uFF65", "\uFF68", "\uFF66", "\uFF67", "\uFF65", "\uFF0B", "\uFF65", "\uFF0F"], // 必須文字列
                //x      ,  half_o,        ,        >,        ,      + ,        ,        o
    strID: "note13_2_0", // 必須
    Stave_y_Offset: [  -5,      -5,      -5,      -5,
                        -5,      -60,      -5,      -60,      -5,      -60,      -5,      -60],
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    shift_x: shiftDrum1, // xのオフセット値配列
    IsOffset_x_Abs: true
};
insertTextToSVG(note13_2_0_option);
 
var Perc_notes1_1_0_Shaker_option = {
    textContent: ["< Shaker >"], // 必須文字列
    strID: "Perc_notes1_1_0_shaker", // 必須
    Stave_x: Perc_note1_1_0.x,
    Stave_y: Perc_note1_1_0.y,
    Stave_x_Offset: -20,
    Stave_y_Offset: 0,
    fontSize: 60,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    shift_x: [0] // xのオフセット値配列
};
insertTextToSVG(Perc_notes1_1_0_Shaker_option);
 
var Perc_notes1_1_0_option = {
    textContent: ["\uFF69"], // 必須文字列
    strID: "Perc_notes1_1_0", // 必須
    Stave_y_Offset: -5,
    fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial"
    shift_x: shiftPerc1, // xのオフセット値配列
    IsOffset_x_Abs: true
};
insertTextToSVG(Perc_notes1_1_0_option);
 
if(allUniqueIds !== "undefined"){
// 透明にするIDの配列
// 例としてここでIDを指定
let autoUniqueIds = allUniqueIds.map(id => "vf-" + id);
 
// 各IDに対して処理
  autoUniqueIds.forEach(id => {
    // 該当するIDの要素を取得
    let element = svgElement.getElementById(id);
    if (element) {
      // 該当する要素があれば、描画内容を透明にする
      let paths = element.querySelectorAll("path");
      paths.forEach(path => {
          var dAttribute = path.getAttribute('d');
          // カンマで区切られた数値の数を数えます
          var numberOfValues = (dAttribute.match(/,/g) || []).length + 1; // カンマの数 + 1 = 数値の数
 
          if (numberOfValues === 9) {
            var firstCoord = dAttribute.split(',')[0];
            if (dAttribute.startsWith('M')) {
              var CnumberOfValues = (dAttribute.match(/C/g) || []).length; // カンマの数 + 1 = 数値の数
              var LnumberOfValues = (dAttribute.match(/L/g) || []).length; // カンマの数 + 1 = 数値の数
                // 座標の差を計算します
              if(CnumberOfValues > 0){
                var coords = dAttribute.match(/[-+]?[0-9]*\.?[0-9]+/g).map(parseFloat);
                var xdiff = coords[0] - coords[2]; // xの差を計算
                var ydiff = coords[1] - coords[3]; // yの差を計算


// Create a stave of width 400 at position 10, 40 on the canvas.
                // xが0でyが0より大きい場合、描画内容を透明にします
const stave2 = new Stave(10, 40, 400);
                if (xdiff <= -3.590) {
                if (xdiff >= -3.599) {
                  if(ydiff === 0){
                    path.setAttribute("fill", "none");
                    path.setAttribute("stroke", "none");
                  }
                }
                }
                if (xdiff <= -2.369) {
                if (xdiff >= -2.374) {
                  if(ydiff === 0){
                    path.setAttribute("fill", "none");
                    path.setAttribute("stroke", "none");
                  }
                }
                }
                if (xdiff <= 1.000) {
                if (xdiff >= -1.000) {
                  if(ydiff === 0){
                    path.setAttribute("fill", "none");
                    path.setAttribute("stroke", "none");
                  }
                }
                }
                else {
                  if(ydiff === 1.123){
                    path.setAttribute("fill", "none");
                    path.setAttribute("stroke", "none");
                  }
                }
              }
            }
          }
          else if (numberOfValues === 1) {
            var firstCoord = dAttribute;
            if (dAttribute.startsWith('M')) {
              var LnumberOfValues = (dAttribute.match(/L/g) || []).length; // カンマの数 + 1 = 数値の数
                // 座標の差を計算します
              if(LnumberOfValues > 0){
                var coords = dAttribute.match(/[-+]?[0-9]*\.?[0-9]+/g).map(parseFloat);
                var xdiff = coords[0] - coords[2]; // xの差を計算
                var ydiff = coords[1] - coords[3]; // yの差を計算


// Add a clef and time signature.
                // xが0でyが0より大きい場合、描画内容を透明にします
stave2.addClef('treble').addTimeSignature('C|');
                if (xdiff < -10) {
                if (xdiff > -18) {
                  if(ydiff === 0){
                    path.setAttribute("fill", "none");
                    path.setAttribute("stroke", "none");
                  }
                }
                }
              }
            }
          }
          else if (numberOfValues === 21 || numberOfValues === 35 || numberOfValues === 95 || numberOfValues === 41) {
                    path.setAttribute("fill", "none");
                    path.setAttribute("stroke", "none");
          }
      });
    }
  });
}


// Connect it to the rendering context and draw!
if(allFlagUniqueIds !== "undefined"){
stave2.setContext(context2).draw();
  let autoFlagUniqueIds = allFlagUniqueIds.map(id => "vf-" + id);
  autoFlagUniqueIds.forEach(id => {
    // 該当するIDの要素を取得
    let element = svgElement.getElementById(id);
    if (element) {
      // 該当する要素があれば、描画内容を透明にする
      let flagpaths = element.querySelectorAll('path');
      flagpaths.forEach(path => {
        var dAttribute = path.getAttribute('d');
        // カンマで区切られた数値の数を数えます
        var numberOfValues = (dAttribute.match(/,/g) || []).length + 1; // カンマの数 + 1 = 数値の数


// Create the notes
        // 数値の数が23であれば、このpath要素は求めるものです
const notes2 = [
        if (numberOfValues === 23) {
  new StaveNote({
          path.setAttribute("fill", "none");
    keys: ['c/5'],
          path.setAttribute("stroke", "none");
    duration: 'q'
        }
  }),
      });
  new StaveNote({
     }
    keys: ['d/4'],
   });
    duration: 'q'
}
  }),
})();
  new StaveNote({
</yjavascript>
     keys: ['b/4'],
    duration: 'qr'
   }),
  new StaveNote({
    keys: ['c/4', 'e/4', 'g/4'],
    duration: 'q'
  }),
];


// Create a voice in 4/4 and add above notes
 
const voice2 = new Voice({ num_beats: 4, beat_value: 4 });
voice2.addTickables(notes2);


// Format and justify the notes to 400 pixels.
=== '''五線譜''' ===
new Formatter().joinVoices([voice2]).format([voice2], 350);
 五線譜を描いてみます。目安になる線を引きました。左上の角の頂点が(x, y)対応で(1, 1)、そこから時計回りに(499, 1)→(499, 199)→(410, 100)(10, 40)という線です。


// Render voice
<div id="output"></div>
voice2.draw(context2, stave2);
</yjavascript>




<yjavascript></script>
 スクリプトは以下のとおり。
 
<syntaxhighlight lang="javascript">
<div id="output"></div>
//2023-09Mid:<script src="https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js"></script>
//2024-03Mid:Version
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.2.2/build/cjs/vexflow.js"></script>
<script>
<script>
const {
  Renderer,
  Stave
} = Vex.Flow;
// Create an SVG renderer and attach it to the DIV element named "boo".
// Create an SVG renderer and attach it to the DIV element named "boo".
const div3 = document.getElementById('output3');
const div = document.getElementById('output');
const renderer3 = new Renderer(div3, Renderer.Backends.SVG);
const renderer = new Renderer(div, Renderer.Backends.SVG);


// Configure the rendering context.
// Configure the rendering context.
renderer3.resize(500, 200);
renderer.resize(500, 200);
const context3 = renderer3.getContext();
const context = renderer.getContext();


// Create a stave of width 400 at position 10, 40 on the canvas.
// Create a stave of width 400 at position 10, 40 on the canvas.
const stave3 = new Stave(10, 40, 400);
const stave = new Stave(10, 40, 400);


// Add a clef and time signature.
// Add a clef and time signature.
stave3.addClef('treble').addTimeSignature('4/4');
stave.addClef('treble').addTimeSignature('C');


// Connect it to the rendering context and draw!
// Connect it to the rendering context and draw!
stave3.setContext(context3).draw();
stave.setContext(context).draw();
</script>
</syntaxhighlight>


// Create the notes
 最初に、div に 出力するタグを取得する。ここでは &lt;div id="output"&gt;&lt;/div&gt; のタグ全体要素を取得している。次にnew Renderer(div, Renderer.Backends.SVG); でSVGでの描画処理をしてくれるようになります。他にもRenderer.Backends.CANVASという指定もできます。自分はSVGバージョンが好みです。なんか問題報告が少ない。CANVASはスケールサイズ表示がおかしいとか言ってる人もいます。renderer.resize(500, 200); は描画エリアのサイズを指定しています。そして、この描画エリアに五線譜のオブジェクトとして構築した stave を配置します。
const notes3 = [
  new StaveNote({
    keys: ['c/5'],
    duration: 'q'
  }),
  new StaveNote({
    keys: ['d/4'],
    duration: 'q'
  }),
  new StaveNote({
    keys: ['b/4'],
    duration: 'qr'
  }),
  new StaveNote({
    keys: ['c/4', 'e/4', 'g/4'],
    duration: 'q'
  }),
];


const notes32 = [
  new StaveNote({
  keys: ['c/4'],
  duration: 'w'
  })
];


// Create a voice in 4/4 and add above notes
 New Stave(10, 40, 400)で、描画エリアの x = 10, y = 40の位置に幅 400 の五線譜を描きます。(410, 100)の頂点位置をみればわかりますが、きっちり 10+400 の大きさになっています。五線譜の真ん中の第三線が中央になっており縦 200 が 1 行にちょうど良いようです。楽譜部分の表示スケールを変更して小さくする予定なので、その時にまた、描画領域について考えてみたいと思います。
const voices3 = [
 
  new Voice({
    num_beats: 4,
    beat_value: 4
  }).addTickables(notes3),
  new Voice({
    num_beats: 4,
    beat_value: 4
  }).addTickables(notes32),
];


// Format and justify the notes to 400 pixels.
 stave.addClef('treble').addTimeSignature('4/4'); で treble ト音記号 4/4 つまり4分の4拍子という五線譜になります。
new Formatter().joinVoices(voices3).format(voices3, 350);


// Render voices.
voices3.forEach(function(v) {
  v.draw(context3, stave3);
});
</script>
</yjavascript>


<yjavascript></script>
 自分は、持っているPCが12型で1920x1280を使っていますので、表示倍率を150%にしています。その関係で、実質は横サイズが1920の66%で、横は1280pxと変わらない表示領域です。したがって、Wikiの横幅も最大にして、1000pxくらいがちょうどいい限界の大きさです。しかし、そのサイズでは、4小節くらいを1行にするには楽譜が大きすぎるので、もうちょっと小さくしないといけないなとは思っていますが、その処理も、もうちょっと後でやるとします。続けて、実際の音符を配置してみます。
<script>
// Create an SVG renderer and attach it to the DIV element named "boo".
const div4 = document.getElementById('output4');
const renderer4 = new Renderer(div4, Renderer.Backends.SVG);


// Configure the rendering context.
renderer4.resize(500, 200);
const context4 = renderer4.getContext();


// Create a stave of width 400 at position 10, 40 on the canvas.
 拍子記号は以下のようなものが使えます。
const stave4 = new Stave(10, 40, 400);
<table style="width: 100%; text-align: left; border-collapse: collapse; border-spacing: 0;">
<tr style=" background: #778ca3; border-right: solid 1px #778ca3; color: #ffffff;">
  <th style="width: 200px;">シーケンス</th>
  <th>意味</th>
  </tr>
<tr>
  <td>C</td>
  <td>Cを表示(4/4拍子)</td>
</tr>
<tr style=" background: #dddddd;">
  <td>C|</td>
  <td>Cの横中央に縦棒を表示(2/2拍子)</td>
</tr>
<tr>
  <td>n1/n2</td>
  <td>n2 分の n1 拍子</td>
</tr>
</table>


// Add a clef and time signature.
 
stave4.addClef('bass').addTimeSignature('4/4');
 
=== '''五線譜に音符を配置''' ===
 目安になる線を引きました。左上の角の頂点が(x, y)対応で(1, 1)、そこから時計回りに(499, 1)→(499, 199)→(360, 100)です。
<div id="output2"></div>


// Connect it to the rendering context and draw!
stave4.setContext(context4).draw();


// Create the notes
スクリプトは以下のようなものです。
const notes4 = [
  dotted(new StaveNote({
    keys: ['c##/5'],
    duration: '8d'
  }).addModifier(new Accidental('##'))),
  new StaveNote({
    keys: ['db/4'],
    duration: '16'
  }).addModifier(new Accidental('b')),
  dotted(new StaveNote({
    keys: ['b/4', 'd/5', 'f/5'],
    duration: 'h'
  }).addModifier(new Accidental('#'),0),[0, 2]),
  dotted(new StaveNote({
    keys: ['c/4', 'e/4', 'g/4'],
    duration: '8'
  })),
];


Formatter.FormatAndDraw(context4, stave4, notes4);


function dotted(staveNote, noteIndex = -1) {
<syntaxhighlight lang="javascript">
   if (noteIndex < 0) {
const {
    Dot.buildAndAttach([staveNote], {
   Renderer,
      all: true
  Stave,
    });
   StaveNote,
   } else {
   Voice,
    for(noteIndexValue of noteIndex){
   Formatter
      Dot.buildAndAttach([staveNote], {
} = Vex.Flow;
        index: noteIndexValue
      });
    }
   }
   return staveNote;
}
</script>
</yjavascript>


<yjavascript></script>
const div2 = document.getElementById('output2');
<script>
const renderer2 = new Renderer(div2, Renderer.Backends.SVG);
// Create an SVG renderer and attach it to the DIV element named "boo".
const div5 = document.getElementById('output5');
const renderer5 = new Renderer(div5, Renderer.Backends.SVG);


// Configure the rendering context.
// Configure the rendering context.
renderer5.resize(500, 200);
renderer2.resize(500, 200);
const context5 = renderer5.getContext();
const context2 = renderer2.getContext();


// Create a stave of width 400 at position 10, 40 on the canvas.
// Create a stave of width 400 at position 10, 40 on the canvas.
const stave5 = new Stave(10, 40, 400);
const stave2 = new Stave(10, 40, 400);


// Add a clef and time signature.
// Add a clef and time signature.
stave5.addClef('bass').addTimeSignature('4/4');
stave2.addClef('treble').addTimeSignature('C|');


// Connect it to the rendering context and draw!
// Connect it to the rendering context and draw!
stave5.setContext(context5).draw();
stave2.setContext(context2).draw();


// Create the notes
// Create the notes
const notes51 = [
const notes2 = [
    dotted(
  new StaveNote({
        new StaveNote({
    keys: ['c/5'],
            keys: ["e##/5"],
    duration: 'q'
            duration: "8d",
  }),
        }).addModifier(new Accidental("##"))
  new StaveNote({
     ),
    keys: ['d/4'],
    new StaveNote({
     duration: 'q'
        keys: ["b/4"],
  }),
        duration: "16",
  new StaveNote({
    }).addModifier(new Accidental("b")),
    keys: ['b/4'],
    duration: 'qr'
  }),
  new StaveNote({
    keys: ['c/4', 'e/4', 'g/4'],
    duration: 'q'
  }),
];
];


const notes52 = [
// Create a voice in 4/4 and add above notes
    new StaveNote({
const voice2 = new Voice({ num_beats: 4, beat_value: 4 });
        keys: ["c/4"],
voice2.addTickables(notes2);
        duration: "8",
 
    }),
// Format and justify the notes to 400 pixels.
    new StaveNote({
new Formatter().joinVoices([voice2]).format([voice2], 350);
        keys: ["d/4"],
 
        duration: "16",
// Render voice
    }),
voice2.draw(context2, stave2);
    new StaveNote({
</syntaxhighlight>
        keys: ["e/4"],
 
        duration: "16",
 
    }).addModifier(new Accidental("b")),
 変数名が最初の楽譜とダブるところは数字を付けました。一番最初の  StaveNote, Voice, Formatterの部分は最初のと共通なので書き換えが必要です。あとの部分で2重で定義してもダメです。最初のがエラーになって、致命的エラーで何も描画処理がされなくなります。コード全体としては、音符を付ける部分は、五線譜に付け足すので、すべて、最初のコードより後ろに付け足す感じです。const notes2 以降が付け足した部分です。ここまで書いて言えるのは VexFlow はプログラミングに近いです。音楽や楽譜しか知らない人が、この方式で楽譜を描くのは難しいと感じると思います。ABC記述方式のモノが好まれる理由が少しわかります。ただVexflowの方が複雑な記述であるゆえに、複雑な楽譜が書ける言えるのかもしれない。まるで配列の中にひとつづつの音符を生成している感じで、ひとつの音符ごとに区切って new StaveNote() 関数に引数としてオブジェクト値(自分はこれをPerlの連想配列と似ているので連想配列とちょくちょく呼んでいます)を指定しています。プロパティ名にkeys: とduration: が指定されます。プロパティ名であることがわかりやすいように:までつけていますが名前自体は keys と duration です。keys プロパティ名に対応するものとして、配列が指定されるようです。値が一つしかなくてもです。そこに音の高さ相当する値、音階名と段階番号を付けます。実音記号のA(ラ), B(シ), C(ド), D(レ), E(ミ), F(ファ), G(ソ)に対応していて、/ で区切って段階の番号を付与します。
];
 
 
 ピアノと同じで88音の下から1, 2, … , 10, 11 まであります。ピアノ譜のト音記号の五線譜に下に一つ補助線を付けたドが C/4 に相当します。通常、ト音記号の五線譜には E/3 が最低音、 最高の音しても G/6 までくらいを使います。C/6 から 上の音での演奏が続くときは オクターブ記号を使って、その下に描くことがあります。ギターも同じです。ギターは4オクターブしかありません。が一番上の音付近を使うときは、オクターブ記号を置いて、一段階下げて表記します。どの楽器もピアノの88鍵盤には負けます。ギターの一番低い音でもE/3です。クラリネットの音域もギターに似ていますが、最高音はギターよりも狭い範囲が一般的です。最高音のあたりはかなりうまい人だと出せなくはない音ですが狙うのはスゴイ難しいです。ベースとピアノの最低音あたりはヘ音記号の五線譜に書かれることが普通です。ピアノはト音記号とヘ音記号の二つ同時に使うこともあります。音域やばいっす。バイオリンあたりはテノール記号(ハ音記号)というト音記号でもヘ音記号でもないものを使う場合があります。この3種類しかないと思います。あとは変則の五線譜として、通常の位置とは異なる部分に、記号を配置する手法があります。
 
 
 durationの値には文字列が設定されて、 q が四分音符、h が2分音符、w が全音符を表します。8, 16, 32, 64 がそれぞれ8分音符、 16分音符、 32分音符、64分音符に対応しますが、連符もありますので、ひとことで言えるほど簡単ではないです。後ろに r をつけると休符になります。rest の r だそうです。 voice2.draw(context2, stave2);
 
 
 このようにして作った notes2 を Voiceという単位に格納するため new Voice({ num_beats: 4, beat_value: 4 }); でプロパティ名 num_beats と beat_value を持ったオブジェクトを引数にしています。ともに 4 拍子の中に 4つの拍子をもった音だと定義されていて、その中に、notes2 を取り込むべく、voice2.addTickables(notes2); としています。
 
 
 そして、これらを400pxの五線譜の中に納まるように、new Formatter().joinVoices([voice2]).format([voice2], 350); としています。x = 350のところに最後の音符が収まっていることも確認できます。このように処理した voice2 を context2 の描画領域に stave2 の 五線譜に描画します。


const notes53 = [
    new StaveNote({
        keys: ["d/4"],
        duration: "16",
    }),
    new StaveNote({
        keys: ["e/4"],
        duration: "16",
    }).addModifier(new Accidental("#")),
    new StaveNote({
        keys: ["g/4"],
        duration: "32",
    }),
    new StaveNote({
        keys: ["a/4"],
        duration: "32",
    }),
    new StaveNote({
        keys: ["g/4"],
        duration: "16",
    }),
];


const notes54 = [
 duration に設定できる値は以下のようなものです。
<table style="width: 400px; text-align: left; border-collapse: collapse; border-spacing: 0;">
<tr style=" background: #778ca3; border-right: solid 1px #778ca3; color: #ffffff;">
  <th style="width: 200px;">シーケンス</th>
  <th>意味</th>
  </tr>
<tr>
  <td>w</td>
  <td>全音符</td>
</tr>
<tr style=" background: #dddddd;">
  <td>h</td>
  <td>2分音符</td>
</tr>
<tr>
  <td>q</td>
  <td>4分音符</td>
</tr>
<tr style=" background: #dddddd;">
  <td>8</td>
  <td>8分音符</td>
</tr>
<tr>
  <td>16</td>
  <td>16分音符</td>
</tr>
<tr style=" background: #dddddd;">
  <td>32</td>
  <td>32分音符</td>
</tr>
</table>
 
 
 
=== '''五線譜に音符を配置 2Voices''' ===
<div id="output3"></div>
 
 
 スクリプトは以下のようなものです。
<syntaxhighlight lang="javascript">
<div id="output3"></div>
//******************ここから複数の楽譜表示における共通のスクリプト**
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js"></script>
<script>
const {
  Renderer,
  Stave,
  StaveNote,
  Voice,
  Formatter
} = Vex.Flow;
//******************ここまで共通**
// Create an SVG renderer and attach it to the DIV element named "boo".
const div3 = document.getElementById('output3');
const renderer3 = new Renderer(div3, Renderer.Backends.SVG);
 
// Configure the rendering context.
renderer3.resize(500, 200);
const context3 = renderer3.getContext();
 
// Create a stave of width 400 at position 10, 40 on the canvas.
const stave3 = new Stave(10, 40, 400);
 
// Add a clef and time signature.
stave3.addClef('treble').addTimeSignature('4/4');
 
// Connect it to the rendering context and draw!
stave3.setContext(context3).draw();
 
// Create the notes
const notes3 = [
  new StaveNote({
    keys: ['c/5'],
    duration: 'q'
  }),
  new StaveNote({
    keys: ['d/4'],
    duration: 'q'
  }),
  new StaveNote({
    keys: ['b/4'],
    duration: 'qr'
  }),
  new StaveNote({
    keys: ['c/4', 'e/4', 'g/4'],
    duration: 'q'
  }),
];
 
const notes32 = [new StaveNote({
  keys: ['c/4'],
  duration: 'w'
})];
 
// Create a voice in 4/4 and add above notes
const voices3 = [
  new Voice({
    num_beats: 4,
    beat_value: 4
  }).addTickables(notes3),
  new Voice({
    num_beats: 4,
    beat_value: 4
  }).addTickables(notes32),
];
 
// Format and justify the notes to 400 pixels.
new Formatter().joinVoices(voices3).format(voices3, 350);
 
// Render voices.
voices3.forEach(function(v) {
  v.draw(context3, stave3);
});
</syntaxhighlight>
 
 
 和音を除いて、通常、一人では演奏できないような記譜法を2Voicesと呼んでいます。和音を引けない楽器ならそれだけで2Voices 3Voicesとも言えますが、この例のように1小節の中を休符と音符とで分かち合うのを1Voiceとした考え方を保有する記譜の場合は、特別な記述が必要です。別の音という意味付けになります。スコア譜なんかではよく2Voiceや3Voiceの記述が入ります。アレンジするうえで、音を足していくことはよくあるためです。ただしスコア譜では、一小節を短くして |1Voice(2Voice)|のように記譜している方式もよくあります。パートを増やせばいいじゃんと思いますが、限られたスペースにちょっとした音のためだけにパートを増やすことは通常は、実施しません。
 
 
 const notes32の部分の定義のように、音符の定義を別で実施します。Voiceを生成するときに、2つの音符をまとめるときに配列に個別のオブジェクトとして定義します。そして作られた配列2の大きさのVoiceをFormatter関数を呼び出して、そのメンバ関数 joinVoices で結合します。joinVoices 関数は返り値が formatter 形式で .format も Formatter のメンバ関数です。そして 350px の中に描画するようになります。そして、2要素の配列の Voices それぞれを繰り返し処理によって、引数の描画エリア context3 五線譜 stave3 に音符を配置して描画します。
 
 
=== '''五線譜に音符を配置 付点臨時記号''' ===
<div id="output4"></div>
 
 
 スクリプトは以下のようなものです。
<syntaxhighlight lang="javascript">
<div id="output4"></div>
//******************ここから複数の楽譜表示における共通のスクリプト**
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js"></script>
<script>
const {
  Renderer,
  Stave,
  StaveNote,
  Voice,
  Accidental,
  Formatter,
  Dot
} = Vex.Flow;
//******************ここまで共通**
</script>
<script>
// Create an SVG renderer and attach it to the DIV element named "boo".
const div4 = document.getElementById('output4');
const renderer4 = new Renderer(div4, Renderer.Backends.SVG);
 
// Configure the rendering context.
renderer4.resize(500, 200);
const context4 = renderer4.getContext();
 
// Create a stave of width 400 at position 10, 40 on the canvas.
const stave4 = new Stave(10, 40, 400);
 
// Add a clef and time signature.
stave4.addClef('treble').addTimeSignature('4/4');
 
// Connect it to the rendering context and draw!
stave4.setContext(context4).draw();
 
// Create the notes
const notes4 = [
  dotted(new StaveNote({
    keys: ['c##/5'],
    duration: '8d'
  }).addModifier(new Accidental('##'))),
  new StaveNote({
    keys: ['db/4'],
    duration: '16'
  }).addModifier(new Accidental('b')),
  dotted(new StaveNote({
    keys: ['b/4', 'd/5', 'f/5'],
    duration: 'h'
  }).addModifier(new Accidental('#'),0),[0, 2]),
  dotted(new StaveNote({
    keys: ['c/4', 'e/4', 'g/4'],
    duration: '8'
  })),
];
 
Formatter.FormatAndDraw(context4, stave4, notes4);
 
function dotted(staveNote, noteIndex = -1) {
  if (noteIndex < 0) {
    Dot.buildAndAttach([staveNote], {
      all: true
    });
  } else {
    for(noteIndexValue of noteIndex){
      Dot.buildAndAttach([staveNote], {
        index: noteIndexValue
      });
    }
  }
  return staveNote;
}
</script>
</syntaxhighlight>
 
 
 付点を付けるにはDot.buildAndAttach([ staveNoteオブジェクト ], { index: 数値 }) といった関数を実行する必要があります。例では何度も呼び出すのが面倒なので、ユーザ関数を定義しています。公式では、特定のひとつの音符にしか、付点をつけることができないユーザ関数になっていたので、引数に数値単独の値を付与するところに、数値配列に、何番目の音符に付点をつけるかを指定するようなものに変更しています。Formatter.FormatAndDraw(context4, stave4, notes4); だけでも五線譜に音符を描画できるという便利な一面も紹介してくれています。
 
 
 臨時記号をつける処理をしているが、keys: ['c##/5']のように指定しても描画には反映されない。描画に影響しているのは、.addModifier(new Accidental('#'), 0) という部分です。一つ目の引数で Accidental オブジェクトのコンストラクタ引数に臨時記号の種類を与えています。##が二重シャープ。#がシャープ。bがフラット。bbが二重フラットです。今回は使いませんでしたが、ナチュラルはnです。.addModifier の2つめの引数はコードになっているときの、何番目の音に適用するかを指定しています。
 
 
 改めてまとめると、臨時記号の種類は以下のようになっています。
<table style="width: 100%; text-align: left; border-collapse: collapse; border-spacing: 0;">
<tr style=" background: #778ca3; border-right: solid 1px #778ca3; color: #ffffff;">
  <th style="width: 200px;">シーケンス</th>
  <th>意味</th>
  </tr>
<tr>
  <td>n</td>
  <td>ナチュラル</td>
</tr>
<tr style=" background: #dddddd;">
  <td>#</td>
  <td>シャープ(半音上げる)</td>
</tr>
<tr>
  <td>##</td>
  <td>ダブルシャープ(半音2回上げる)</td>
</tr>
<tr style=" background: #dddddd;">
  <td>b</td>
  <td>フラット(半音下げる)</td>
</tr>
<tr>
  <td>bb</td>
  <td>ダブルフラット(半音2回下げる)</td>
</tr>
</table>
 
 
 
 Dot.…によって付点をつけるだけで、長さに不整合が起こっても記譜に問題は起こりません。どちらかというと一小節の中に納まるように配置されるかは、durationの組み合わせのほうが重要です。
 
 
 今回はト音記号 treble からヘ音記号 bass に変えました。他にも以下のような記号があります。
<table style="width: 100%; text-align: left; border-collapse: collapse; border-spacing: 0;">
<tr style=" background: #778ca3; border-right: solid 1px #778ca3; color: #ffffff;">
  <th style="width: 200px;">シーケンス</th>
  <th>意味</th>
  </tr>
<tr>
  <td>treble</td>
  <td>ト音記号 &#x1D11E;</td>
</tr>
<tr style=" background: #dddddd;">
  <td>bass</td>
  <td>ヘ音記号 &#x1D122;</td>
</tr>
<tr>
  <td>alto</td>
  <td>ハ音記号(アルト) &#x1D121;</td>
</tr>
<tr style=" background: #dddddd;">
  <td>percussion</td>
  <td>打楽器記号</td>
</tr>
<tr>
  <td>tenor</td>
  <td>ハ音記号(テナー) &#x1D121;一つ上にシフト</td>
</tr>
<tr style=" background: #dddddd;">
  <td>soprano</td>
  <td>ハ音記号(ソプラノ) &#x1D121;二つ下にシフト</td>
</tr>
<tr>
  <td>mezzo-soprano</td>
  <td>ハ音記号(メゾソプラノ) &#x1D121;一つ下にシフト</td>
</tr>
<tr style=" background: #dddddd;">
  <td>baritone-c</td>
  <td>ハ音記号(バリトン) &#x1D121;二つ上にシフト</td>
</tr>
<tr>
  <td>baritone-f</td>
  <td>ヘ音記号(バリトン) &#x1D122;一つ下にシフト</td>
</tr>
<tr style=" background: #dddddd;">
  <td>subbass</td>
  <td>ヘ音記号(サブバス) &#x1D122;一つ上にシフト</td>
</tr>
<tr>
  <td>french</td>
  <td>ト音記号(フレンチ) &#x1D11E;一つ下にシフト</td>
</tr>
</table>
 
 
 
=== '''五線譜に音符を配置 連桁(れんこう)・ビーム・梁  new Beam()による方法''' ===
<div id="output5"></div>
 
 
 スクリプトは以下のようなものです。
<syntaxhighlight lang="javascript">
<div id="output5"></div>
//******************ここから複数の楽譜表示における共通のスクリプト**
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js"></script>
<script>
const {
  Renderer,
  Stave,
  StaveNote,
  Voice,
  Accidental,
  Beam,
  Formatter,
  Dot
} = Vex.Flow;
//******************ここまで共通**
</script>
<script>
// Create an SVG renderer and attach it to the DIV element named "boo".
const div5 = document.getElementById('output5');
const renderer5 = new Renderer(div5, Renderer.Backends.SVG);
 
// Configure the rendering context.
renderer5.resize(500, 200);
const context5 = renderer5.getContext();
 
// Create a stave of width 400 at position 10, 40 on the canvas.
const stave5 = new Stave(10, 40, 400);
 
// Add a clef and time signature.
stave5.addClef('treble').addTimeSignature('4/4');
 
// Connect it to the rendering context and draw!
stave5.setContext(context5).draw();
 
// Create the notes
const notes51 = [
    dotted(
        new StaveNote({
            keys: ["e##/5"],
            duration: "8d",
        }).addModifier(new Accidental("##"))
    ),
     new StaveNote({
     new StaveNote({
         keys: ["d/4"],
        keys: ["b/4"],
         duration: "q",
        duration: "16",
     }),
    }).addModifier(new Accidental("b")),
];
];
 
 
const allNotes5 = notes51.concat(notes52).concat(notes53).concat(notes54);
const notes52 = [
 
    new StaveNote({
// Create the beams for the first three groups.
        keys: ["c/4"],
// This hides the normal stems and flags.
        duration: "8",
const beams5 = [new Beam(notes51), new Beam(notes52), new Beam(notes53)];
    }),
 
    new StaveNote({
Formatter.FormatAndDraw(context5, stave5, allNotes5);
        keys: ["d/4"],
 
        duration: "16",
// Draw the beams and stems.
    }),
beams5.forEach((b) => {
    new StaveNote({
     b.setContext(context5).draw();
        keys: ["e/4"],
});
        duration: "16",
</yjavascript>
    }).addModifier(new Accidental("b")),
 
];
<yjavascript></script>
 
<script>
const notes53 = [
// Create an SVG renderer and attach it to the DIV element named "boo".
    new StaveNote({
const div6 = document.getElementById("output6");
        keys: ["d/4"],
const renderer6 = new Renderer(div6, Renderer.Backends.SVG);
        duration: "16",
    }),
    new StaveNote({
        keys: ["e/4"],
        duration: "16",
    }).addModifier(new Accidental("#")),
    new StaveNote({
        keys: ["g/4"],
        duration: "32",
    }),
    new StaveNote({
        keys: ["a/4"],
        duration: "32",
    }),
    new StaveNote({
        keys: ["g/4"],
        duration: "16",
    }),
];
 
const notes54 = [
    new StaveNote({
        keys: ["d/4"],
        duration: "q",
    }),
];
 
const allNotes5 = notes51.concat(notes52).concat(notes53).concat(notes54);
 
// Create the beams for the first three groups.
// This hides the normal stems and flags.
const beams5 = [new Beam(notes51), new Beam(notes52), new Beam(notes53)];
 
Formatter.FormatAndDraw(context5, stave5, allNotes5);
 
// Draw the beams and stems.
beams5.forEach((b) => {
    b.setContext(context5).draw();
});
 
//********前の記譜と共通の関数です。2重定義しないように注意******
function dotted(staveNote, noteIndex = -1) {
  if (noteIndex < 0) {
    Dot.buildAndAttach([staveNote], {
      all: true
    });
  } else {
    for(noteIndexValue of noteIndex){
      Dot.buildAndAttach([staveNote], {
        index: noteIndexValue
      });
    }
  }
  return staveNote;
}
//********ここまで
</script>
</syntaxhighlight>
 
 
 音符の旗を描画せずにつなぐのを連桁といいます。表紙のひと固まりを繋ぎ演奏しやすいような表記にしています。8分音符の場合4つをつないで、2分音符のかたまりにしたりもします。例の楽譜では3拍目が16分音符で四分音符1つ分のひとかたまりになっています。16分音符の3つ目が32分なっています。キッチリ演奏しようとすると32分はめちゃくちゃ短いのでアタックからの立ち上がりが早い楽器でかつ技術力が要求される奏法になってきます。そんな演奏面の話はどうでもよいでしょうか。
 
 
 連桁は、Beam というシーケンスによって描画されます。Notesを連桁にしたい塊でひとつになるように作ると、const beams5 = [new Beam(notes51), new Beam(notes52), new Beam(notes53)];という記法によって、連桁のかたまりごとに配列にすることができます。このそれぞれの要素について関数、new Beam(notes51).setContext(context5).draw();のような操作によって蓮桁の描画準備がされます。小節の全体は const allNotes5 = notes51.concat(notes52).concat(notes53).concat(notes54); のように結合されたものを.FormatAndDraw(context5, stave5, allNotes5);のようにして描画されます。
 
 
 
=== '''五線譜に音符を配置 連桁(れんこう)・ビーム・梁  Beam.generateBeams()による方法''' ===
<div id="output6"></div>
 
 
 スクリプトは以下のようなものです。
<syntaxhighlight lang="javascript">
<div id="output6"></div>
//******************ここから複数の楽譜表示における共通のスクリプト**
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js"></script>
<script>
const {
  Renderer,
  Stave,
  StaveNote,
  Voice,
  Accidental,
  Beam,
  Formatter,
  Dot
} = Vex.Flow;
//******************ここまで共通**
</script>
<script>
// Create an SVG renderer and attach it to the DIV element named "boo".
const div6 = document.getElementById("output6");
const renderer6 = new Renderer(div6, Renderer.Backends.SVG);
 
// Configure the rendering context.
renderer6.resize(500, 500);
const context6 = renderer6.getContext();
 
// Create a stave of width 400 at position 10, 40 on the canvas.
const stave6 = new Stave(10, 40, 400);
 
// Add a clef and time signature.
stave6.addClef("treble").addTimeSignature("4/4");
 
// Connect it to the rendering context and draw!
stave6.setContext(context6).draw();
 
const notes6 = [
    dotted(new StaveNote({ keys: ["e##/5"], duration: "8d" }).addModifier(new Accidental("##"))),
    new StaveNote({ keys: ["b/4"], duration: "16" }).addModifier(new Accidental("b")),
    new StaveNote({ keys: ["c/4"], duration: "8" }),
    new StaveNote({ keys: ["d/4"], duration: "16" }),
    new StaveNote({ keys: ["e/4"], duration: "16" }).addModifier(new Accidental("b")),
    new StaveNote({ keys: ["d/4"], duration: "16" }),
    new StaveNote({ keys: ["e/4"], duration: "16" }).addModifier(new Accidental("#")),
    new StaveNote({ keys: ["g/4"], duration: "32" }),
    new StaveNote({ keys: ["a/4"], duration: "32" }),
    new StaveNote({ keys: ["g/4"], duration: "16" }),
    new StaveNote({ keys: ["d/4"], duration: "q" }),
];
 
const beams6 = Beam.generateBeams(notes6);
Formatter.FormatAndDraw(context6, stave6, notes6);
beams6.forEach((b) => {
    b.setContext(context6).draw();
});
//********前の記譜と共通の関数です。2重定義しないように注意******
function dotted(staveNote, noteIndex = -1) {
  if (noteIndex < 0) {
    Dot.buildAndAttach([staveNote], {
      all: true
    });
  } else {
    for(noteIndexValue of noteIndex){
      Dot.buildAndAttach([staveNote], {
        index: noteIndexValue
      });
    }
  }
  return staveNote;
}
//********ここまで
</script>
</syntaxhighlight>
 
 
 notesで一小節分をまとめて定義した後、const beams6 = Beam.generateBeams(notes6); とするだけです。自動なので、思い通りになっていない可能性もありますが、8分音符4つは最大で二分音符にそれ以下は四分音符単位で連桁してくれるようです。連桁に含まれるので、ここまでの知識では連符には対応できないです。3連とか5/6/7/9/10/11/12…連とかは違う表記が必要です。また別の項目で確認するつもりなので、それまでは我慢です。自分もまだ知らないし。知らんけどじゃないし。本当に知らないし。本当に知らんけど。なんだけど。
 
 
 連符って演奏上においては最難関だね。3連でも、2分三連はさらにムズイ。2分三連くらいの長さになると、適当だとさすがにだめだし、あってないことを多い。ビート分割して、感じないとね。2分三連の中抜きみたいに1個あるいは2個だけ鳴らすとか、ありえないくらいむずかしい。心で刻むのつらいな。演奏家としては向いてないんだろうな。
 
 
 
=== '''五線譜に音符を配置 タイ''' ===
<div id="output7"></div>
 
 
 スクリプトは以下のようなものです。
<syntaxhighlight lang="javascript">
<div id="output7"></div>
//******************ここから複数の楽譜表示における共通のスクリプト**
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js"></script>
<script>
const {
  Renderer,
  Stave,
  StaveNote,
  Voice,
  Accidental,
  Beam,
  Formatter,
  Dot,
  StaveTie
} = Vex.Flow;
//******************ここまで共通**
</script>
<script>
// Create an SVG renderer and attach it to the DIV element named "boo".
const div7 = document.getElementById("output7");
const renderer7 = new Renderer(div7, Renderer.Backends.SVG);
 
// Configure the rendering context.
renderer7.resize(500, 200);
const context7 = renderer7.getContext();
 
// Create a stave of width 400 at position 10, 40 on the canvas.
const stave7 = new Stave(10, 40, 400);
 
// Add a clef and time signature.
stave7.addClef("treble").addTimeSignature("4/4");
 
// Connect it to the rendering context and draw!
stave7.setContext(context7).draw();
 
const notes7 = [
    dotted(
        new StaveNote({
            keys: ["e##/5"],
            duration: "8d",
        }).addModifier(new Accidental("##"))
    ),
    new StaveNote({
        keys: ["b/4"],
        duration: "16",
    }).addModifier(new Accidental("b")),
    new StaveNote({
        keys: ["c/4"],
        duration: "8",
    }),
    new StaveNote({
        keys: ["d/4"],
        duration: "16",
    }),
    new StaveNote({
        keys: ["d/4"],
        duration: "16",
    }),
    new StaveNote({
        keys: ["d/4", "A/3"],
        duration: "q",
    }),
    new StaveNote({
        keys: ["d/4", "A/3"],
        duration: "q",
    }),
];
 
const beams7 = Beam.generateBeams(notes7);
Formatter.FormatAndDraw(context7, stave7, notes7);
beams7.forEach(function (b) {
    b.setContext(context7).draw();
});
 
const ties7 = [
    new StaveTie({
        first_note: notes7[4],
        last_note: notes7[5],
        first_indices: [0],
        last_indices: [0],
    }),
    new StaveTie({
        first_note: notes7[5],
        last_note: notes7[6],
        first_indices: [1],
        last_indices: [1],
    }),
];
 
ties7.forEach((t) => {
    t.setContext(context7).draw();
});
//********前の記譜と共通の関数です。2重定義しないように注意******
function dotted(staveNote, noteIndex = -1) {
  if (noteIndex < 0) {
    Dot.buildAndAttach([staveNote], {
      all: true
    });
  } else {
    for(noteIndexValue of noteIndex){
      Dot.buildAndAttach([staveNote], {
        index: noteIndexValue
      });
    }
  }
  return staveNote;
}
//********ここまで
</script>
</syntaxhighlight>
 
 
 タイは、notes に対してconst ties7 = [ new StaveTie({ first_note: notes7[4], last_note: notes7[5], first_indices: [0],        last_indices: [0],}) ] という具合に StaveTie() の引数にオブジェクトを定義していて、主に4つのプロパティを設定します。first_noteがタイの始まり、last_noteがタイの終わりの音符です。和音を構成していない場合は必ず 0 ですが、first_indicesとlast_indicesにどの和音に対してタイを描画するかを指定しています。高さの異なる音に対して指定した場合はスラーになりそうですが、本当にそうなるかどうか確かめてみました。そしたら、やっぱりスラーと同じ役割になりそうでした。ついでに和音に2番目の音、配列番号1番に対してタイを描画する例は最後のA/3に対しての描画が参考になるでしょう。スラーについて言及したドキュメントもありそうなので、はっきりしたことはそれを確かめてみてからですね。何か不都合があるかもしれないし。タイでスラーを描画するのはね。どうなんだろうね。
 
 
 あー。いっけん大丈夫そうだけど、駄目だ。スラーは旗の根元からとか自由に描くこともありました。タイは音符で接続するだけで大丈夫な法則があったんですね。なるほど。気が付かなかった。やるなVexFlow。楽譜をじっくり眺めないと気付かないことだな。どうやらslurというキーワードではなく、その柔軟さを必要とするため、curveという名前で実現しているっぽい。またその時がきたら説明できると思います。VexFlow作者も大変だな。かなり完璧だけど、できないこともあるんだろうね。ここまで網羅されていると、できないことがあってもしゃーねぇな。
 
 
 ここまで書いて思ったんだけど、(function(){ コード記述部 })();の中に書けば、変数を名前空間で分け隔てることができるんじゃねと思えてきた。変数に番号とかつけてるのってカッコ悪いのかな。次の記事で試してみよう。
 
 
 
=== '''タブ譜''' ===
<div id="output8"></div>
 
 
 スクリプトは以下のようなものです。
<syntaxhighlight lang="javascript">
<div id="output8"></div>
//******************ここから複数の楽譜表示における共通のスクリプト**
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js"></script>
<script>
const {
  Renderer,
  Stave,
  StaveNote,
  Voice,
  Accidental,
  Beam,
  Formatter,
  Dot,
  StaveTie,
  TabStave,
  TabNote,
  Bend,
  Vibrato
} = Vex.Flow;
//******************ここまで共通**
</script>
<script>
// Create an SVG renderer and attach it to the DIV element with id="output".
const div8 = document.getElementById("output8");
const renderer8 = new Renderer(div8, Renderer.Backends.SVG);
 
// Configure the rendering context.
renderer8.resize(500, 300);
const context8 = renderer8.getContext();
 
// Create a tab stave of width 400 at position 10, 40 on the canvas.
const stave8 = new TabStave(10, 40, 400);
stave8.addClef("tab").setContext(context8).draw();
 
const notes8 = [
    // A single note
    new TabNote({
        positions: [{ str: 3, fret: 7 }],
        duration: "q",
    }),
 
    // A chord with the note on the 3rd string bent
    new TabNote({
        positions: [
            { str: 2, fret: 10 },
            { str: 3, fret: 9 },
        ],
        duration: "q",
    }).addModifier(new Bend("Full"), 1),
 
    // A single note with a harsh vibrato
    new TabNote({
        positions: [{ str: 2, fret: 5 }],
        duration: "h",
    }).addModifier(new Vibrato().setHarsh(true).setVibratoWidth(70), 0),
];
 
Formatter.FormatAndDraw(context8, stave8, notes8);
</script>
</syntaxhighlight>
 
 
 タブの文字フォントが公式の例と違うな。淋しい。どれが何音符かわからないダサい。2分音符には〇と棒が、全音符には〇が、四分音符いかにも旗は必要だと思う。あとタブは指番号だけでなくフレットの一部抜粋でコードの図が記入できた方がいいんじゃね。あとこんな大げさなFullとかいうチョーキングってダサくない。W.C と Cho. または C やH.Cでいいよ。あと数字は手書きフォントのがいいね。総じていえばシンコーミュージックがやっぱさえてると思う。シンコーミュージックのは綺麗なスコアだけど内容がダメダメっていうね。何かしらデメリットあるわ。どの立場から言ってるのかとお思いでしょうけど。なんでスコア譜ってあんなにダメダメなんだろうね。お金出して買ってる人もいるのに。ここに。耳コピができないというややる気もない子がここにいるのに。スコア譜命なんだけど。Youtubeのスコア出してる神レベルの人だけが最強だとおもう。あれは弾いていて本当に楽だし、現実的な運指になってるし、弾き心地最高。ロックを感じれる。時代が味方してくれている。あとは市販のスコア譜がもっと魂のはいったものになってほしい。弾きにくいとこをちょっと考えるくらいは自分でできるけど、なんか違うんだよなが解決できない。何が違うんだろうな。差分を埋め合わせる技術力が付かない。悲しい。という愚痴。あと音作りもよくわからないんだよな。でかい音出して練習できないからな。あと、ずっとヘッドフォンでやってると耳おかしくなるから生音だけで練習する時間も結構あって、あれはあれで淋しい。運指の練習にはなるけど、最後の弾き方の練習はやっぱヘッドフォンでやるしかなくて、結局、いい音作りできなくて、折れるということを繰り返してる。悔しいな。小さい才能の引き出し方がまったくわからないから、全く開花しないのな。もんくばっかりしか思いつかないもん。やだよな。こんな志向の奴の音楽なんて聴きたくないよな。わかるよ。だから、部屋にこもってめいわくかけないくらいのことしか思いつかない。つまんない。結局そこに落ち着く。つまんない。でも音楽もクラリネットもギターも大好き!これだけは譲れない。でも、どうすんのコレって感じだね。ハハハ。
 
 
 何が変わったかっていうと、Stave が TabStaveに変わった。Notes が TabNote に、Keysが positions になって、[{ str: 3, fret: 7 }] っていう指定に変わった。str が弦番号ね。1弦が細い方、6弦が太い方。なので、弦番号の数字の小ささ大きさが弦の幅に'''<span style="color: darkred;">比例</span>'''していると覚えておきましょう。そしたら、どっちが1弦だっけ問題はなくなるね。fret がタブ譜に書かれる数字そのもの、あとでこれを手書き調のフォントに変える方法を考えてみたいと思います。あとは数字を〇で囲ったりできるんかな。無理かな。旗つけたり。やえもするとフレット図いれたり。
 
 
 音符の装飾は、addModifier()で同じなんだけど、臨時記号の#のようなAccidentalではなく、new Bend("Full"), 1のような指定でチョーキング。new Vibrato().setHarsh(true).setVibratoWidth(70) で、長さ70のビブラート。setHarsh(true)でカクカクのビブラート。falseなら丸みを帯びた波線です。falseのほうが好きだな。Harshはヒドイとかっていう意味だそうで荒々しくをON OFFみたいな感じですね。その他についてはまた後ほどですね。ビブラートは通常の楽譜でも描画できるべきなので、五線譜の方でもできるかためしておきますか。いや、試してみたら簡単にはいかないな。同じではないのだな。五線譜上に表示させるのはまた考えないとだめですね。なんか方法はありそう。
 
 
 
=== '''小節線''' ===
<div id="output9"></div>
 
 
 スクリプトは以下のようなものです。
<syntaxhighlight lang="javascript">
<div id="output9"></div>
//******************ここから複数の楽譜表示における共通のスクリプト**
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js"></script>
<script>
const {
  Stave,
  StaveNote,
  Beam,
  Formatter,
  Renderer
} = Vex.Flow;
//******************ここまで共通**
</script>
<script>
// Create an SVG renderer and attach it to the DIV element with id="output".
const div9 = document.getElementById("output9");
const renderer9 = new Renderer(div9, Renderer.Backends.SVG);
 
// Configure the rendering context.
renderer9.resize(890, 130);
const context9 = renderer9.getContext();
 
// Measure 1
const staveMeasure91 = new Stave(10, 0, 470);
//staveMeasure91.addClef("treble").addTimeSignature("4/4").setContext(context9).draw();
staveMeasure91.addClef("treble");
staveMeasure91.addTimeSignature("4/4");
staveMeasure91.setContext(context9).draw();
 
const notesMeasure91 = [
  new StaveNote({ keys: ["c/4"], duration: "q" }),
  new StaveNote({ keys: ["d/4"], duration: "q" }),
  new StaveNote({ keys: ["b/4"], duration: "qr" }),
  new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "q" })
];
 
// Helper function to justify and draw a 4/4 voice
Formatter.FormatAndDraw(context9, staveMeasure91, notesMeasure91);
 
// Measure 2 - second measure is placed adjacent to first measure.
const staveMeasure92 = new Stave(staveMeasure91.width + staveMeasure91.x, 0, 400);
 
const notesMeasure92_part1 = [
  new StaveNote({ keys: ["c/4"], duration: "8" }),
  new StaveNote({ keys: ["d/4"], duration: "8" }),
  new StaveNote({ keys: ["b/4"], duration: "8" }),
  new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "8" })
];
 
const notesMeasure92_part2 = [
  new StaveNote({ keys: ["c/4"], duration: "8" }),
  new StaveNote({ keys: ["d/4"], duration: "8" }),
  new StaveNote({ keys: ["b/4"], duration: "8" }),
  new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "8" })
];
 
// Create the beams for 8th notes in second measure.
const beam91 = new Beam(notesMeasure92_part1);
const beam92 = new Beam(notesMeasure92_part2);
 
const notesMeasure92 = notesMeasure92_part1.concat(notesMeasure92_part2);
 
staveMeasure92.setContext(context9).draw();
Formatter.FormatAndDraw(context9, staveMeasure92, notesMeasure92);
 
// Render beams
beam91.setContext(context9).draw();
beam92.setContext(context9).draw();
</script>
</syntaxhighlight>
 
 
 2小節の楽譜にしました。まずは描画エリアを広くしないといけないので、横890にしました。1小節目は470。2小節目を400としてみました。記譜する内容はもっとも短い部分で8分音符なので、1小節あたり400は余裕があります。1小節目にはト音記号と拍子記号をおくので70ほど大きくします。
 
 
 したがって、const staveMeasure91 = new Stave(10, 0, 470); が1小節目。2小節目の始まりは10ではないので、staveMeasure91.width + staveMeasure91.xとして、const staveMeasure92 = new Stave(470 + 10, 0, 400); という内容で作られます。staveMeasure91.width が 470 で、staveMeasure91.width が 10 です。細かい計算があっていないと乱れるってことだな。abcjsとかはこんなこと気にしなくても自動で小節線が引かれますそのかわり、今回のように余裕を持っていひくとかバランスよくするとか、細かい指示は自動ではできません。結局、VexFlowくらい細かい指示をしないと思い通りにはならないですね。描く人の気持ちを込めれるのがVexFlowだな。AI?まだまだ無理だな。はやくAIに楽譜を描かせればいいのに。MIDI情報だけで完璧に描けるようになるんじゃね。シンコーミュージックファンなので、シンコーの楽譜で学習した奴がいいな。シンコーミュージックに潜入してどうやって描画してるのか見てみたいくらいだよ。入社したいわー。1年くらいかな。コピー譜つくる才能が無くて放り出されそうだけど。編集作業の一員くらいならやれるでしょ。コピする人の下で働くみたいなね。そんな奴いらんか。しかも1年とかなめたこといってるやつ採用するわけねぇな。シンコーミュージックは好きなんだけどな。間違ってますねコレとか偉そうにギター弾きながらコピしているひとにグサグサいってみたりね。すぐ解雇だな。どんだけシンコー好きやねんって感じだね。
 
 
 2小節目は8分音符四つを繰り返すので、notesMeasure92_part1とpart2を作ってますね。全く同じだから、notesMeasure92_part1.concat(notesMeasure92_part1);で繰り返せないのかな。だめか無限ループみたいになるわな。手前でコピーだから const notesMeasure92_part2 = notesMeasure92_part1;ってすれば、省略できんのかもな。やってみるか。はい。ダメでしたー。意味わからん。できそうなのにできない。なんか違うんだな。8分音符を4つのやつどうしを繋ぐときは、const notesMeasure92 = notesMeasure92_part1.concat(notesMeasure92_part2); とします。これは前までにやった 4つのNotesを繋ぐときに使ったときと同じことです。自動でやる方法なら notesMeasure92_part1 とか2つ作らず1つに8音まとめてから、const beam9 = Beam.generateBeams(notesMeasure92)とかだな。そんな感じで2小節は足し算が必要になるという地味な方法でした。横には4小節くらいを描くのがせいぜいなので普通はそれほど複雑にはならないでしょうね。ページとか縦という概念を覚えないといけないのでしょう。ページは描画領域を分けるのでしょう。タブレット端末とかを楽譜にして演奏する目的なら横に8小節くらいとかで、縦にふやしていく感じのパート譜を作れば便利そうだね。改行部分を柔軟に設定するのはできないな。柔軟にしようとしたら、これまたJavaScriptで自力で制御するんでしょう。そこまでやれる人いたら、使いこなしが凄そうだな。
 
 
 
[[VexFlow 使い方]]へ戻る。
 
<yjavascript></script>
<script>
const {
  Renderer,
  Stave,
  StaveNote,
  Voice,
  Accidental,
  Beam,
  Formatter,
  Dot,
  StaveTie
} = Vex.Flow;
 
// Create an SVG renderer and attach it to the DIV element named "boo".
const div = document.getElementById('output');
const renderer = new Renderer(div, Renderer.Backends.SVG);
 
// Configure the rendering context.
renderer.resize(500, 200);
const context = renderer.getContext();
 
context.beginPath(); // start recording our pen's moves.
context.moveTo(0, 0);
context.lineTo(499, 0);
context.lineTo(499, 199);
context.lineTo(410, 100);
context.lineTo(10, 40);
context.closePath();
context.stroke();
 
// Create a stave of width 400 at position 10, 40 on the canvas.
const stave = new Stave(10, 40, 400);
 
// Add a clef and time signature.
stave.addClef('treble').addTimeSignature('C');
 
// Connect it to the rendering context and draw!
stave.setContext(context).draw();
 
</yjavascript>
 
<yjavascript></script>
<script>
 
// Create an SVG renderer and attach it to the DIV element named "boo".
const div2 = document.getElementById('output2');
const renderer2 = new Renderer(div2, Renderer.Backends.SVG);
 
// Configure the rendering context.
renderer2.resize(500, 200);
const context2 = renderer2.getContext();
 
context2.beginPath(); // start recording our pen's moves.
context2.moveTo(0, 0);
context2.lineTo(499, 0);
context2.lineTo(499, 199);
context2.lineTo(360, 100);
context2.closePath();
context2.stroke();
 
// Create a stave of width 400 at position 10, 40 on the canvas.
const stave2 = new Stave(10, 40, 400);
 
// Add a clef and time signature.
stave2.addClef('treble').addTimeSignature('C|');
 
// Connect it to the rendering context and draw!
stave2.setContext(context2).draw();
 
// Create the notes
const notes2 = [
  new StaveNote({
    keys: ['c/5'],
    duration: 'q'
  }),
  new StaveNote({
    keys: ['d/4'],
    duration: 'q'
  }),
  new StaveNote({
    keys: ['b/4'],
    duration: 'qr'
  }),
  new StaveNote({
    keys: ['c/4', 'e/4', 'g/4'],
    duration: 'q'
  }),
];
 
// Create a voice in 4/4 and add above notes
const voice2 = new Voice({ num_beats: 4, beat_value: 4 });
voice2.addTickables(notes2);
 
// Format and justify the notes to 400 pixels.
new Formatter().joinVoices([voice2]).format([voice2], 350);
 
// Render voice
voice2.draw(context2, stave2);
</yjavascript>
 
 
<yjavascript></script>
<script>
// Create an SVG renderer and attach it to the DIV element named "boo".
const div3 = document.getElementById('output3');
const renderer3 = new Renderer(div3, Renderer.Backends.SVG);
 
// Configure the rendering context.
renderer3.resize(500, 200);
const context3 = renderer3.getContext();
 
// Create a stave of width 400 at position 10, 40 on the canvas.
const stave3 = new Stave(10, 40, 400);
 
// Add a clef and time signature.
stave3.addClef('treble').addTimeSignature('4/4');
 
// Connect it to the rendering context and draw!
stave3.setContext(context3).draw();
 
// Create the notes
const notes3 = [
  new StaveNote({
    keys: ['c/5'],
    duration: 'q'
  }),
  new StaveNote({
    keys: ['d/4'],
    duration: 'q'
  }),
  new StaveNote({
    keys: ['b/4'],
    duration: 'qr'
  }),
  new StaveNote({
    keys: ['c/4', 'e/4', 'g/4'],
    duration: 'q'
  }),
];
 
const notes32 = [
  new StaveNote({
  keys: ['c/4'],
  duration: 'w'
  })
];
 
// Create a voice in 4/4 and add above notes
const voices3 = [
  new Voice({
    num_beats: 4,
    beat_value: 4
  }).addTickables(notes3),
  new Voice({
    num_beats: 4,
    beat_value: 4
  }).addTickables(notes32),
];
 
// Format and justify the notes to 400 pixels.
new Formatter().joinVoices(voices3).format(voices3, 350);
 
// Render voices.
voices3.forEach(function(v) {
  v.draw(context3, stave3);
});
</script>
</yjavascript>
 
<yjavascript></script>
<script>
// Create an SVG renderer and attach it to the DIV element named "boo".
const div4 = document.getElementById('output4');
const renderer4 = new Renderer(div4, Renderer.Backends.SVG);
 
// Configure the rendering context.
renderer4.resize(500, 200);
const context4 = renderer4.getContext();
 
// Create a stave of width 400 at position 10, 40 on the canvas.
const stave4 = new Stave(10, 40, 400);
 
// Add a clef and time signature.
stave4.addClef('bass').addTimeSignature('4/4');
 
// Connect it to the rendering context and draw!
stave4.setContext(context4).draw();
 
// Create the notes
const notes4 = [
  dotted(new StaveNote({
    keys: ['c##/5'],
    duration: '8d'
  }).addModifier(new Accidental('##'))),
  new StaveNote({
    keys: ['db/4'],
    duration: '16'
  }).addModifier(new Accidental('b')),
  dotted(new StaveNote({
    keys: ['b/4', 'd/5', 'f/5'],
    duration: 'h'
  }).addModifier(new Accidental('#'),0),[0, 2]),
  dotted(new StaveNote({
    keys: ['c/4', 'e/4', 'g/4'],
    duration: '8'
  })),
];
 
Formatter.FormatAndDraw(context4, stave4, notes4);
 
function dotted(staveNote, noteIndex = -1) {
  if (noteIndex < 0) {
    Dot.buildAndAttach([staveNote], {
      all: true
    });
  } else {
    for(noteIndexValue of noteIndex){
      Dot.buildAndAttach([staveNote], {
        index: noteIndexValue
      });
    }
  }
  return staveNote;
}
</script>
</yjavascript>
 
<yjavascript></script>
<script>
// Create an SVG renderer and attach it to the DIV element named "boo".
const div5 = document.getElementById('output5');
const renderer5 = new Renderer(div5, Renderer.Backends.SVG);
 
// Configure the rendering context.
renderer5.resize(500, 200);
const context5 = renderer5.getContext();
 
// Create a stave of width 400 at position 10, 40 on the canvas.
const stave5 = new Stave(10, 40, 400);
 
// Add a clef and time signature.
stave5.addClef('bass').addTimeSignature('4/4');
 
// Connect it to the rendering context and draw!
stave5.setContext(context5).draw();
 
// Create the notes
const notes51 = [
    dotted(
        new StaveNote({
            keys: ["e##/5"],
            duration: "8d",
        }).addModifier(new Accidental("##"))
    ),
    new StaveNote({
        keys: ["b/4"],
        duration: "16",
    }).addModifier(new Accidental("b")),
];
 
const notes52 = [
    new StaveNote({
        keys: ["c/4"],
        duration: "8",
    }),
    new StaveNote({
        keys: ["d/4"],
        duration: "16",
    }),
    new StaveNote({
        keys: ["e/4"],
        duration: "16",
    }).addModifier(new Accidental("b")),
];
 
const notes53 = [
    new StaveNote({
        keys: ["d/4"],
        duration: "16",
    }),
    new StaveNote({
        keys: ["e/4"],
        duration: "16",
    }).addModifier(new Accidental("#")),
    new StaveNote({
        keys: ["g/4"],
        duration: "32",
    }),
    new StaveNote({
        keys: ["a/4"],
        duration: "32",
    }),
    new StaveNote({
        keys: ["g/4"],
        duration: "16",
    }),
];
 
const notes54 = [
    new StaveNote({
         keys: ["d/4"],
         duration: "q",
     }),
];
 
const allNotes5 = notes51.concat(notes52).concat(notes53).concat(notes54);
 
// Create the beams for the first three groups.
// This hides the normal stems and flags.
const beams5 = [new Beam(notes51), new Beam(notes52), new Beam(notes53)];
 
Formatter.FormatAndDraw(context5, stave5, allNotes5);
 
// Draw the beams and stems.
beams5.forEach((b) => {
     b.setContext(context5).draw();
});
</yjavascript>
 
<yjavascript></script>
<script>
// Create an SVG renderer and attach it to the DIV element named "boo".
const div6 = document.getElementById("output6");
const renderer6 = new Renderer(div6, Renderer.Backends.SVG);
 
// Configure the rendering context.
renderer6.resize(500, 200);
const context6 = renderer6.getContext();
 
// Create a stave of width 400 at position 10, 40 on the canvas.
const stave6 = new Stave(10, 40, 400);
 
// Add a clef and time signature.
stave6.addClef("treble").addTimeSignature("4/4");
 
// Connect it to the rendering context and draw!
stave6.setContext(context6).draw();
 
const notes6 = [
    dotted(new StaveNote({ keys: ["e##/5"], duration: "8d" }).addModifier(new Accidental("##"))),
    new StaveNote({ keys: ["b/4"], duration: "16" }).addModifier(new Accidental("b")),
    new StaveNote({ keys: ["c/4"], duration: "8" }),
    new StaveNote({ keys: ["d/4"], duration: "16" }),
    new StaveNote({ keys: ["e/4"], duration: "16" }).addModifier(new Accidental("b")),
    new StaveNote({ keys: ["d/4"], duration: "16" }),
    new StaveNote({ keys: ["e/4"], duration: "16" }).addModifier(new Accidental("#")),
    new StaveNote({ keys: ["g/4"], duration: "32" }),
    new StaveNote({ keys: ["a/4"], duration: "32" }),
    new StaveNote({ keys: ["g/4"], duration: "16" }),
    new StaveNote({ keys: ["d/4"], duration: "q" }),
];
 
const beams6 = Beam.generateBeams(notes6);
Formatter.FormatAndDraw(context6, stave6, notes6);
beams6.forEach((b) => {
    b.setContext(context6).draw();
});
</yjavascript>
 
<yjavascript></script>
<script>
// Create an SVG renderer and attach it to the DIV element named "boo".
const div7 = document.getElementById("output7");
const renderer7 = new Renderer(div7, Renderer.Backends.SVG);
 
// Configure the rendering context.
renderer7.resize(500, 200);
const context7 = renderer7.getContext();
 
// Create a stave of width 400 at position 10, 40 on the canvas.
const stave7 = new Stave(10, 40, 400);
 
// Add a clef and time signature.
stave7.addClef("treble").addTimeSignature("4/4");
 
// Connect it to the rendering context and draw!
stave7.setContext(context7).draw();
 
const notes7 = [
    dotted(
        new StaveNote({
            keys: ["e##/5"],
            duration: "8d",
        }).addModifier(new Accidental("##"))
    ),
    new StaveNote({
        keys: ["b/4"],
        duration: "16",
    }).addModifier(new Accidental("b")),
    new StaveNote({
        keys: ["c/4"],
        duration: "8",
    }),
    new StaveNote({
        keys: ["d/4"],
        duration: "16",
    }),
    new StaveNote({
        keys: ["d/4"],
        duration: "16",
    }),
    new StaveNote({
        keys: ["d/4", "A/3"],
        duration: "q",
    }),
    new StaveNote({
        keys: ["d/4", "B/3"],
        duration: "q",
    }),
];
 
const beams7 = Beam.generateBeams(notes7);
Formatter.FormatAndDraw(context7, stave7, notes7);
beams7.forEach(function (b) {
    b.setContext(context7).draw();
});
 
const ties7 = [
    new StaveTie({
        first_note: notes7[4],
        last_note: notes7[5],
        first_indices: [0],
        last_indices: [0],
    }),
    new StaveTie({
        first_note: notes7[5],
        last_note: notes7[6],
        first_indices: [1],
        last_indices: [1],
    }),
];
 
ties7.forEach((t) => {
    t.setContext(context7).draw();
});
</yjavascript>
 
<yjavascript></script>
<script>
const { TabStave, TabNote, Bend, Vibrato } = Vex.Flow;
 
// Create an SVG renderer and attach it to the DIV element with id="output".
const div8 = document.getElementById("output8");
const renderer8 = new Renderer(div8, Renderer.Backends.SVG);
 
// Configure the rendering context.
renderer8.resize(500, 300);
const context8 = renderer8.getContext();
 
// Create a tab stave of width 400 at position 10, 40 on the canvas.
const stave8 = new TabStave(10, 40, 400);
stave8.addClef("tab").setContext(context8).draw();
 
const notes8 = [
    // A single note
    new TabNote({
        positions: [{ str: 3, fret: 7 }],
        duration: "q",
    }),
 
    // A chord with the note on the 3rd string bent
    new TabNote({
        positions: [
            { str: 2, fret: 10 },
            { str: 3, fret: 9 },
        ],
        duration: "q",
    }).addModifier(new Bend("Full"), 1),
 
    // A single note with a harsh vibrato
    new TabNote({
        positions: [{ str: 2, fret: 5 }],
        duration: "h",
    }).addModifier(new Vibrato().setHarsh(true).setVibratoWidth(70), 0),
];
 
Formatter.FormatAndDraw(context8, stave8, notes8);
</yjavascript>
 
<yjavascript></script>
<script>
// Create an SVG renderer and attach it to the DIV element with id="output".
const div9 = document.getElementById("output9");
const renderer9 = new Renderer(div9, Renderer.Backends.SVG);


// Configure the rendering context.
// Configure the rendering context.
renderer6.resize(500, 200);
renderer9.resize(890, 130);
const context6 = renderer6.getContext();
const context9 = renderer9.getContext();
 
// Create a stave of width 400 at position 10, 40 on the canvas.
const stave6 = new Stave(10, 40, 400);


// Add a clef and time signature.
// Measure 1
stave6.addClef("treble").addTimeSignature("4/4");
const staveMeasure91 = new Stave(10, 0, 470);
 
//staveMeasure91.addClef("treble").addTimeSignature("4/4").setContext(context9).draw();
// Connect it to the rendering context and draw!
staveMeasure91.addClef("treble");
stave6.setContext(context6).draw();
staveMeasure91.addTimeSignature("4/4");
staveMeasure91.setContext(context9).draw();


const notes6 = [
const notesMeasure91 = [
    dotted(new StaveNote({ keys: ["e##/5"], duration: "8d" }).addModifier(new Accidental("##"))),
  new StaveNote({ keys: ["c/4"], duration: "q" }),  
    new StaveNote({ keys: ["b/4"], duration: "16" }).addModifier(new Accidental("b")),
  new StaveNote({ keys: ["d/4"], duration: "q" }),  
    new StaveNote({ keys: ["c/4"], duration: "8" }),
  new StaveNote({ keys: ["b/4"], duration: "qr" }),  
    new StaveNote({ keys: ["d/4"], duration: "16" }),
  new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "q" })
    new StaveNote({ keys: ["e/4"], duration: "16" }).addModifier(new Accidental("b")),
    new StaveNote({ keys: ["d/4"], duration: "16" }),
    new StaveNote({ keys: ["e/4"], duration: "16" }).addModifier(new Accidental("#")),
    new StaveNote({ keys: ["g/4"], duration: "32" }),
    new StaveNote({ keys: ["a/4"], duration: "32" }),
    new StaveNote({ keys: ["g/4"], duration: "16" }),
    new StaveNote({ keys: ["d/4"], duration: "q" }),
];
];


const beams6 = Beam.generateBeams(notes6);
// Helper function to justify and draw a 4/4 voice
Formatter.FormatAndDraw(context6, stave6, notes6);
Formatter.FormatAndDraw(context9, staveMeasure91, notesMeasure91);
beams6.forEach((b) => {
    b.setContext(context6).draw();
});
</yjavascript>
 
<yjavascript></script>
<script>
// Create an SVG renderer and attach it to the DIV element named "boo".
const div7 = document.getElementById("output7");
const renderer7 = new Renderer(div7, Renderer.Backends.SVG);
 
// Configure the rendering context.
renderer7.resize(500, 200);
const context7 = renderer7.getContext();
 
// Create a stave of width 400 at position 10, 40 on the canvas.
const stave7 = new Stave(10, 40, 400);


// Add a clef and time signature.
// Measure 2 - second measure is placed adjacent to first measure.
stave7.addClef("treble").addTimeSignature("4/4");
const staveMeasure92 = new Stave(staveMeasure91.width + staveMeasure91.x, 0, 400);


// Connect it to the rendering context and draw!
const notesMeasure92_part1 = [
stave7.setContext(context7).draw();
  new StaveNote({ keys: ["c/4"], duration: "8" }),  
 
  new StaveNote({ keys: ["d/4"], duration: "8" }),  
const notes7 = [
  new StaveNote({ keys: ["b/4"], duration: "8" }),  
    dotted(
  new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "8" })
        new StaveNote({
            keys: ["e##/5"],
            duration: "8d",
        }).addModifier(new Accidental("##"))
    ),
    new StaveNote({
        keys: ["b/4"],
        duration: "16",
    }).addModifier(new Accidental("b")),
    new StaveNote({
        keys: ["c/4"],
        duration: "8",
    }),
    new StaveNote({
        keys: ["d/4"],
        duration: "16",
    }),
    new StaveNote({
        keys: ["d/4"],
        duration: "16",
    }),
    new StaveNote({
        keys: ["d/4", "A/3"],
        duration: "q",
    }),
    new StaveNote({
        keys: ["d/4", "B/3"],
        duration: "q",
    }),
];
];


const beams7 = Beam.generateBeams(notes7);
const notesMeasure92_part2 = [
Formatter.FormatAndDraw(context7, stave7, notes7);
  new StaveNote({ keys: ["c/4"], duration: "8" }),  
beams7.forEach(function (b) {
  new StaveNote({ keys: ["d/4"], duration: "8" }),  
    b.setContext(context7).draw();
  new StaveNote({ keys: ["b/4"], duration: "8" }),  
});
  new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "8" })
 
const ties7 = [
    new StaveTie({
        first_note: notes7[4],
        last_note: notes7[5],
        first_indices: [0],
        last_indices: [0],
    }),
    new StaveTie({
        first_note: notes7[5],
        last_note: notes7[6],
        first_indices: [1],
        last_indices: [1],
    }),
];
];


ties7.forEach((t) => {
// Create the beams for 8th notes in second measure.
    t.setContext(context7).draw();
const beam91 = new Beam(notesMeasure92_part1);
});
const beam92 = new Beam(notesMeasure92_part2);
</yjavascript>
 
<yjavascript></script>
<script>
const { TabStave, TabNote, Bend, Vibrato } = Vex.Flow;
 
// Create an SVG renderer and attach it to the DIV element with id="output".
const div8 = document.getElementById("output8");
const renderer8 = new Renderer(div8, Renderer.Backends.SVG);
 
// Configure the rendering context.
renderer8.resize(500, 300);
const context8 = renderer8.getContext();
 
// Create a tab stave of width 400 at position 10, 40 on the canvas.
const stave8 = new TabStave(10, 40, 400);
stave8.addClef("tab").setContext(context8).draw();


const notes8 = [
const notesMeasure92 = notesMeasure92_part1.concat(notesMeasure92_part2);
    // A single note
    new TabNote({
        positions: [{ str: 3, fret: 7 }],
        duration: "q",
    }),


    // A chord with the note on the 3rd string bent
staveMeasure92.setContext(context9).draw();
    new TabNote({
Formatter.FormatAndDraw(context9, staveMeasure92, notesMeasure92);
        positions: [
            { str: 2, fret: 10 },
            { str: 3, fret: 9 },
        ],
        duration: "q",
    }).addModifier(new Bend("Full"), 1),


    // A single note with a harsh vibrato
// Render beams
    new TabNote({
beam91.setContext(context9).draw();
        positions: [{ str: 2, fret: 5 }],
beam92.setContext(context9).draw();
        duration: "h",
    }).addModifier(new Vibrato().setHarsh(true).setVibratoWidth(70), 0),
];
 
Formatter.FormatAndDraw(context8, stave8, notes8);
</yjavascript>
</yjavascript>

2024年4月10日 (水) 03:24時点における最新版

VexFlow 使い方へ戻る。

概要

 ひとつひとつの構成要素を知る前に入門用の楽譜をいくつか描いて全貌をつかもうとするのが最初です。公式サイトにもあるものと同じです。このサイトでは使い方を最後まで学習すると以下のようなスコアブックのような描画もできるようになります。

 

五線譜

 五線譜を描いてみます。目安になる線を引きました。左上の角の頂点が(x, y)対応で(1, 1)、そこから時計回りに(499, 1)→(499, 199)→(410, 100)→(10, 40)という線です。


 スクリプトは以下のとおり。

<div id="output"></div>
//2023-09Mid:<script src="https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js"></script>
//2024-03Mid:Version
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.2.2/build/cjs/vexflow.js"></script>
<script>
const {
  Renderer,
  Stave
} = Vex.Flow;

// Create an SVG renderer and attach it to the DIV element named "boo".
const div = document.getElementById('output');
const renderer = new Renderer(div, Renderer.Backends.SVG);

// Configure the rendering context.
renderer.resize(500, 200);
const context = renderer.getContext();

// Create a stave of width 400 at position 10, 40 on the canvas.
const stave = new Stave(10, 40, 400);

// Add a clef and time signature.
stave.addClef('treble').addTimeSignature('C');

// Connect it to the rendering context and draw!
stave.setContext(context).draw();
</script>

 最初に、div に 出力するタグを取得する。ここでは <div id="output"></div> のタグ全体要素を取得している。次にnew Renderer(div, Renderer.Backends.SVG); でSVGでの描画処理をしてくれるようになります。他にもRenderer.Backends.CANVASという指定もできます。自分はSVGバージョンが好みです。なんか問題報告が少ない。CANVASはスケールサイズ表示がおかしいとか言ってる人もいます。renderer.resize(500, 200); は描画エリアのサイズを指定しています。そして、この描画エリアに五線譜のオブジェクトとして構築した stave を配置します。


 New Stave(10, 40, 400)で、描画エリアの x = 10, y = 40の位置に幅 400 の五線譜を描きます。(410, 100)の頂点位置をみればわかりますが、きっちり 10+400 の大きさになっています。五線譜の真ん中の第三線が中央になっており縦 200 が 1 行にちょうど良いようです。楽譜部分の表示スケールを変更して小さくする予定なので、その時にまた、描画領域について考えてみたいと思います。


 stave.addClef('treble').addTimeSignature('4/4'); で treble ト音記号 4/4 つまり4分の4拍子という五線譜になります。


 自分は、持っているPCが12型で1920x1280を使っていますので、表示倍率を150%にしています。その関係で、実質は横サイズが1920の66%で、横は1280pxと変わらない表示領域です。したがって、Wikiの横幅も最大にして、1000pxくらいがちょうどいい限界の大きさです。しかし、そのサイズでは、4小節くらいを1行にするには楽譜が大きすぎるので、もうちょっと小さくしないといけないなとは思っていますが、その処理も、もうちょっと後でやるとします。続けて、実際の音符を配置してみます。


 拍子記号は以下のようなものが使えます。

シーケンス 意味
C Cを表示(4/4拍子)
C| Cの横中央に縦棒を表示(2/2拍子)
n1/n2 n2 分の n1 拍子

 

五線譜に音符を配置

 目安になる線を引きました。左上の角の頂点が(x, y)対応で(1, 1)、そこから時計回りに(499, 1)→(499, 199)→(360, 100)です。


スクリプトは以下のようなものです。


const {
  Renderer,
  Stave,
  StaveNote,
  Voice,
  Formatter
} = Vex.Flow;

const div2 = document.getElementById('output2');
const renderer2 = new Renderer(div2, Renderer.Backends.SVG);

// Configure the rendering context.
renderer2.resize(500, 200);
const context2 = renderer2.getContext();

// Create a stave of width 400 at position 10, 40 on the canvas.
const stave2 = new Stave(10, 40, 400);

// Add a clef and time signature.
stave2.addClef('treble').addTimeSignature('C|');

// Connect it to the rendering context and draw!
stave2.setContext(context2).draw();

// Create the notes
const notes2 = [
  new StaveNote({
    keys: ['c/5'],
    duration: 'q'
  }),
  new StaveNote({
    keys: ['d/4'],
    duration: 'q'
  }),
  new StaveNote({
    keys: ['b/4'],
    duration: 'qr'
  }),
  new StaveNote({
    keys: ['c/4', 'e/4', 'g/4'],
    duration: 'q'
  }),
];

// Create a voice in 4/4 and add above notes
const voice2 = new Voice({ num_beats: 4, beat_value: 4 });
voice2.addTickables(notes2);

// Format and justify the notes to 400 pixels.
new Formatter().joinVoices([voice2]).format([voice2], 350);

// Render voice
voice2.draw(context2, stave2);


 変数名が最初の楽譜とダブるところは数字を付けました。一番最初の StaveNote, Voice, Formatterの部分は最初のと共通なので書き換えが必要です。あとの部分で2重で定義してもダメです。最初のがエラーになって、致命的エラーで何も描画処理がされなくなります。コード全体としては、音符を付ける部分は、五線譜に付け足すので、すべて、最初のコードより後ろに付け足す感じです。const notes2 以降が付け足した部分です。ここまで書いて言えるのは VexFlow はプログラミングに近いです。音楽や楽譜しか知らない人が、この方式で楽譜を描くのは難しいと感じると思います。ABC記述方式のモノが好まれる理由が少しわかります。ただVexflowの方が複雑な記述であるゆえに、複雑な楽譜が書ける言えるのかもしれない。まるで配列の中にひとつづつの音符を生成している感じで、ひとつの音符ごとに区切って new StaveNote() 関数に引数としてオブジェクト値(自分はこれをPerlの連想配列と似ているので連想配列とちょくちょく呼んでいます)を指定しています。プロパティ名にkeys: とduration: が指定されます。プロパティ名であることがわかりやすいように:までつけていますが名前自体は keys と duration です。keys プロパティ名に対応するものとして、配列が指定されるようです。値が一つしかなくてもです。そこに音の高さ相当する値、音階名と段階番号を付けます。実音記号のA(ラ), B(シ), C(ド), D(レ), E(ミ), F(ファ), G(ソ)に対応していて、/ で区切って段階の番号を付与します。


 ピアノと同じで88音の下から1, 2, … , 10, 11 まであります。ピアノ譜のト音記号の五線譜に下に一つ補助線を付けたドが C/4 に相当します。通常、ト音記号の五線譜には E/3 が最低音、 最高の音しても G/6 までくらいを使います。C/6 から 上の音での演奏が続くときは オクターブ記号を使って、その下に描くことがあります。ギターも同じです。ギターは4オクターブしかありません。が一番上の音付近を使うときは、オクターブ記号を置いて、一段階下げて表記します。どの楽器もピアノの88鍵盤には負けます。ギターの一番低い音でもE/3です。クラリネットの音域もギターに似ていますが、最高音はギターよりも狭い範囲が一般的です。最高音のあたりはかなりうまい人だと出せなくはない音ですが狙うのはスゴイ難しいです。ベースとピアノの最低音あたりはヘ音記号の五線譜に書かれることが普通です。ピアノはト音記号とヘ音記号の二つ同時に使うこともあります。音域やばいっす。バイオリンあたりはテノール記号(ハ音記号)というト音記号でもヘ音記号でもないものを使う場合があります。この3種類しかないと思います。あとは変則の五線譜として、通常の位置とは異なる部分に、記号を配置する手法があります。


 durationの値には文字列が設定されて、 q が四分音符、h が2分音符、w が全音符を表します。8, 16, 32, 64 がそれぞれ8分音符、 16分音符、 32分音符、64分音符に対応しますが、連符もありますので、ひとことで言えるほど簡単ではないです。後ろに r をつけると休符になります。rest の r だそうです。 voice2.draw(context2, stave2);


 このようにして作った notes2 を Voiceという単位に格納するため new Voice({ num_beats: 4, beat_value: 4 }); でプロパティ名 num_beats と beat_value を持ったオブジェクトを引数にしています。ともに 4 拍子の中に 4つの拍子をもった音だと定義されていて、その中に、notes2 を取り込むべく、voice2.addTickables(notes2); としています。


 そして、これらを400pxの五線譜の中に納まるように、new Formatter().joinVoices([voice2]).format([voice2], 350); としています。x = 350のところに最後の音符が収まっていることも確認できます。このように処理した voice2 を context2 の描画領域に stave2 の 五線譜に描画します。


 duration に設定できる値は以下のようなものです。

シーケンス 意味
w 全音符
h 2分音符
q 4分音符
8 8分音符
16 16分音符
32 32分音符

 

五線譜に音符を配置 2Voices


 スクリプトは以下のようなものです。

<div id="output3"></div>
//******************ここから複数の楽譜表示における共通のスクリプト**
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js"></script>
<script>
const {
  Renderer,
  Stave,
  StaveNote,
  Voice,
  Formatter
} = Vex.Flow;
//******************ここまで共通**
// Create an SVG renderer and attach it to the DIV element named "boo".
const div3 = document.getElementById('output3');
const renderer3 = new Renderer(div3, Renderer.Backends.SVG);

// Configure the rendering context.
renderer3.resize(500, 200);
const context3 = renderer3.getContext();

// Create a stave of width 400 at position 10, 40 on the canvas.
const stave3 = new Stave(10, 40, 400);

// Add a clef and time signature.
stave3.addClef('treble').addTimeSignature('4/4');

// Connect it to the rendering context and draw!
stave3.setContext(context3).draw();

// Create the notes
const notes3 = [
  new StaveNote({
    keys: ['c/5'],
    duration: 'q'
  }),
  new StaveNote({
    keys: ['d/4'],
    duration: 'q'
  }),
  new StaveNote({
    keys: ['b/4'],
    duration: 'qr'
  }),
  new StaveNote({
    keys: ['c/4', 'e/4', 'g/4'],
    duration: 'q'
  }),
];

const notes32 = [new StaveNote({
  keys: ['c/4'],
  duration: 'w'
})];

// Create a voice in 4/4 and add above notes
const voices3 = [
  new Voice({
    num_beats: 4,
    beat_value: 4
  }).addTickables(notes3),
  new Voice({
    num_beats: 4,
    beat_value: 4
  }).addTickables(notes32),
];

// Format and justify the notes to 400 pixels.
new Formatter().joinVoices(voices3).format(voices3, 350);

// Render voices.
voices3.forEach(function(v) {
  v.draw(context3, stave3);
});


 和音を除いて、通常、一人では演奏できないような記譜法を2Voicesと呼んでいます。和音を引けない楽器ならそれだけで2Voices 3Voicesとも言えますが、この例のように1小節の中を休符と音符とで分かち合うのを1Voiceとした考え方を保有する記譜の場合は、特別な記述が必要です。別の音という意味付けになります。スコア譜なんかではよく2Voiceや3Voiceの記述が入ります。アレンジするうえで、音を足していくことはよくあるためです。ただしスコア譜では、一小節を短くして |1Voice(2Voice)|のように記譜している方式もよくあります。パートを増やせばいいじゃんと思いますが、限られたスペースにちょっとした音のためだけにパートを増やすことは通常は、実施しません。


 const notes32の部分の定義のように、音符の定義を別で実施します。Voiceを生成するときに、2つの音符をまとめるときに配列に個別のオブジェクトとして定義します。そして作られた配列2の大きさのVoiceをFormatter関数を呼び出して、そのメンバ関数 joinVoices で結合します。joinVoices 関数は返り値が formatter 形式で .format も Formatter のメンバ関数です。そして 350px の中に描画するようになります。そして、2要素の配列の Voices それぞれを繰り返し処理によって、引数の描画エリア context3 五線譜 stave3 に音符を配置して描画します。


五線譜に音符を配置 付点臨時記号


 スクリプトは以下のようなものです。

<div id="output4"></div>
//******************ここから複数の楽譜表示における共通のスクリプト**
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js"></script>
<script>
const {
  Renderer,
  Stave,
  StaveNote,
  Voice,
  Accidental,
  Formatter,
  Dot
} = Vex.Flow;
//******************ここまで共通**
</script>
<script>
// Create an SVG renderer and attach it to the DIV element named "boo".
const div4 = document.getElementById('output4');
const renderer4 = new Renderer(div4, Renderer.Backends.SVG);

// Configure the rendering context.
renderer4.resize(500, 200);
const context4 = renderer4.getContext();

// Create a stave of width 400 at position 10, 40 on the canvas.
const stave4 = new Stave(10, 40, 400);

// Add a clef and time signature.
stave4.addClef('treble').addTimeSignature('4/4');

// Connect it to the rendering context and draw!
stave4.setContext(context4).draw();

// Create the notes
const notes4 = [
  dotted(new StaveNote({
    keys: ['c##/5'],
    duration: '8d'
  }).addModifier(new Accidental('##'))),
  new StaveNote({
    keys: ['db/4'],
    duration: '16'
  }).addModifier(new Accidental('b')),
  dotted(new StaveNote({
    keys: ['b/4', 'd/5', 'f/5'],
    duration: 'h'
  }).addModifier(new Accidental('#'),0),[0, 2]),
  dotted(new StaveNote({
    keys: ['c/4', 'e/4', 'g/4'],
    duration: '8'
  })),
];

Formatter.FormatAndDraw(context4, stave4, notes4);

function dotted(staveNote, noteIndex = -1) {
  if (noteIndex < 0) {
    Dot.buildAndAttach([staveNote], {
      all: true
    });
  } else {
    for(noteIndexValue of noteIndex){
      Dot.buildAndAttach([staveNote], {
        index: noteIndexValue
      });
    }
  }
  return staveNote;
}
</script>


 付点を付けるにはDot.buildAndAttach([ staveNoteオブジェクト ], { index: 数値 }) といった関数を実行する必要があります。例では何度も呼び出すのが面倒なので、ユーザ関数を定義しています。公式では、特定のひとつの音符にしか、付点をつけることができないユーザ関数になっていたので、引数に数値単独の値を付与するところに、数値配列に、何番目の音符に付点をつけるかを指定するようなものに変更しています。Formatter.FormatAndDraw(context4, stave4, notes4); だけでも五線譜に音符を描画できるという便利な一面も紹介してくれています。


 臨時記号をつける処理をしているが、keys: ['c##/5']のように指定しても描画には反映されない。描画に影響しているのは、.addModifier(new Accidental('#'), 0) という部分です。一つ目の引数で Accidental オブジェクトのコンストラクタ引数に臨時記号の種類を与えています。##が二重シャープ。#がシャープ。bがフラット。bbが二重フラットです。今回は使いませんでしたが、ナチュラルはnです。.addModifier の2つめの引数はコードになっているときの、何番目の音に適用するかを指定しています。


 改めてまとめると、臨時記号の種類は以下のようになっています。

シーケンス 意味
n ナチュラル
# シャープ(半音上げる)
## ダブルシャープ(半音2回上げる)
b フラット(半音下げる)
bb ダブルフラット(半音2回下げる)


 Dot.…によって付点をつけるだけで、長さに不整合が起こっても記譜に問題は起こりません。どちらかというと一小節の中に納まるように配置されるかは、durationの組み合わせのほうが重要です。


 今回はト音記号 treble からヘ音記号 bass に変えました。他にも以下のような記号があります。

シーケンス 意味
treble ト音記号 𝄞
bass ヘ音記号 𝄢
alto ハ音記号(アルト) 𝄡
percussion 打楽器記号
tenor ハ音記号(テナー) 𝄡一つ上にシフト
soprano ハ音記号(ソプラノ) 𝄡二つ下にシフト
mezzo-soprano ハ音記号(メゾソプラノ) 𝄡一つ下にシフト
baritone-c ハ音記号(バリトン) 𝄡二つ上にシフト
baritone-f ヘ音記号(バリトン) 𝄢一つ下にシフト
subbass ヘ音記号(サブバス) 𝄢一つ上にシフト
french ト音記号(フレンチ) 𝄞一つ下にシフト

 

五線譜に音符を配置 連桁(れんこう)・ビーム・梁 new Beam()による方法


 スクリプトは以下のようなものです。

<div id="output5"></div>
//******************ここから複数の楽譜表示における共通のスクリプト**
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js"></script>
<script>
const {
  Renderer,
  Stave,
  StaveNote,
  Voice,
  Accidental,
  Beam,
  Formatter,
  Dot
} = Vex.Flow;
//******************ここまで共通**
</script>
<script>
// Create an SVG renderer and attach it to the DIV element named "boo".
const div5 = document.getElementById('output5');
const renderer5 = new Renderer(div5, Renderer.Backends.SVG);

// Configure the rendering context.
renderer5.resize(500, 200);
const context5 = renderer5.getContext();

// Create a stave of width 400 at position 10, 40 on the canvas.
const stave5 = new Stave(10, 40, 400);

// Add a clef and time signature.
stave5.addClef('treble').addTimeSignature('4/4');

// Connect it to the rendering context and draw!
stave5.setContext(context5).draw();

// Create the notes
const notes51 = [
    dotted(
        new StaveNote({
            keys: ["e##/5"],
            duration: "8d",
        }).addModifier(new Accidental("##"))
    ),
    new StaveNote({
        keys: ["b/4"],
        duration: "16",
    }).addModifier(new Accidental("b")),
];

const notes52 = [
    new StaveNote({
        keys: ["c/4"],
        duration: "8",
    }),
    new StaveNote({
        keys: ["d/4"],
        duration: "16",
    }),
    new StaveNote({
        keys: ["e/4"],
        duration: "16",
    }).addModifier(new Accidental("b")),
];

const notes53 = [
    new StaveNote({
        keys: ["d/4"],
        duration: "16",
    }),
    new StaveNote({
        keys: ["e/4"],
        duration: "16",
    }).addModifier(new Accidental("#")),
    new StaveNote({
        keys: ["g/4"],
        duration: "32",
    }),
    new StaveNote({
        keys: ["a/4"],
        duration: "32",
    }),
    new StaveNote({
        keys: ["g/4"],
        duration: "16",
    }),
];

const notes54 = [
    new StaveNote({
        keys: ["d/4"],
        duration: "q",
    }),
];

const allNotes5 = notes51.concat(notes52).concat(notes53).concat(notes54);

// Create the beams for the first three groups.
// This hides the normal stems and flags.
const beams5 = [new Beam(notes51), new Beam(notes52), new Beam(notes53)];

Formatter.FormatAndDraw(context5, stave5, allNotes5);

// Draw the beams and stems.
beams5.forEach((b) => {
    b.setContext(context5).draw();
});

//********前の記譜と共通の関数です。2重定義しないように注意******
function dotted(staveNote, noteIndex = -1) {
  if (noteIndex < 0) {
    Dot.buildAndAttach([staveNote], {
      all: true
    });
  } else {
    for(noteIndexValue of noteIndex){
      Dot.buildAndAttach([staveNote], {
        index: noteIndexValue
      });
    }
  }
  return staveNote;
}
//********ここまで
</script>


 音符の旗を描画せずにつなぐのを連桁といいます。表紙のひと固まりを繋ぎ演奏しやすいような表記にしています。8分音符の場合4つをつないで、2分音符のかたまりにしたりもします。例の楽譜では3拍目が16分音符で四分音符1つ分のひとかたまりになっています。16分音符の3つ目が32分なっています。キッチリ演奏しようとすると32分はめちゃくちゃ短いのでアタックからの立ち上がりが早い楽器でかつ技術力が要求される奏法になってきます。そんな演奏面の話はどうでもよいでしょうか。


 連桁は、Beam というシーケンスによって描画されます。Notesを連桁にしたい塊でひとつになるように作ると、const beams5 = [new Beam(notes51), new Beam(notes52), new Beam(notes53)];という記法によって、連桁のかたまりごとに配列にすることができます。このそれぞれの要素について関数、new Beam(notes51).setContext(context5).draw();のような操作によって蓮桁の描画準備がされます。小節の全体は const allNotes5 = notes51.concat(notes52).concat(notes53).concat(notes54); のように結合されたものを.FormatAndDraw(context5, stave5, allNotes5);のようにして描画されます。

 

五線譜に音符を配置 連桁(れんこう)・ビーム・梁 Beam.generateBeams()による方法


 スクリプトは以下のようなものです。

<div id="output6"></div>
//******************ここから複数の楽譜表示における共通のスクリプト**
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js"></script>
<script>
const {
  Renderer,
  Stave,
  StaveNote,
  Voice,
  Accidental,
  Beam,
  Formatter,
  Dot
} = Vex.Flow;
//******************ここまで共通**
</script>
<script>
// Create an SVG renderer and attach it to the DIV element named "boo".
const div6 = document.getElementById("output6");
const renderer6 = new Renderer(div6, Renderer.Backends.SVG);

// Configure the rendering context.
renderer6.resize(500, 500);
const context6 = renderer6.getContext();

// Create a stave of width 400 at position 10, 40 on the canvas.
const stave6 = new Stave(10, 40, 400);

// Add a clef and time signature.
stave6.addClef("treble").addTimeSignature("4/4");

// Connect it to the rendering context and draw!
stave6.setContext(context6).draw();

const notes6 = [
    dotted(new StaveNote({ keys: ["e##/5"], duration: "8d" }).addModifier(new Accidental("##"))),
    new StaveNote({ keys: ["b/4"], duration: "16" }).addModifier(new Accidental("b")),
    new StaveNote({ keys: ["c/4"], duration: "8" }),
    new StaveNote({ keys: ["d/4"], duration: "16" }),
    new StaveNote({ keys: ["e/4"], duration: "16" }).addModifier(new Accidental("b")),
    new StaveNote({ keys: ["d/4"], duration: "16" }),
    new StaveNote({ keys: ["e/4"], duration: "16" }).addModifier(new Accidental("#")),
    new StaveNote({ keys: ["g/4"], duration: "32" }),
    new StaveNote({ keys: ["a/4"], duration: "32" }),
    new StaveNote({ keys: ["g/4"], duration: "16" }),
    new StaveNote({ keys: ["d/4"], duration: "q" }),
];

const beams6 = Beam.generateBeams(notes6);
Formatter.FormatAndDraw(context6, stave6, notes6);
beams6.forEach((b) => {
    b.setContext(context6).draw();
});
//********前の記譜と共通の関数です。2重定義しないように注意******
function dotted(staveNote, noteIndex = -1) {
  if (noteIndex < 0) {
    Dot.buildAndAttach([staveNote], {
      all: true
    });
  } else {
    for(noteIndexValue of noteIndex){
      Dot.buildAndAttach([staveNote], {
        index: noteIndexValue
      });
    }
  }
  return staveNote;
}
//********ここまで
</script>


 notesで一小節分をまとめて定義した後、const beams6 = Beam.generateBeams(notes6); とするだけです。自動なので、思い通りになっていない可能性もありますが、8分音符4つは最大で二分音符にそれ以下は四分音符単位で連桁してくれるようです。連桁に含まれるので、ここまでの知識では連符には対応できないです。3連とか5/6/7/9/10/11/12…連とかは違う表記が必要です。また別の項目で確認するつもりなので、それまでは我慢です。自分もまだ知らないし。知らんけどじゃないし。本当に知らないし。本当に知らんけど。なんだけど。


 連符って演奏上においては最難関だね。3連でも、2分三連はさらにムズイ。2分三連くらいの長さになると、適当だとさすがにだめだし、あってないことを多い。ビート分割して、感じないとね。2分三連の中抜きみたいに1個あるいは2個だけ鳴らすとか、ありえないくらいむずかしい。心で刻むのつらいな。演奏家としては向いてないんだろうな。

 

五線譜に音符を配置 タイ


 スクリプトは以下のようなものです。

<div id="output7"></div>
//******************ここから複数の楽譜表示における共通のスクリプト**
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js"></script>
<script>
const {
  Renderer,
  Stave,
  StaveNote,
  Voice,
  Accidental,
  Beam,
  Formatter,
  Dot,
  StaveTie
} = Vex.Flow;
//******************ここまで共通**
</script>
<script>
// Create an SVG renderer and attach it to the DIV element named "boo".
const div7 = document.getElementById("output7");
const renderer7 = new Renderer(div7, Renderer.Backends.SVG);

// Configure the rendering context.
renderer7.resize(500, 200);
const context7 = renderer7.getContext();

// Create a stave of width 400 at position 10, 40 on the canvas.
const stave7 = new Stave(10, 40, 400);

// Add a clef and time signature.
stave7.addClef("treble").addTimeSignature("4/4");

// Connect it to the rendering context and draw!
stave7.setContext(context7).draw();

const notes7 = [
    dotted(
        new StaveNote({
            keys: ["e##/5"],
            duration: "8d",
        }).addModifier(new Accidental("##"))
    ),
    new StaveNote({
        keys: ["b/4"],
        duration: "16",
    }).addModifier(new Accidental("b")),
    new StaveNote({
        keys: ["c/4"],
        duration: "8",
    }),
    new StaveNote({
        keys: ["d/4"],
        duration: "16",
    }),
    new StaveNote({
        keys: ["d/4"],
        duration: "16",
    }),
    new StaveNote({
        keys: ["d/4", "A/3"],
        duration: "q",
    }),
    new StaveNote({
        keys: ["d/4", "A/3"],
        duration: "q",
    }),
];

const beams7 = Beam.generateBeams(notes7);
Formatter.FormatAndDraw(context7, stave7, notes7);
beams7.forEach(function (b) {
    b.setContext(context7).draw();
});

const ties7 = [
    new StaveTie({
        first_note: notes7[4],
        last_note: notes7[5],
        first_indices: [0],
        last_indices: [0],
    }),
    new StaveTie({
        first_note: notes7[5],
        last_note: notes7[6],
        first_indices: [1],
        last_indices: [1],
    }),
];

ties7.forEach((t) => {
    t.setContext(context7).draw();
});
//********前の記譜と共通の関数です。2重定義しないように注意******
function dotted(staveNote, noteIndex = -1) {
  if (noteIndex < 0) {
    Dot.buildAndAttach([staveNote], {
      all: true
    });
  } else {
    for(noteIndexValue of noteIndex){
      Dot.buildAndAttach([staveNote], {
        index: noteIndexValue
      });
    }
  }
  return staveNote;
}
//********ここまで
</script>


 タイは、notes に対してconst ties7 = [ new StaveTie({ first_note: notes7[4], last_note: notes7[5], first_indices: [0], last_indices: [0],}) ] という具合に StaveTie() の引数にオブジェクトを定義していて、主に4つのプロパティを設定します。first_noteがタイの始まり、last_noteがタイの終わりの音符です。和音を構成していない場合は必ず 0 ですが、first_indicesとlast_indicesにどの和音に対してタイを描画するかを指定しています。高さの異なる音に対して指定した場合はスラーになりそうですが、本当にそうなるかどうか確かめてみました。そしたら、やっぱりスラーと同じ役割になりそうでした。ついでに和音に2番目の音、配列番号1番に対してタイを描画する例は最後のA/3に対しての描画が参考になるでしょう。スラーについて言及したドキュメントもありそうなので、はっきりしたことはそれを確かめてみてからですね。何か不都合があるかもしれないし。タイでスラーを描画するのはね。どうなんだろうね。


 あー。いっけん大丈夫そうだけど、駄目だ。スラーは旗の根元からとか自由に描くこともありました。タイは音符で接続するだけで大丈夫な法則があったんですね。なるほど。気が付かなかった。やるなVexFlow。楽譜をじっくり眺めないと気付かないことだな。どうやらslurというキーワードではなく、その柔軟さを必要とするため、curveという名前で実現しているっぽい。またその時がきたら説明できると思います。VexFlow作者も大変だな。かなり完璧だけど、できないこともあるんだろうね。ここまで網羅されていると、できないことがあってもしゃーねぇな。


 ここまで書いて思ったんだけど、(function(){ コード記述部 })();の中に書けば、変数を名前空間で分け隔てることができるんじゃねと思えてきた。変数に番号とかつけてるのってカッコ悪いのかな。次の記事で試してみよう。

 

タブ譜


 スクリプトは以下のようなものです。

<div id="output8"></div>
//******************ここから複数の楽譜表示における共通のスクリプト**
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js"></script>
<script>
const {
  Renderer,
  Stave,
  StaveNote,
  Voice,
  Accidental,
  Beam,
  Formatter,
  Dot,
  StaveTie,
  TabStave, 
  TabNote, 
  Bend, 
  Vibrato
} = Vex.Flow;
//******************ここまで共通**
</script>
<script>
// Create an SVG renderer and attach it to the DIV element with id="output".
const div8 = document.getElementById("output8");
const renderer8 = new Renderer(div8, Renderer.Backends.SVG);

// Configure the rendering context.
renderer8.resize(500, 300);
const context8 = renderer8.getContext();

// Create a tab stave of width 400 at position 10, 40 on the canvas.
const stave8 = new TabStave(10, 40, 400);
stave8.addClef("tab").setContext(context8).draw();

const notes8 = [
    // A single note
    new TabNote({
        positions: [{ str: 3, fret: 7 }],
        duration: "q",
    }),

    // A chord with the note on the 3rd string bent
    new TabNote({
        positions: [
            { str: 2, fret: 10 },
            { str: 3, fret: 9 },
        ],
        duration: "q",
    }).addModifier(new Bend("Full"), 1),

    // A single note with a harsh vibrato
    new TabNote({
        positions: [{ str: 2, fret: 5 }],
        duration: "h",
    }).addModifier(new Vibrato().setHarsh(true).setVibratoWidth(70), 0),
];

Formatter.FormatAndDraw(context8, stave8, notes8);
</script>


 タブの文字フォントが公式の例と違うな。淋しい。どれが何音符かわからないダサい。2分音符には〇と棒が、全音符には〇が、四分音符いかにも旗は必要だと思う。あとタブは指番号だけでなくフレットの一部抜粋でコードの図が記入できた方がいいんじゃね。あとこんな大げさなFullとかいうチョーキングってダサくない。W.C と Cho. または C やH.Cでいいよ。あと数字は手書きフォントのがいいね。総じていえばシンコーミュージックがやっぱさえてると思う。シンコーミュージックのは綺麗なスコアだけど内容がダメダメっていうね。何かしらデメリットあるわ。どの立場から言ってるのかとお思いでしょうけど。なんでスコア譜ってあんなにダメダメなんだろうね。お金出して買ってる人もいるのに。ここに。耳コピができないというややる気もない子がここにいるのに。スコア譜命なんだけど。Youtubeのスコア出してる神レベルの人だけが最強だとおもう。あれは弾いていて本当に楽だし、現実的な運指になってるし、弾き心地最高。ロックを感じれる。時代が味方してくれている。あとは市販のスコア譜がもっと魂のはいったものになってほしい。弾きにくいとこをちょっと考えるくらいは自分でできるけど、なんか違うんだよなが解決できない。何が違うんだろうな。差分を埋め合わせる技術力が付かない。悲しい。という愚痴。あと音作りもよくわからないんだよな。でかい音出して練習できないからな。あと、ずっとヘッドフォンでやってると耳おかしくなるから生音だけで練習する時間も結構あって、あれはあれで淋しい。運指の練習にはなるけど、最後の弾き方の練習はやっぱヘッドフォンでやるしかなくて、結局、いい音作りできなくて、折れるということを繰り返してる。悔しいな。小さい才能の引き出し方がまったくわからないから、全く開花しないのな。もんくばっかりしか思いつかないもん。やだよな。こんな志向の奴の音楽なんて聴きたくないよな。わかるよ。だから、部屋にこもってめいわくかけないくらいのことしか思いつかない。つまんない。結局そこに落ち着く。つまんない。でも音楽もクラリネットもギターも大好き!これだけは譲れない。でも、どうすんのコレって感じだね。ハハハ。


 何が変わったかっていうと、Stave が TabStaveに変わった。Notes が TabNote に、Keysが positions になって、[{ str: 3, fret: 7 }] っていう指定に変わった。str が弦番号ね。1弦が細い方、6弦が太い方。なので、弦番号の数字の小ささ大きさが弦の幅に比例していると覚えておきましょう。そしたら、どっちが1弦だっけ問題はなくなるね。fret がタブ譜に書かれる数字そのもの、あとでこれを手書き調のフォントに変える方法を考えてみたいと思います。あとは数字を〇で囲ったりできるんかな。無理かな。旗つけたり。やえもするとフレット図いれたり。


 音符の装飾は、addModifier()で同じなんだけど、臨時記号の#のようなAccidentalではなく、new Bend("Full"), 1のような指定でチョーキング。new Vibrato().setHarsh(true).setVibratoWidth(70) で、長さ70のビブラート。setHarsh(true)でカクカクのビブラート。falseなら丸みを帯びた波線です。falseのほうが好きだな。Harshはヒドイとかっていう意味だそうで荒々しくをON OFFみたいな感じですね。その他についてはまた後ほどですね。ビブラートは通常の楽譜でも描画できるべきなので、五線譜の方でもできるかためしておきますか。いや、試してみたら簡単にはいかないな。同じではないのだな。五線譜上に表示させるのはまた考えないとだめですね。なんか方法はありそう。

 

小節線


 スクリプトは以下のようなものです。

<div id="output9"></div>
//******************ここから複数の楽譜表示における共通のスクリプト**
<script src="https://cdn.jsdelivr.net/npm/vexflow@4.1.0/build/cjs/vexflow.js"></script>
<script>
const {
  Stave, 
  StaveNote, 
  Beam, 
  Formatter, 
  Renderer
} = Vex.Flow;
//******************ここまで共通**
</script>
<script>
// Create an SVG renderer and attach it to the DIV element with id="output".
const div9 = document.getElementById("output9");
const renderer9 = new Renderer(div9, Renderer.Backends.SVG);

// Configure the rendering context.
renderer9.resize(890, 130);
const context9 = renderer9.getContext();

// Measure 1
const staveMeasure91 = new Stave(10, 0, 470);
//staveMeasure91.addClef("treble").addTimeSignature("4/4").setContext(context9).draw();
staveMeasure91.addClef("treble");
staveMeasure91.addTimeSignature("4/4");
staveMeasure91.setContext(context9).draw();

const notesMeasure91 = [
  new StaveNote({ keys: ["c/4"], duration: "q" }), 
  new StaveNote({ keys: ["d/4"], duration: "q" }), 
  new StaveNote({ keys: ["b/4"], duration: "qr" }), 
  new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "q" })
];

// Helper function to justify and draw a 4/4 voice
Formatter.FormatAndDraw(context9, staveMeasure91, notesMeasure91);

// Measure 2 - second measure is placed adjacent to first measure.
const staveMeasure92 = new Stave(staveMeasure91.width + staveMeasure91.x, 0, 400);

const notesMeasure92_part1 = [
  new StaveNote({ keys: ["c/4"], duration: "8" }), 
  new StaveNote({ keys: ["d/4"], duration: "8" }), 
  new StaveNote({ keys: ["b/4"], duration: "8" }), 
  new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "8" })
];

const notesMeasure92_part2 = [
  new StaveNote({ keys: ["c/4"], duration: "8" }), 
  new StaveNote({ keys: ["d/4"], duration: "8" }), 
  new StaveNote({ keys: ["b/4"], duration: "8" }), 
  new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "8" })
];

// Create the beams for 8th notes in second measure.
const beam91 = new Beam(notesMeasure92_part1);
const beam92 = new Beam(notesMeasure92_part2);

const notesMeasure92 = notesMeasure92_part1.concat(notesMeasure92_part2);

staveMeasure92.setContext(context9).draw();
Formatter.FormatAndDraw(context9, staveMeasure92, notesMeasure92);

// Render beams
beam91.setContext(context9).draw();
beam92.setContext(context9).draw();
</script>


 2小節の楽譜にしました。まずは描画エリアを広くしないといけないので、横890にしました。1小節目は470。2小節目を400としてみました。記譜する内容はもっとも短い部分で8分音符なので、1小節あたり400は余裕があります。1小節目にはト音記号と拍子記号をおくので70ほど大きくします。


 したがって、const staveMeasure91 = new Stave(10, 0, 470); が1小節目。2小節目の始まりは10ではないので、staveMeasure91.width + staveMeasure91.xとして、const staveMeasure92 = new Stave(470 + 10, 0, 400); という内容で作られます。staveMeasure91.width が 470 で、staveMeasure91.width が 10 です。細かい計算があっていないと乱れるってことだな。abcjsとかはこんなこと気にしなくても自動で小節線が引かれますそのかわり、今回のように余裕を持っていひくとかバランスよくするとか、細かい指示は自動ではできません。結局、VexFlowくらい細かい指示をしないと思い通りにはならないですね。描く人の気持ちを込めれるのがVexFlowだな。AI?まだまだ無理だな。はやくAIに楽譜を描かせればいいのに。MIDI情報だけで完璧に描けるようになるんじゃね。シンコーミュージックファンなので、シンコーの楽譜で学習した奴がいいな。シンコーミュージックに潜入してどうやって描画してるのか見てみたいくらいだよ。入社したいわー。1年くらいかな。コピー譜つくる才能が無くて放り出されそうだけど。編集作業の一員くらいならやれるでしょ。コピする人の下で働くみたいなね。そんな奴いらんか。しかも1年とかなめたこといってるやつ採用するわけねぇな。シンコーミュージックは好きなんだけどな。間違ってますねコレとか偉そうにギター弾きながらコピしているひとにグサグサいってみたりね。すぐ解雇だな。どんだけシンコー好きやねんって感じだね。


 2小節目は8分音符四つを繰り返すので、notesMeasure92_part1とpart2を作ってますね。全く同じだから、notesMeasure92_part1.concat(notesMeasure92_part1);で繰り返せないのかな。だめか無限ループみたいになるわな。手前でコピーだから const notesMeasure92_part2 = notesMeasure92_part1;ってすれば、省略できんのかもな。やってみるか。はい。ダメでしたー。意味わからん。できそうなのにできない。なんか違うんだな。8分音符を4つのやつどうしを繋ぐときは、const notesMeasure92 = notesMeasure92_part1.concat(notesMeasure92_part2); とします。これは前までにやった 4つのNotesを繋ぐときに使ったときと同じことです。自動でやる方法なら notesMeasure92_part1 とか2つ作らず1つに8音まとめてから、const beam9 = Beam.generateBeams(notesMeasure92)とかだな。そんな感じで2小節は足し算が必要になるという地味な方法でした。横には4小節くらいを描くのがせいぜいなので普通はそれほど複雑にはならないでしょうね。ページとか縦という概念を覚えないといけないのでしょう。ページは描画領域を分けるのでしょう。タブレット端末とかを楽譜にして演奏する目的なら横に8小節くらいとかで、縦にふやしていく感じのパート譜を作れば便利そうだね。改行部分を柔軟に設定するのはできないな。柔軟にしようとしたら、これまたJavaScriptで自力で制御するんでしょう。そこまでやれる人いたら、使いこなしが凄そうだな。

 

VexFlow 使い方へ戻る。