「VexFlow 休符」の版間の差分

提供:yonewiki
(ページの作成:「<yjavascript></script> <script src="https://wiki.yo-net.jp/vexflow/build/cjs/vexflow.js"></script> <script> </yjavascript> VexFlow 使い方に戻る。 == '''概要''' ==  音を止めている部分がリズムを構成します。休みの長さは音符のdurationに相当します。VexFlowでは duration に r をつけるだけです。連符の中に現れる休符の方が難しいと思いますが、それについては連符の後に紹介した…」)
 
 
(同じ利用者による、間の19版が非表示)
11行目: 11行目:
== '''休符の種類''' ==
== '''休符の種類''' ==
 全休符から16分休符までを使ってみたいと思います。以下のようになります。
 全休符から16分休符までを使ってみたいと思います。以下のようになります。
<div id="yonet202302_Output01"></div>
<yjavascript></script>
<script>
(function(){
  const {
    Factory,
    Stave,
    StaveNote,
    GhostNote,
    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 GhostNote({ duration: "2" }),
    new StaveNote({ keys: ["d/5"], duration: "wr" }),
  ];
  Formatter.FormatAndDraw(ctx, stave1, notes1);
  const stave2 = new Stave(360, 50, 350).setContext(ctx).draw();
  const notes2 = [
    new GhostNote({ duration: "4" }),
    new StaveNote({ keys: ["b/4"], duration: "hr" }),
    new StaveNote({ keys: ["d/4", "f/4", "a/4"], duration: "4" })
    .addModifier(new Accidental('#'), 2),
    new StaveNote({ keys: ["b/4"], duration: "4r" }),
  ];
  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: ["b/4"], duration: "8r" }),
    new StaveNote({ keys: ["d/4"], duration: "8" }),
  ];
  const notes3_2_0 = [
    new StaveNote({ keys: ["b/4"], duration: "16r" }),
  ];
  const notes3_2 = [
    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: ["b/4"], duration: "16r" }),
    new StaveNote({ keys: ["a/4"], duration: "16" }),
  ];
  const notes3 = notes3_1.concat(notes3_2_0).concat(notes3_2).concat(notes3_3).concat(notes3_4);
  const beams3 = [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">
<div id="yonet202302_Output01"></div>
<script>
(function(){
  const {
    Factory,
    Stave,
    StaveNote,
    GhostNote,
    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 GhostNote({ duration: "2" }),
    new StaveNote({ keys: ["d/5"], duration: "wr" }),
  ];
  Formatter.FormatAndDraw(ctx, stave1, notes1);
  const stave2 = new Stave(360, 50, 350).setContext(ctx).draw();
  const notes2 = [
    new GhostNote({ duration: "4" }),
    new StaveNote({ keys: ["b/4"], duration: "hr" }),
    new StaveNote({ keys: ["d/4", "f/4", "a/4"], duration: "4" })
    .addModifier(new Accidental('#'), 2),
    new StaveNote({ keys: ["b/4"], duration: "4r" }),
  ];
  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: ["b/4"], duration: "8r" }),
    new StaveNote({ keys: ["d/4"], duration: "8" }),
  ];
  const notes3_2_0 = [
    new StaveNote({ keys: ["b/4"], duration: "16r" }),
  ];
  const notes3_2 = [
    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: ["b/4"], duration: "16r" }),
    new StaveNote({ keys: ["a/4"], duration: "16" }),
  ];
  const notes3 = notes3_1.concat(notes3_2_0).concat(notes3_2).concat(notes3_3).concat(notes3_4);
  const beams3 = [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());
})();
</script>
</syntaxhighlight>
 休符はdurationに r をつけるだけです。注意したいのは、休符に対してシャープやフラットやナチュラルのような臨時記号を付けようとするとプログラムが停止します。あと、連桁の間ならば、r をつけたものを足すだけですが、連桁の先頭や最後尾の場合、連桁の中に入らないように別グループの音符にしなければなりません。


 
 


[[VexFlow 使い方]]に戻る。
[[VexFlow 使い方]]に戻る。

2023年2月11日 (土) 00:02時点における最新版

VexFlow 使い方に戻る。

概要

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

 

休符の種類

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



<div id="yonet202302_Output01"></div>
<script>
(function(){
  const {
    Factory,
    Stave,
    StaveNote,
    GhostNote,
    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 GhostNote({ duration: "2" }),
    new StaveNote({ keys: ["d/5"], duration: "wr" }),
  ];
  Formatter.FormatAndDraw(ctx, stave1, notes1);

  const stave2 = new Stave(360, 50, 350).setContext(ctx).draw();
  const notes2 = [
    new GhostNote({ duration: "4" }),
    new StaveNote({ keys: ["b/4"], duration: "hr" }), 
    new StaveNote({ keys: ["d/4", "f/4", "a/4"], duration: "4" })
    .addModifier(new Accidental('#'), 2), 
    new StaveNote({ keys: ["b/4"], duration: "4r" }),
  ];
  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: ["b/4"], duration: "8r" }), 
    new StaveNote({ keys: ["d/4"], duration: "8" }), 
  ];
  const notes3_2_0 = [ 
    new StaveNote({ keys: ["b/4"], duration: "16r" }),
  ]; 
  const notes3_2 = [
    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: ["b/4"], duration: "16r" }), 
    new StaveNote({ keys: ["a/4"], duration: "16" }), 
  ];

  const notes3 = notes3_1.concat(notes3_2_0).concat(notes3_2).concat(notes3_3).concat(notes3_4);

  const beams3 = [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());

})();
</script>

 休符はdurationに r をつけるだけです。注意したいのは、休符に対してシャープやフラットやナチュラルのような臨時記号を付けようとするとプログラムが停止します。あと、連桁の間ならば、r をつけたものを足すだけですが、連桁の先頭や最後尾の場合、連桁の中に入らないように別グループの音符にしなければなりません。

 

VexFlow 使い方に戻る。