「VexFlow ベースヘ音記号練習」の版間の差分

@@ 14行目: / 14行目: @@
      Factory,
      Stave,
+    StaveNote,
+    Voice,
+    Formatter,
+    BarlineType,
+    Accidental
    } = Vex.Flow;
    const f = new Factory({ renderer: { elementId: 'yonet202507Early_Output01', width: 1500, height: 600 } });
    const ctx = f.getContext();
-   const stave1 = new Stave(10, 50, 1000).setContext(ctx).draw();
+   const stave1 = new Stave(10, 50, 1000);
-   stave1.addClef("bass").setContext(ctx).draw();
+  stave1.addClef("bass");
+  stave1.setEndBarType(BarlineType.END);
+  stave1.setContext(ctx).draw();
+   const notes1 = [
+    new StaveNote({ keys: ["a/3"], duration: "4" }),
+    new StaveNote({ keys: ["a/3"], duration: "4" }).addModifier(new Accidental('#')),
+    new StaveNote({ keys: ["b/3"], duration: "4" }),
+    new StaveNote({ keys: ["b/3"], duration: "4" }).addModifier(new Accidental('#')),
+    new StaveNote({ keys: ["c/4"], duration: "4" }),
+    new StaveNote({ keys: ["d/4"], duration: "4" }),
+    new StaveNote({ keys: ["d/4"], duration: "4" }).addModifier(new Accidental('#')),
+    new StaveNote({ keys: ["e/4"], duration: "4" }),
+    new StaveNote({ keys: ["e/4"], duration: "4" }).addModifier(new Accidental('#')),
+    new StaveNote({ keys: ["f/4"], duration: "4" }),
+    new StaveNote({ keys: ["f/4"], duration: "4" }).addModifier(new Accidental('#')),
+    new StaveNote({ keys: ["g/4"], duration: "4" }),
+  ];
+  notes1.forEach((StaveNote) => StaveNote.setStave(stave1));
+  const voice1 = new Voice({beat_value: 4, num_beats: 12}).setMode(3).addTickables(notes1);
+  new Formatter().joinVoices([voice1]).formatToStave([voice1], stave1);
+  stave1.setContext(ctx).draw();
+  voice1.setContext(ctx).draw();
 })();
 </script>
 <script></yjavascript>

2025年7月3日 (木) 14:13時点における最新版