「VexFlow スラー」の版間の差分

提供:yonewiki
10行目: 10行目:


== '''タイ''' ==
== '''タイ''' ==
<div id="yonet202403Mid_Output01"></div>
<div id="Output"></div>
<yjavascript></script>
<yjavascript></script>
<script>
<script>
(function(){
(function(){
      // VexFlowの初期化
const {
      const VF = Vex.Flow;
  Factory,
  Stave,
  StaveNote,
  Formatter,
  Voice,
  StaveTie,
} = Vex.Flow;


      // 描画コンテキストの設定
const f = new Factory({ renderer: { elementId: 'Output', width: 1500, height: 195 } });
      const div = document.getElementById("yonet202403Mid_Output01");
const ctx = f.getContext();
      const renderer = new VF.Renderer(div, VF.Renderer.Backends.SVG);
      const context = renderer.getContext();


      // 楽譜オブジェクトの作成
// 小節をまたぐパターン
      const stave = new VF.Stave(10, 40, 500);
const stave1 = new Stave(10, 50, 350).setContext(ctx).draw();
stave1.addClef("treble").setContext(ctx).draw();
stave1.addTimeSignature('4/4').setContext(ctx).draw();


      // ボイスの作成
const notes1 = [
      const voice = new VF.Voice({ num_beats: 4, beat_value: 4 });
  new StaveNote({ keys: ["d/5"], duration: "q" }),
  new StaveNote({ keys: ["e/5"], duration: "q" }),
  new StaveNote({ keys: ["f/5"], duration: "q" }),
  new StaveNote({ keys: ["g/5"], duration: "q" }),
];


      // ノートの作成 (小節をまたぐ場合)
Formatter.FormatAndDraw(ctx, stave1, notes1);
      const notes1 = [
        new VF.StaveNote({
          keys: ["C/4", "E/4", "G/4"],
          duration: "q",
          auto_stem: true,
        }),
        new VF.StaveNote({
          keys: ["C/5", "E/5", "G/5"],
          duration: "q",
          auto_stem: true,
        }),
      ];


      // ノートの作成 (小節をまたがない場合)
const tie1 = new StaveTie({
      const notes2 = [
  first_note: notes1[1],
        new VF.StaveNote({
  last_note: notes1[2],
          keys: ["B/4", "D/4", "F/4"],
  first_indices: [0],
          duration: "h",
  last_indices: [0],
          auto_stem: true,
});
        }),
        new VF.StaveNote({
          keys: ["A/4", "C/5", "E/5"],
          duration: "h",
          auto_stem: true,
        }),
      ];


      // スラーの作成 (小節をまたぐ場合)
const tie2 = new StaveTie({
      const slur1 = new VF.StaveTie({
  first_note: notes1[2],
        first_note: notes1[0],
  last_note: notes1[3],
        last_note: notes1[1],
  first_indices: [0],
        first_indices: [0],
  last_indices: [0],
        last_indices: [0],
});
      });


      // スラーの作成 (小節をまたがない場合)
tie1.setContext(ctx).draw();
      const slur2 = new VF.StaveTie({
tie2.setContext(ctx).draw();
        first_note: notes2[0],
        last_note: notes2[1],
        first_indices: [0],
        last_indices: [0],
      });


      // ボイスにノートを追加
// 小節をまたがないパターン
      voice.addTickables(notes1);
const stave2 = new Stave(10, 150, 350).setContext(ctx).draw();
      voice.addTickables(notes2);
stave2.addClef("treble").setContext(ctx).draw();
stave2.addTimeSignature('4/4').setContext(ctx).draw();


      // 楽譜にボイスを追加
const notes2 = [
      stave.addClef("treble").addTimeSignature("4/4");
  new StaveNote({ keys: ["d/5"], duration: "q" }),
      stave.draw(context);
  new StaveNote({ keys: ["e/5"], duration: "q" }),
      voice.draw(context, stave);
  new StaveNote({ keys: ["f/5"], duration: "q" }),
      slur1.setContext(context).draw();
  new StaveNote({ keys: ["g/5"], duration: "q" }),
      slur2.setContext(context).draw();
];
 
Formatter.FormatAndDraw(ctx, stave2, notes2);
 
const tie3 = new StaveTie({
  first_note: notes2[1],
  last_note: notes2[2],
  first_indices: [0],
  last_indices: [0],
});
 
const tie4 = new StaveTie({
  first_note: notes2[2],
  last_note: notes2[3],
  first_indices: [0],
  last_indices: [0],
});
 
tie3.setContext(ctx).draw();
tie4.setContext(ctx).draw();
})();
})();
</yjavascript>
</yjavascript>

