「VexFlow 休符」の版間の差分

2023年2月10日 (金) 23:13時点における版

概要

　音を止めている部分がリズムを構成します。休みの長さは音符のdurationに相当します。VexFlowでは duration に r をつけるだけです。連符の中に現れる休符の方が難しいと思いますが、それについては連符の後に紹介したいと思います。全休符や２分休符では配置がきになるので、GhostNoteという仕組みを使おうと思います。GhostNoteという仕組みを使わない場合は、配置が左寄りになって少し気持ち悪いです。

休符の種類

　全休符から１６分休符までを使ってみたいと思います。以下のようになります。

VexFlow 使い方に戻る。

@@ 11行目: / 11行目: @@
 == '''休符の種類''' ==
 　全休符から１６分休符までを使ってみたいと思います。以下のようになります。
+<div id="yonet202302_Output01"></div>
+<yjavascript></script>
+<script>
+(function(){
+  const {
+    Factory,
+    Stave,
+    StaveNote,
+    Formatter,
+    Voice,
+    Barline,
+    Accidental,
+    Beam,
+  } = Vex.Flow;
+  const f = new Factory({ renderer: { elementId: 'yonet202302_Output01', width: 1500, height: 195 } });
+  const ctx = f.getContext();
+  const stave1 = new Stave(10, 50, 350).setContext(ctx).draw();
+  stave1.addClef("treble").setContext(ctx).draw();
+  stave1.addTimeSignature('C').setContext(ctx).draw();
+  const notes1 = [
+    new StaveNote({ keys: ["c/4"], duration: "1r" })
+    .addModifier(new Accidental('b'), 1),
+  ];
+  Formatter.FormatAndDraw(ctx, stave1, notes1);
+  const stave2 = new Stave(360, 50, 350).setContext(ctx).draw();
+  const notes2 = [
+    new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "2" })
+    .addModifier(new Accidental('n'), 1),
+    new StaveNote({ keys: ["d/4", "f/4", "a/4"], duration: "4" })
+    .addModifier(new Accidental('#'), 2),
+    new StaveNote({ keys: ["e/4", "g/4", "b/4"], duration: "4" })
+    .addModifier(new Accidental('##'), 2),
+  ];
+  Formatter.FormatAndDraw(ctx, stave2, notes2);
+  const stave3 = new Stave(710, 50, 450).setEndBarType(Barline.type.REPEAT_END).setContext(ctx).draw();
+  const notes3_1 = [
+    new StaveNote({ keys: ["c/4"], duration: "8" }),
+    new StaveNote({ keys: ["d/4"], duration: "8" }),
+  ];
+  const notes3_2 = [
+    new StaveNote({ keys: ["e/4"], duration: "16" }),
+    new StaveNote({ keys: ["f/4"], duration: "16" }),
+    new StaveNote({ keys: ["g/4"], duration: "16" }),
+    new StaveNote({ keys: ["a/4"], duration: "16" }),
+  ];
+  const notes3_3 = [
+    new StaveNote({ keys: ["c/4"], duration: "8" }),
+    new StaveNote({ keys: ["d/4"], duration: "8" }),
+  ];
+  const notes3_4 = [
+    new StaveNote({ keys: ["e/4"], duration: "16" }),
+    new StaveNote({ keys: ["f/4"], duration: "16" }),
+    new StaveNote({ keys: ["g/4"], duration: "16" }),
+    new StaveNote({ keys: ["a/4"], duration: "16" }),
+  ];
+  const notes3 = notes3_1.concat(notes3_2).concat(notes3_3).concat(notes3_4);
+  const beams3 = [new Beam(notes3_1), new Beam(notes3_2), new Beam(notes3_3), new Beam(notes3_4)];
+  stave3.setContext(ctx).draw();
+  notes3.forEach((StaveNote) => StaveNote.setStave(stave3));
+  const voice3 = new Voice({beat_value: 4, num_beats: 4}).setMode(3).addTickables(notes3);
+  new Formatter().joinVoices([voice3]).formatToStave([voice3], stave3);
+  voice3.setContext(ctx).draw();
+  beams3.forEach((beam) => beam.setContext(ctx).draw());
+})();
+</yjavascript>
+<syntaxhighlight lang="JavaScript" line start="1">
 [[VexFlow 使い方]]に戻る。