「VexFlow 演奏順序記号」の版間の差分
(→演奏順序記号) |
(→演奏順序記号) |
||
(同じ利用者による、間の25版が非表示) | |||
7行目: | 7行目: | ||
演奏順序記号の描き方について説明します。 | 演奏順序記号の描き方について説明します。 | ||
セーニョやコーダを記すためにsetRepetitionTypeという関数のためのリピート系の設定として以下があります。 | |||
<table style="border: 0; border-collapse: collapse;"> | <table style="border: 0; border-collapse: collapse;"> | ||
14行目: | 16行目: | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td> | <td>Repetition.type.SEGNO_LEFT</td> | ||
<td> | <td>小節の左にセーニョマーク</td> | ||
</tr> | |||
<tr style="background-color: #cccccc;"> | |||
<td>Repetition.type.SEGNO_RIGHT</td> | |||
<td>小節の右にセーニョマーク</td> | |||
</tr> | |||
<tr> | |||
<td>Repetition.type.CODA_LEFT</td> | |||
<td>小節の左にコーダマーク</td> | |||
</tr> | </tr> | ||
<tr style="background-color: #cccccc;"> | <tr style="background-color: #cccccc;"> | ||
<td> | <td>Repetition.type.CODA_RIGHT</td> | ||
<td> | <td>小節の右にコーダマーク</td> | ||
</tr> | |||
<tr> | |||
<td>Repetition.type.DC</td> | |||
<td>小節の右上にダカーポマーク</td> | |||
</tr> | |||
<tr style="background-color: #cccccc;"> | |||
<td>Repetition.type.DS</td> | |||
<td>小節の右上にダルセーニョマーク</td> | |||
</tr> | |||
<tr> | |||
<td>Repetition.type.DS_AL_CODA</td> | |||
<td>小節の右上にダルセーニョ時のコーダマーク</td> | |||
</tr> | |||
<tr style="background-color: #cccccc;"> | |||
<td>Repetition.type.DS_AL_FINE</td> | |||
<td>小節の右下にダルセーニョ時のフィーネマーク</td> | |||
</tr> | |||
<tr> | |||
<td>Repetition.type.DC_AL_CODA</td> | |||
<td>小節の右上にダカーポ時のコーダマーク</td> | |||
</tr> | |||
<tr style="background-color: #cccccc;"> | |||
<td>Repetition.type.DC_AL_FINE</td> | |||
<td>小節の右上にダカーポ時のフィーネマーク</td> | |||
</tr> | |||
<tr> | |||
<td>Repetition.type.FINE</td> | |||
<td>小節の右上にフィーネマーク</td> | |||
</tr> | |||
<tr style="background-color: #cccccc;"> | |||
<td>Repetition.type.NONE</td> | |||
<td>小節にマーク無し</td> | |||
</tr> | |||
</table> | |||
演奏順序を演奏回数ごとに制御するsetVoltaTypeという関数のための演奏回数記号の設定として以下があります。 | |||
<table style="border: 0; border-collapse: collapse;"> | |||
<tr border="0" style="color: white; background-color:#666666; font-weight: bolder;"> | |||
<td>コード</td> | |||
<td>表示内容</td> | |||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td> | <td>Volta.type.BEGIN</td> | ||
<td> | <td>カッコのはじまり</td> | ||
</tr> | </tr> | ||
<tr style="background-color: #cccccc;"> | <tr style="background-color: #cccccc;"> | ||
<td> | <td>Volta.type.MID</td> | ||
<td> | <td>カッコの継続</td> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td> | <td>Volta.type.END</td> | ||
<td> | <td>カッコの終わり</td> | ||
</tr> | </tr> | ||
<tr style="background-color: #cccccc;"> | <tr style="background-color: #cccccc;"> | ||
<td> | <td>Volta.type.BEGIN_END</td> | ||
<td> | <td>カッコの始まりであり終了である小節</td> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td> | <td>Volta.type.NONE</td> | ||
<td> | <td>カッコの表示なし</td> | ||
</tr> | </tr> | ||
</table> | </table> | ||
60行目: | 112行目: | ||
BarLine, | BarLine, | ||
Repetition, | Repetition, | ||
Volta, | |||
Renderer | Renderer | ||
} = Vex.Flow; | } = Vex.Flow; | ||
65行目: | 118行目: | ||
let nscale = 0.68 | let nscale = 0.68 | ||
let nwidth = 1040; | let nwidth = 1040; | ||
let nheight = | let nheight = 420; | ||
let nHeadMargin = 70; | let nHeadMargin = 70; | ||
151行目: | 204行目: | ||
const stave2 = new Stave(stave1.width + stave1.x, stave1.y, nStaveWidth).setContext(ctx); | const stave2 = new Stave(stave1.width + stave1.x, stave1.y, nStaveWidth).setContext(ctx); | ||
stave2.setEndBarType(VF.Barline.type. | stave2.setEndBarType(VF.Barline.type.REPEAT_END); | ||
stave2.setVoltaType(VF.Volta.type.BEGIN, "1.", 10); | |||
stave2.draw(); | stave2.draw(); | ||
const stave3 = new Stave(stave2.width + stave2.x, stave1.y, nStaveWidth).setContext(ctx); | const stave3 = new Stave(stave2.width + stave2.x, stave1.y, nStaveWidth/2).setContext(ctx); | ||
stave3.setVoltaType(VF.Volta.type.BEGIN, "2.", 10); | |||
stave3.draw(); | stave3.draw(); | ||
const stave4 = new Stave(stave3.width + stave3.x, stave1.y, nStaveWidth).setContext(ctx); | const stave4 = new Stave(stave3.width + stave3.x, stave1.y, nStaveWidth/2).setContext(ctx); | ||
stave4. | stave4.setVoltaType(VF.Volta.type.MID, "", 10); | ||
stave4.draw(); | stave4.draw(); | ||
const stave5 = new Stave(stave1.x, stave1.y + | const stave5 = new Stave(stave4.width + stave4.x, stave1.y, nStaveWidth/2).setContext(ctx); | ||
stave5.setVoltaType(VF.Volta.type.MID, "", 10); | |||
stave5.draw(); | |||
const stave6 = new Stave(stave5.width + stave5.x, stave1.y, nStaveWidth/2).setContext(ctx); | |||
stave6.setVoltaType(VF.Volta.type.END, "", 10); | |||
stave6.setEndBarType(VF.Barline.type.REPEAT_END); | |||
stave6.draw(); | |||
const stave7 = new Stave(stave1.x, stave1.y + 200, nHeadMargin + nStaveWidth).setContext(ctx); | |||
stave7.addClef("treble").setContext(ctx); | |||
stave7.addTimeSignature('4/4').setContext(ctx); | |||
stave7.setVoltaType(VF.Volta.type.BEGIN_END, "3.", 10); | |||
stave7.setEndBarType(VF.Barline.type.SINGLE);//規定値(省略可能) | |||
stave7.draw(); | |||
const | const notes7 = [ | ||
new StaveNote({ keys: ["a/4"], duration: "q" }), | new StaveNote({ keys: ["a/4"], duration: "q" }), | ||
new StaveNote({ keys: ["b/4"], duration: "q" }), | new StaveNote({ keys: ["b/4"], duration: "q" }), | ||
179行目: | 245行目: | ||
]; | ]; | ||
Formatter.FormatAndDraw(ctx, | Formatter.FormatAndDraw(ctx, stave7, notes7); | ||
const tie3 = new StaveTie({ | const tie3 = new StaveTie({ | ||
first_note: | first_note: notes7[1], | ||
last_note: | last_note: notes7[2], | ||
first_indices: [0], | first_indices: [0], | ||
last_indices: [0], | last_indices: [0], | ||
189行目: | 255行目: | ||
const tie4 = new StaveTie({ | const tie4 = new StaveTie({ | ||
first_note: | first_note: notes7[2], | ||
last_note: | last_note: notes7[3], | ||
first_indices: [0], | first_indices: [0], | ||
last_indices: [0], | last_indices: [0], | ||
198行目: | 264行目: | ||
tie4.setContext(ctx).draw(); | tie4.setContext(ctx).draw(); | ||
const | const stave8 = new Stave(stave7.width + stave7.x, stave7.y, nStaveWidth).setContext(ctx); | ||
stave8.setEndBarType(VF.Barline.type.DOUBLE); | |||
stave8.draw(); | |||
const | const notes8 = [ | ||
new StaveNote({ keys: ["e/5"], duration: "q" }), | new StaveNote({ keys: ["e/5"], duration: "q" }), | ||
new StaveNote({ keys: ["f/5"], duration: "q" }), | new StaveNote({ keys: ["f/5"], duration: "q" }), | ||
210行目: | 276行目: | ||
]; | ]; | ||
Formatter.FormatAndDraw(ctx, | Formatter.FormatAndDraw(ctx, stave8, notes8); | ||
const tie5 = new StaveTie({ | const tie5 = new StaveTie({ | ||
first_note: | first_note: notes7[3], | ||
last_note: | last_note: notes8[0], | ||
first_indices: [0], | first_indices: [0], | ||
last_indices: [0], | last_indices: [0], | ||
222行目: | 288行目: | ||
const | const stave9 = new Stave(stave8.width + stave8.x, stave7.y, nStaveWidth).setContext(ctx); | ||
stave9.setRepetitionType(VF.Repetition.type.SEGNO_LEFT, 30); | |||
stave9.setRepetitionType(VF.Repetition.type.CODA_RIGHT, 10); | |||
stave9.draw(); | |||
const | const stave10 = new Stave(stave9.width + stave9.x, stave7.y, nStaveWidth).setContext(ctx); | ||
stave10.setRepetitionType(VF.Repetition.type.DS, 100); | |||
stave10.setEndBarType(VF.Barline.type.END); | |||
stave10.draw(); | |||
ctx.setFillStyle('#F5F5F5'); | ctx.setFillStyle('#F5F5F5'); | ||
244行目: | 313行目: | ||
<syntaxhighlight lang="javascript" line start="1"> | <syntaxhighlight lang="javascript" line start="1"> | ||
<div id="yonet202403Mid_Output01"></div> | <div id="yonet202403Mid_Output01"></div> | ||
<script> | <script> | ||
256行目: | 326行目: | ||
StaveTie, | StaveTie, | ||
BarLine, | BarLine, | ||
Repetition, | |||
Volta, | |||
Renderer | Renderer | ||
} = Vex.Flow; | } = Vex.Flow; | ||
261行目: | 333行目: | ||
let nscale = 0.68 | let nscale = 0.68 | ||
let nwidth = 1040; | let nwidth = 1040; | ||
let nheight = | let nheight = 420; | ||
let nHeadMargin = 70; | let nHeadMargin = 70; | ||
347行目: | 419行目: | ||
const stave2 = new Stave(stave1.width + stave1.x, stave1.y, nStaveWidth).setContext(ctx); | const stave2 = new Stave(stave1.width + stave1.x, stave1.y, nStaveWidth).setContext(ctx); | ||
stave2.setEndBarType(VF.Barline.type. | stave2.setEndBarType(VF.Barline.type.REPEAT_END); | ||
stave2.setVoltaType(VF.Volta.type.BEGIN, "1.", 10); | |||
stave2.draw(); | stave2.draw(); | ||
const stave3 = new Stave(stave2.width + stave2.x, stave1.y, nStaveWidth).setContext(ctx); | const stave3 = new Stave(stave2.width + stave2.x, stave1.y, nStaveWidth/2).setContext(ctx); | ||
stave3. | stave3.setVoltaType(VF.Volta.type.BEGIN, "2.", 10); | ||
stave3.draw(); | stave3.draw(); | ||
const stave4 = new Stave(stave3.width + stave3.x, stave1.y, nStaveWidth).setContext(ctx); | const stave4 = new Stave(stave3.width + stave3.x, stave1.y, nStaveWidth/2).setContext(ctx); | ||
stave4. | stave4.setVoltaType(VF.Volta.type.MID, "", 10); | ||
stave4.draw(); | stave4.draw(); | ||
const stave5 = new Stave( | const stave5 = new Stave(stave4.width + stave4.x, stave1.y, nStaveWidth/2).setContext(ctx); | ||
stave5. | stave5.setVoltaType(VF.Volta.type.MID, "", 10); | ||
stave5. | stave5.draw(); | ||
const stave6 = new Stave(stave5.width + stave5.x, stave1.y, nStaveWidth/2).setContext(ctx); | |||
stave6.setVoltaType(VF.Volta.type.END, "", 10); | |||
stave6.setEndBarType(VF.Barline.type.REPEAT_END); | |||
stave6.draw(); | |||
const | const stave7 = new Stave(stave1.x, stave1.y + 200, nHeadMargin + nStaveWidth).setContext(ctx); | ||
stave7.addClef("treble").setContext(ctx); | |||
stave7.addTimeSignature('4/4').setContext(ctx); | |||
stave7.setVoltaType(VF.Volta.type.BEGIN_END, "3.", 10); | |||
stave7.setEndBarType(VF.Barline.type.SINGLE);//規定値(省略可能) | |||
stave7.draw(); | |||
const notes7 = [ | |||
new StaveNote({ keys: ["a/4"], duration: "q" }), | new StaveNote({ keys: ["a/4"], duration: "q" }), | ||
new StaveNote({ keys: ["b/4"], duration: "q" }), | new StaveNote({ keys: ["b/4"], duration: "q" }), | ||
376行目: | 460行目: | ||
]; | ]; | ||
Formatter.FormatAndDraw(ctx, | Formatter.FormatAndDraw(ctx, stave7, notes7); | ||
const tie3 = new StaveTie({ | const tie3 = new StaveTie({ | ||
first_note: | first_note: notes7[1], | ||
last_note: | last_note: notes7[2], | ||
first_indices: [0], | first_indices: [0], | ||
last_indices: [0], | last_indices: [0], | ||
386行目: | 470行目: | ||
const tie4 = new StaveTie({ | const tie4 = new StaveTie({ | ||
first_note: | first_note: notes7[2], | ||
last_note: | last_note: notes7[3], | ||
first_indices: [0], | first_indices: [0], | ||
last_indices: [0], | last_indices: [0], | ||
395行目: | 479行目: | ||
tie4.setContext(ctx).draw(); | tie4.setContext(ctx).draw(); | ||
const | const stave8 = new Stave(stave7.width + stave7.x, stave7.y, nStaveWidth).setContext(ctx); | ||
stave8.setEndBarType(VF.Barline.type.DOUBLE); | |||
stave8.draw(); | |||
const | const notes8 = [ | ||
new StaveNote({ keys: ["e/5"], duration: "q" }), | new StaveNote({ keys: ["e/5"], duration: "q" }), | ||
new StaveNote({ keys: ["f/5"], duration: "q" }), | new StaveNote({ keys: ["f/5"], duration: "q" }), | ||
407行目: | 491行目: | ||
]; | ]; | ||
Formatter.FormatAndDraw(ctx, | Formatter.FormatAndDraw(ctx, stave8, notes8); | ||
const tie5 = new StaveTie({ | const tie5 = new StaveTie({ | ||
first_note: | first_note: notes7[3], | ||
last_note: | last_note: notes8[0], | ||
first_indices: [0], | first_indices: [0], | ||
last_indices: [0], | last_indices: [0], | ||
419行目: | 503行目: | ||
const | const stave9 = new Stave(stave8.width + stave8.x, stave7.y, nStaveWidth).setContext(ctx); | ||
stave9.setRepetitionType(VF.Repetition.type.SEGNO_LEFT, 30); | |||
stave9.setRepetitionType(VF.Repetition.type.CODA_RIGHT, 10); | |||
stave9.draw(); | |||
const | const stave10 = new Stave(stave9.width + stave9.x, stave7.y, nStaveWidth).setContext(ctx); | ||
stave10.setRepetitionType(VF.Repetition.type.DS, 100); | |||
stave10.setEndBarType(VF.Barline.type.END); | |||
stave10.draw(); | |||
ctx.setFillStyle('#F5F5F5'); | ctx.setFillStyle('#F5F5F5'); | ||
440行目: | 527行目: | ||
VFというオブジェクトをvar VF = Vex. | VFというオブジェクトをvar VF = Vex.Flowと定義しておくと、RepetitionやVoltaのようなオブジェクト定数を保持しているものにアクセスできるようになります。VF.RepetitionやVF.Voltaのように使います。VexFlow公式のExamplesでもそのように設定されていました。いきなりRepetition.type.DSのように使おうとしても未定義になるようです。冷たいな。 | ||
あと、コーダマーク大き過ぎる問題やコーダ1とかセーニョ1とか番号がつけられないのは痛い。かゆいところに手が届かないVexFlow大丈夫かコレ。Voltaはまぁ使えるレベル。Repetitionは違う方法を考えてみようかな。でも、それは最後に考えてみよう。先ずは一通りのVexFlowの実力を見極めてからだな。 | |||
あと、本家のサンプルにはsetRepetitionTypeLeftとかsetRepetitionTypeRightって言う関数が使われているけど、配布されてるVexFlowにはそんな関数ないのが気になる。それとVoltaも隣り合う小節同士でEndとStartが重なっても、線自体は本家だと離れるけど、配布されているものだと、くっついて重なってどっちがどっちの線かわからなくなる。ふむー。 | |||
[[VexFlow 使い方]]に戻る。 | [[VexFlow 使い方]]に戻る。 |
2024年3月12日 (火) 14:28時点における最新版
VexFlow 使い方に戻る。
概要
演奏順序記号の描き方について説明します。
セーニョやコーダを記すためにsetRepetitionTypeという関数のためのリピート系の設定として以下があります。
コード | 表示内容 |
Repetition.type.SEGNO_LEFT | 小節の左にセーニョマーク |
Repetition.type.SEGNO_RIGHT | 小節の右にセーニョマーク |
Repetition.type.CODA_LEFT | 小節の左にコーダマーク |
Repetition.type.CODA_RIGHT | 小節の右にコーダマーク |
Repetition.type.DC | 小節の右上にダカーポマーク |
Repetition.type.DS | 小節の右上にダルセーニョマーク |
Repetition.type.DS_AL_CODA | 小節の右上にダルセーニョ時のコーダマーク |
Repetition.type.DS_AL_FINE | 小節の右下にダルセーニョ時のフィーネマーク |
Repetition.type.DC_AL_CODA | 小節の右上にダカーポ時のコーダマーク |
Repetition.type.DC_AL_FINE | 小節の右上にダカーポ時のフィーネマーク |
Repetition.type.FINE | 小節の右上にフィーネマーク |
Repetition.type.NONE | 小節にマーク無し |
演奏順序を演奏回数ごとに制御するsetVoltaTypeという関数のための演奏回数記号の設定として以下があります。
コード | 表示内容 |
Volta.type.BEGIN | カッコのはじまり |
Volta.type.MID | カッコの継続 |
Volta.type.END | カッコの終わり |
Volta.type.BEGIN_END | カッコの始まりであり終了である小節 |
Volta.type.NONE | カッコの表示なし |
演奏順序記号
コードは以下のとおりです。
<div id="yonet202403Mid_Output01"></div>
<script>
var VF = Vex.Flow;
(function(){
const {
Factory,
Stave,
StaveNote,
Formatter,
Voice,
StaveTie,
BarLine,
Repetition,
Volta,
Renderer
} = Vex.Flow;
let nscale = 0.68
let nwidth = 1040;
let nheight = 420;
let nHeadMargin = 70;
let nStaveWidth = 350;
const f = new Factory({
renderer: { elementId: 'yonet202403Mid_Output01', width: nwidth, height: nheight * nscale }
});
const ctx = f.getContext();
ctx.scale(nscale, nscale);
const defaultStyle = {
lineWidth: ctx.lineWidth,
strokeStyle: ctx.strokeStyle,
};
for (let i = 0; i <= nwidth * (1 / nscale); i += 10) {
ctx.beginPath();
ctx.moveTo(0 + i, 0);
ctx.lineTo(0 + i, nheight);
if (i % 100 === 0){
ctx.setLineWidth(1);
ctx.setStrokeStyle('rgba(200, 200, 200, 0.8)');
}
else{
ctx.setLineWidth(0.5);
ctx.setStrokeStyle('rgba(230, 230, 230, 0.8)');
}
ctx.stroke();
}
for (let i = 0; i <= nheight; i += 10) {
ctx.beginPath();
ctx.moveTo(0, i);
ctx.lineTo(nwidth * (1 / nscale), i);
if (i % 100 === 0){
ctx.setLineWidth(1);
ctx.setStrokeStyle('rgba(200, 200, 200, 0.8)');
}
else{
ctx.setLineWidth(0.5);
ctx.setStrokeStyle('rgba(230, 230, 230, 0.8)');
}
ctx.stroke();
}
ctx.lineWidth = defaultStyle.lineWidth;
ctx.strokeStyle = defaultStyle.strokeStyle;
const stave1 = new Stave(10, 50, nHeadMargin + nStaveWidth).setContext(ctx);
stave1.setClef("treble").setContext(ctx);
stave1.setTimeSignature('4/4').setContext(ctx);
//stave1.setBegBarType(4);//BarLine.type.REPEAT_BEGIN
stave1.setBegBarType(VF.Barline.type.REPEAT_BEGIN);//BarLine.type.REPEAT_BEGIN
stave1.draw();
//SINGLE:1, DOUBLE:2, END:3, REPEAT_BEGIN:4, REPEAT_END:5, REPEAT_BOTH:6, NONE:7
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(stave1.width + stave1.x, stave1.y, nStaveWidth).setContext(ctx);
stave2.setEndBarType(VF.Barline.type.REPEAT_END);
stave2.setVoltaType(VF.Volta.type.BEGIN, "1.", 10);
stave2.draw();
const stave3 = new Stave(stave2.width + stave2.x, stave1.y, nStaveWidth/2).setContext(ctx);
stave3.setVoltaType(VF.Volta.type.BEGIN, "2.", 10);
stave3.draw();
const stave4 = new Stave(stave3.width + stave3.x, stave1.y, nStaveWidth/2).setContext(ctx);
stave4.setVoltaType(VF.Volta.type.MID, "", 10);
stave4.draw();
const stave5 = new Stave(stave4.width + stave4.x, stave1.y, nStaveWidth/2).setContext(ctx);
stave5.setVoltaType(VF.Volta.type.MID, "", 10);
stave5.draw();
const stave6 = new Stave(stave5.width + stave5.x, stave1.y, nStaveWidth/2).setContext(ctx);
stave6.setVoltaType(VF.Volta.type.END, "", 10);
stave6.setEndBarType(VF.Barline.type.REPEAT_END);
stave6.draw();
const stave7 = new Stave(stave1.x, stave1.y + 200, nHeadMargin + nStaveWidth).setContext(ctx);
stave7.addClef("treble").setContext(ctx);
stave7.addTimeSignature('4/4').setContext(ctx);
stave7.setVoltaType(VF.Volta.type.BEGIN_END, "3.", 10);
stave7.setEndBarType(VF.Barline.type.SINGLE);//規定値(省略可能)
stave7.draw();
const notes7 = [
new StaveNote({ keys: ["a/4"], duration: "q" }),
new StaveNote({ keys: ["b/4"], duration: "q" }),
new StaveNote({ keys: ["c/5"], duration: "q" }),
new StaveNote({ keys: ["d/5"], duration: "q" }),
];
Formatter.FormatAndDraw(ctx, stave7, notes7);
const tie3 = new StaveTie({
first_note: notes7[1],
last_note: notes7[2],
first_indices: [0],
last_indices: [0],
});
const tie4 = new StaveTie({
first_note: notes7[2],
last_note: notes7[3],
first_indices: [0],
last_indices: [0],
});
tie3.setContext(ctx).draw();
tie4.setContext(ctx).draw();
const stave8 = new Stave(stave7.width + stave7.x, stave7.y, nStaveWidth).setContext(ctx);
stave8.setEndBarType(VF.Barline.type.DOUBLE);
stave8.draw();
const notes8 = [
new StaveNote({ keys: ["e/5"], duration: "q" }),
new StaveNote({ keys: ["f/5"], duration: "q" }),
new StaveNote({ keys: ["g/5"], duration: "q" }),
new StaveNote({ keys: ["a/5"], duration: "q" }),
];
Formatter.FormatAndDraw(ctx, stave8, notes8);
const tie5 = new StaveTie({
first_note: notes7[3],
last_note: notes8[0],
first_indices: [0],
last_indices: [0],
});
tie5.setContext(ctx).draw();
const stave9 = new Stave(stave8.width + stave8.x, stave7.y, nStaveWidth).setContext(ctx);
stave9.setRepetitionType(VF.Repetition.type.SEGNO_LEFT, 30);
stave9.setRepetitionType(VF.Repetition.type.CODA_RIGHT, 10);
stave9.draw();
const stave10 = new Stave(stave9.width + stave9.x, stave7.y, nStaveWidth).setContext(ctx);
stave10.setRepetitionType(VF.Repetition.type.DS, 100);
stave10.setEndBarType(VF.Barline.type.END);
stave10.draw();
ctx.setFillStyle('#F5F5F5');
ctx.fillRect(0, 0, f.width, f.height);
})();
const svgElement = document.querySelector('#Output svg');
svgElement.style.backgroundColor = '#F5F5F5';
const svgNS = 'http://www.w3.org/2000/svg';
const lineColor = '#EEEEEE';
</script>
VFというオブジェクトをvar VF = Vex.Flowと定義しておくと、RepetitionやVoltaのようなオブジェクト定数を保持しているものにアクセスできるようになります。VF.RepetitionやVF.Voltaのように使います。VexFlow公式のExamplesでもそのように設定されていました。いきなりRepetition.type.DSのように使おうとしても未定義になるようです。冷たいな。
あと、コーダマーク大き過ぎる問題やコーダ1とかセーニョ1とか番号がつけられないのは痛い。かゆいところに手が届かないVexFlow大丈夫かコレ。Voltaはまぁ使えるレベル。Repetitionは違う方法を考えてみようかな。でも、それは最後に考えてみよう。先ずは一通りのVexFlowの実力を見極めてからだな。
あと、本家のサンプルにはsetRepetitionTypeLeftとかsetRepetitionTypeRightって言う関数が使われているけど、配布されてるVexFlowにはそんな関数ないのが気になる。それとVoltaも隣り合う小節同士でEndとStartが重なっても、線自体は本家だと離れるけど、配布されているものだと、くっついて重なってどっちがどっちの線かわからなくなる。ふむー。
VexFlow 使い方に戻る。