「VexFlow 拍子記号」の版間の差分

提供:yonewiki
 
(同じ利用者による、間の6版が非表示)
16行目: 16行目:
 と、いくつか拍子について触れましたが、いろんなことを考える前にまずは拍子記号を書くだけのことに集中してみましょう。
 と、いくつか拍子について触れましたが、いろんなことを考える前にまずは拍子記号を書くだけのことに集中してみましょう。


<div id="yonet202302_Output01"></div>
<yjavascript></script>
<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();
})();
</yjavascript>




<syntaxhighlight lang="JavaScript" line start="1">
<script src="https://wiki.yo-net.jp/vexflow/build/cjs/vexflow.js"></script>
<div id="yonet202302_Output01"></div>
<div id="yonet202302_Output01"></div>
<yjavascript></script>
<script>
<script>
(function(){
(function(){
41行目: 65行目:
   stave3.addClef("treble").setContext(ctx).draw();
   stave3.addClef("treble").setContext(ctx).draw();
   stave3.addTimeSignature('5/8').setContext(ctx).draw();
   stave3.addTimeSignature('5/8').setContext(ctx).draw();
})();
</script>
</syntaxhighlight>
 上記のように一般的な拍子記号が描けます。注目するべきは、13、17、21行目のaddTimeSignature関数です。引数に C を付与すると 4分の4拍子を意味する C の記号。引数に C| を付与すると、 2分の2拍子を意味する C に縦棒が入った記号が表示され、分数のアラビア数字を与えるとそのまま表示されます。
 下記のように特殊なモノを示します。分子が+で結合されたものは加算型拍子といって、一小節が 2+3+2 つまり8分音符7拍で構成される小節をあえて細分化して記載するものです。次に分数同士を+で結合したものは交互拍子といって、8分の6拍子と4分の3拍子が一小節ごとに交互になるような指定です。最後は分数をーで結合した入れ替え可能な拍子です。指定した区間でどちらになってもいいという指定です。小節を構成する音符によってどちらかを把握する構造です。
<div id="yonet202302_Output02"></div>
<yjavascript></script>
<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();
})();
})();
</yjavascript>
</yjavascript>


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


 
 


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

2023年2月10日 (金) 19:03時点における最新版

VexFlow 使い方に戻る。

概要

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


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


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


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


<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 を付与すると 4分の4拍子を意味する C の記号。引数に C| を付与すると、 2分の2拍子を意味する 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 使い方に戻る。