VexFlow 音部記号

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>

　

VexFlow 使い方に戻る。