VexFlow 音符

VexFlow 使い方に戻る。

概要

　音符を記述するまでにその土台となる楽譜の構造を知らなければならなかったので、遅くなりましたが、ようやっと本文をえがけるようになるという感じです。ただし、音符も構成要素は複雑なので、ここではシンプルな音符の機能のみを紹介したいと思います。旗同士を繋ぐ連桁(れんこう：英 Beem ビーム)、連符や休符については別の項目で記します。この先の3つあたりまで把握できてやっと音を記録する楽譜というものが構成できるようになります。あと３つ先までは音符の範疇。ここでは、その一部しか紹介しないことに注意しておいて下さい。

　

音符の種類

　小節において何拍分を鳴らすかの違いで音符の種類が異なります。まずは、種類について見てみましょう。

<div id="yonet202302_Output01"></div>
<script>
(function(){
  const {
    Factory,
    Stave,
    StaveNote,
    Formatter,
    Voice,
    Barline,
  } = 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: "1" }), 
  ];
  Formatter.FormatAndDraw(ctx, stave1, notes1);

  const stave2 = new Stave(360, 50, 350).setContext(ctx).draw();
  const notes2 = [
    new StaveNote({ keys: ["c/4"], duration: "2" }), 
    new StaveNote({ keys: ["d/4"], duration: "4" }), 
    new StaveNote({ keys: ["e/4"], duration: "4" }), 
  ];
  Formatter.FormatAndDraw(ctx, stave2, notes2);

  const stave3 = new Stave(710, 50, 450).setEndBarType(Barline.type.END).setContext(ctx).draw();
  const notes3 = [
    new StaveNote({ keys: ["c/4"], duration: "8" }), 
    new StaveNote({ keys: ["d/4"], duration: "8" }), 
    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" }), 
    new StaveNote({ keys: ["c/4"], duration: "8" }), 
    new StaveNote({ keys: ["d/4"], duration: "8" }), 
    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" }), 
  ];
  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);
  stave3.setContext(ctx).draw();
  voice3.setContext(ctx).draw();

})();
</script>

　行19～21までが一小節目の音符について記述しているところです。自分で作った定数変数note1に一小節分の音符情報を配列にして記述します。StaveNoteオブジェクトをコンストラクタに引数を渡してものが一つの音符となるようにして、づづけて記載していきますが、ここでは全音符を指定したので、一小節にはこの情報だけになります。これ以上の配列追加をすると、一小節の情報に矛盾が発生し始めます。このように、一小節にわたされる要素数と一小節を構築する音の長さの総和が

　

VexFlow 使い方に戻る。