「VexFlow 音部記号」の版間の差分
(→応用) |
(→応用) |
||
166行目: | 166行目: | ||
</script> | </script> | ||
</syntaxhighlight> | </syntaxhighlight> | ||
addClefの引数は、3つまで指定できて、 | |||
*第一引数は音符記号の種類を指定します。 選択肢はひとつ前の表を参照。 | |||
*第二引数は記号の大きさが指定できます。 default or small | |||
*第三引数は記号の上下に8をつけるか指定できます。 8va 上 or 8vb 下 | |||
== '''応用2''' == | |||
音符を描くのと同じ仕組みの中に音部記号を指定することができます。音符に対しての音部記号を与えると、その音部記号に従った音の高さに音符が描画されます。音符の中に描く音部記号と組み合わせて使うとよいかもしれません。そのような臨時の音部記号はまれにクラシックの楽曲では登場します。作曲者は手を使わないための発想が豊かで頭が良いかもしれない。 | |||
<div id="yonet202302_Output02"></div> | |||
<yjavascript></script> | |||
<script> | |||
(function(){ | |||
const { | |||
Factory, | |||
Stave, | |||
StaveNote, | |||
Formatter, | |||
Renderer, | |||
Stem, | |||
} = 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", "default", "8va").setContext(ctx).draw(); | |||
const notesBar1 = [ | |||
f.StaveNote({ keys: ['c/4'], duration: '4', stem_direction: 1}), | |||
f.ClefNote({ type: 'bass', options: { size: 'small' } }), | |||
f.StaveNote({ keys: ['c/4'], duration: '4', stem_direction: 1, clef: 'bass'}), | |||
f.StaveNote({ keys: ['e/4'], duration: '4', stem_direction: 1 }), | |||
f.StaveNote({ keys: ['f/4'], duration: '4', stem_direction: 1 }), | |||
]; | |||
//Formatter.FormatAndDraw(ctx, stave1, notesBar1); | |||
const voice = f.Voice({ time: '4/4' }).addTickables(notesBar1); | |||
f.Formatter().joinVoices([voice]).formatToStave([voice], stave1); | |||
f.draw(); | |||
})(); | |||
</yjavascript> | |||
[[VexFlow 使い方]]に戻る。 | [[VexFlow 使い方]]に戻る。 |
2023年2月3日 (金) 23:18時点における版
VexFlow 使い方に戻る。
概要
音部記号はト音記号、ヘ音記号、ハ音記号があります。ト音記号は丸と縦棒の交差するところが、ト音です。イ=Ra、ロ=Si、ハ=Do、ニ=Re、ホ=Mi、ヘ=Fa、ト=So。つまり 「ソ」 だね。へ音記号は、:の間に挟まった線の上ががヘ音。つまり「ファ」です。ト音記号に比べて線一つ分低い音が主体になります。ハ音記号はチェロ、ビオラ、コントラバスとかでよく使われる記号で、上下対象の真ん中にあたる部分がハ音。つまり、「ド」です。
ト音記号は通常、下から二本目が交差するポイントに配置されます。へ音記号は下から四本目が:の上下の点で挟むように配置します。くるっと丸めてるところの上とも言えます。ハ音、下から三本目が中央になるように配置します。しかし、ハ音は特に上下をずらして使うことも多いです。アルトとかテナーとかソプラノとかねいろいろあります。ト音もヘ音もずらしていいです。滅多にみかけませんけど。
なんで、こんなことになってるのかは知りません。長い曲を作ってるクラシックの大御所なんかは、臨時の五線譜を上や下に足すのが嫌でうまれた手法なのかなとは思います。演奏する側は楽器を持ちかえることがあるとしたら、やりにくいかもしれません。ピアノの低いところはヘ音記号。そのほかは大体ト音記号が使われるので、ヘ音記号はちょっと特殊で、ハ音記号はかなり特殊な感じで認識されていると思います。これをでは、それぞれを描いてみましょう。
<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();
const stave2 = new Stave(230, 50, 200).setContext(ctx).draw();
stave2.addClef("bass").setContext(ctx).draw();
const stave3 = new Stave(450, 50, 200).setContext(ctx).draw();
stave3.addClef("alto").setContext(ctx).draw();
})();
</script>
stave1が左(ト音記号を表示)、stave2が真ん中(ヘ音記号を表示)、stave3が右(ハ音記号を表示)の楽譜に相当します。それぞれト音記号は12行目、ヘ音記号15行目、ハ音記号は18行目が対応します。
小節を生成した変数のメンバ関数の.addClef("")という関数が機能していて、その関数の返却値に対して、Staveを描画したときと同じように.setContext()や.draw()が指示されています。.addclefの引数に指定できる値は以下のようになっています。VexFlow入門でも示したモノです。
シーケンス | 意味 |
treble | ト音記号 𝄞 |
bass | ヘ音記号 𝄢 |
alto | ハ音記号(アルト) 𝄡 |
percussion | 打楽器記号 |
tenor | ハ音記号(テナー) 𝄡一つ上にシフト |
soprano | ハ音記号(ソプラノ) 𝄡二つ下にシフト |
mezzo-soprano | ハ音記号(メゾソプラノ) 𝄡一つ下にシフト |
baritone-c | ハ音記号(バリトン) 𝄡二つ上にシフト |
baritone-f | ヘ音記号(バリトン) 𝄢一つ下にシフト |
subbass | ヘ音記号(サブバス) 𝄢一つ上にシフト |
french | ト音記号(フレンチ) 𝄞一つ下にシフト |
応用
あまりみかけない表記ですが、オクターブ上下の音部記号というのもありまして、以下のように指定します。
<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", "default", "8va").setContext(ctx).draw();
const stave2 = new Stave(230, 50, 200).setContext(ctx).draw();
stave2.addClef("bass", "default", "8vb").setContext(ctx).draw();
const stave3 = new Stave(450, 50, 200).setContext(ctx).draw();
stave3.addClef("alto", "small").setContext(ctx).draw();
})();
</script>
addClefの引数は、3つまで指定できて、
- 第一引数は音符記号の種類を指定します。 選択肢はひとつ前の表を参照。
- 第二引数は記号の大きさが指定できます。 default or small
- 第三引数は記号の上下に8をつけるか指定できます。 8va 上 or 8vb 下
応用2
音符を描くのと同じ仕組みの中に音部記号を指定することができます。音符に対しての音部記号を与えると、その音部記号に従った音の高さに音符が描画されます。音符の中に描く音部記号と組み合わせて使うとよいかもしれません。そのような臨時の音部記号はまれにクラシックの楽曲では登場します。作曲者は手を使わないための発想が豊かで頭が良いかもしれない。
VexFlow 使い方に戻る。