「VexFlow 拍子記号」の版間の差分
(→概要) |
(→概要) |
||
106行目: | 106行目: | ||
</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> | |||
[[VexFlow 使い方]]に戻る。 | [[VexFlow 使い方]]に戻る。 |
2023年2月6日 (月) 23:55時点における版
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拍子や、一小節ごとに拍子が変わるというものまであります。複雑な拍子のものは、総じて変拍子と呼ばれます。
と、いくつか拍子について触れましたが、いろんなことを考える前にまずは拍子記号を書くだけのことに集中してみましょう。
<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>
上記のように一般的な拍子記号が描けます。
下記のように特殊なモノを示します。分子が+で結合されたものは加算型拍子といって、一小節が 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>
VexFlow 使い方に戻る。