2024年3月9日 (土) 23:59時点における版

VexFlow 使い方に戻る。

概要

 タイは同じ高さの音同士を区切らずに演奏する奏法に使います。

 

タイ

 コードは以下のとおりです。

<div id="yonet202303Mid_Output01"></div>
<script>
(function(){
const {
  Factory,
  Stave,
  StaveNote,
  Formatter,
  Voice,
  StaveTie,
} = Vex.Flow;

const f = new Factory({ renderer: { elementId: 'Output', width: 1500, height: 195 } });
const ctx = f.getContext();

// 小節をまたぐパターン
const stave1 = new Stave(10, 50, 350).setContext(ctx).draw();
stave1.addClef("treble").setContext(ctx).draw();
stave1.addTimeSignature('4/4').setContext(ctx).draw();

const notes1 = [
  new StaveNote({ keys: ["d/5"], duration: "q" }),
  new StaveNote({ keys: ["e/5"], duration: "q" }),
  new StaveNote({ keys: ["f/5"], duration: "q" }),
  new StaveNote({ keys: ["g/5"], duration: "q" }),
];

Formatter.FormatAndDraw(ctx, stave1, notes1);

const tie1 = new StaveTie({
  first_note: notes1[1],
  last_note: notes1[2],
  first_indices: [0],
  last_indices: [0],
});

const tie2 = new StaveTie({
  first_note: notes1[2],
  last_note: notes1[3],
  first_indices: [0],
  last_indices: [0],
});

tie1.setContext(ctx).draw();
tie2.setContext(ctx).draw();

// 小節をまたがないパターン
const stave2 = new Stave(10, 150, 350).setContext(ctx).draw();
stave2.addClef("treble").setContext(ctx).draw();
stave2.addTimeSignature('4/4').setContext(ctx).draw();

const notes2 = [
  new StaveNote({ keys: ["d/5"], duration: "q" }),
  new StaveNote({ keys: ["e/5"], duration: "q" }),
  new StaveNote({ keys: ["f/5"], duration: "q" }),
  new StaveNote({ keys: ["g/5"], duration: "q" }),
];

Formatter.FormatAndDraw(ctx, stave2, notes2);

const tie3 = new StaveTie({
  first_note: notes2[1],
  last_note: notes2[2],
  first_indices: [0],
  last_indices: [0],
});

const tie4 = new StaveTie({
  first_note: notes2[2],
  last_note: notes2[3],
  first_indices: [0],
  last_indices: [0],
});

tie3.setContext(ctx).draw();
tie4.setContext(ctx).draw();

})();
</script>


 StaveTie というオブジェクトを利用します。


 配列で [new StaveTie({オブジェクト}), …] という構造のものを用意し、配列を代入した変数を作ります。


 const Ties1 = [new StaveTie({オブジェクト}), new StaveTie({オブジェクト})]; のような形式です。オブジェクトには以下のようなキーと値を設定します。


  • first_note: タイの始まりの音符を設定します。例:notes1[2]
  • last_note: タイの終わりの音符を設定します。例:notes1[3]
  • first_indices: タイの始まりの音符の和音の番号を設定します。和音になっていない場合は配列番号 0 を指定します。例:[0]
  • last_indices: タイの終わりの音符の和音の番号を設定します。和音になっていない場合は配列番号 0 を指定します。例:[0]


 

VexFlow 使い方に戻る。