VexFlow 拍子記号

VexFlow 使い方に戻る。

概要

　拍子記号は音部記号の横、もしくは小節の先頭に指定の拍子が始まる最初の1小節目だけに記述するものです。Ｃのマークを記述すると４分の４拍子。Ｃに縦線を記載したものを書くと、２分の２拍子。そのほかの拍子は分数を直接表記します。ちなみに４分の４拍子は一小節が、４分音符４つの拍子となるリズム構造です。マーチ・行進曲や一般的な曲は４分の４拍子か２分の２拍子とするのが一般的で、少し変わったものになるとワルツのような４分の３拍子となるリズム構造が存在します。

　ワルツをもう少し刻んだような拍子として８分の６拍子という拍子も使われます。ワルツの一拍を２つにわったようなリズムと１拍を３分割するのを２つで構成する１拍３連系のリズムになるものもあります。後者の方が多いと思います。３連系のリズムを１：２や２：１にするようなスイングと呼ばれるリズムもあります。

　リズムなんてそんなに複雑なモノは、おかしな人しか使わないし、変な曲で無理してるだけの使い方だろうと思ってしまいますが、複雑な拍子での名曲はあります。８分の５拍子や、一小節ごとに拍子が変わるというものまであります。複雑な拍子のものは、総じて変拍子と呼ばれます。

　と、いくつか拍子について触れましたが、いろんなことを考える前にまずは拍子記号を書くだけのことに集中してみましょう。

<script src="https://wiki.yo-net.jp/vexflow/build/cjs/vexflow.js"></script>
<div id="yonet202302_Output01"></div>
<script>
(function(){
  const {
    Factory,
    Stave,
  } = Vex.Flow;

  const f = new Factory({ renderer: { elementId: 'yonet202302_Output01', width: 1500, height: 195 } });
  const ctx = f.getContext();
  const stave1 = new Stave(10, 50, 200).setContext(ctx).draw();
  stave1.addClef("treble").setContext(ctx).draw();
  stave1.addTimeSignature('C').setContext(ctx).draw();

  const stave2 = new Stave(230, 50, 200).setContext(ctx).draw();
  stave2.addClef("treble").setContext(ctx).draw();
  stave2.addTimeSignature('C|').setContext(ctx).draw();

  const stave3 = new Stave(450, 50, 200).setContext(ctx).draw();
  stave3.addClef("treble").setContext(ctx).draw();
  stave3.addTimeSignature('5/8').setContext(ctx).draw();
})();
</script>

　上記のように一般的な拍子記号が描けます。注目するべきは、13、17、21行目のaddTimeSignature関数です。引数に C を付与すると ４分の４拍子を意味する C の記号。引数に C| を付与すると、 ２分の２拍子を意味する C に縦棒が入った記号が表示され、分数のアラビア数字を与えるとそのまま表示されます。

　下記のように特殊なモノを示します。分子が＋で結合されたものは加算型拍子といって、一小節が 2+3+2 つまり8分音符7拍で構成される小節をあえて細分化して記載するものです。次に分数同士を＋で結合したものは交互拍子といって、8分の6拍子と4分の3拍子が一小節ごとに交互になるような指定です。最後は分数をーで結合した入れ替え可能な拍子です。指定した区間でどちらになってもいいという指定です。小節を構成する音符によってどちらかを把握する構造です。

<div id="yonet202302_Output02"></div>
<script>
(function(){
  const {
    Factory,
    Stave,
  } = Vex.Flow;

  const f = new Factory({ renderer: { elementId: 'yonet202302_Output02', width: 1500, height: 195 } });
  const ctx = f.getContext();
  const stave1 = new Stave(10, 50, 200).setContext(ctx).draw();
  stave1.addClef("treble").setContext(ctx).draw();
  stave1.addTimeSignature('2+3+2/8').setContext(ctx).draw();

  const stave2 = new Stave(230, 50, 200).setContext(ctx).draw();
  stave2.addClef("treble").setContext(ctx).draw();
  stave2.addTimeSignature('6/8').setContext(ctx).draw();
  stave2.addTimeSignature('+').setContext(ctx).draw();
  stave2.addTimeSignature('3/4').setContext(ctx).draw();

  const stave3 = new Stave(450, 50, 200).setContext(ctx).draw();
  stave3.addClef("treble").setContext(ctx).draw();
  stave3.addTimeSignature('3/4').setContext(ctx).draw();
  stave3.addTimeSignature('-').setContext(ctx).draw();
  stave3.addTimeSignature('2/4').setContext(ctx).draw();
})();
</script>

　左から、加算型拍子、交互拍子、入れ替え可能な拍子の表記になります。加算型は引数に 2+3+2 のように全てを記述すればよく、交互拍子の場合は3つのaddTimeSignatureを使って、6/8、＋、3/4 のようにひとつづつ指定します。入れ替え可能な拍子も交互拍子と同じやり方で 真ん中で ーを引数に付与します。

　

VexFlow 使い方に戻る。