「VexFlow アクセント・テヌート・スタッカート」の版間の差分
(→概要) |
|||
(同じ利用者による、間の12版が非表示) | |||
5行目: | 5行目: | ||
[[VexFlow 使い方]]に戻る。 | [[VexFlow 使い方]]に戻る。 | ||
== '''概要''' == | == '''概要''' == | ||
これは入門やら、連桁の記事でも使ったので、説明記事つくるのも楽だわ~と思いながら書き始めました。アクセント・テヌート・スタッカートに加えて、スタッカーティッシモなるものやアップストロークダウンストローク。ピッチカートやレフトハンドピッチカートがあるらしい。タブ譜ならレフトハンドの↓とかもいるんだろうけど、そこまでは無いみたい。フェルマータもこの記事で扱います。マルカートははっきりとかの意味を持つアーティキュレーションの総称です。で>やvの逆の記号とかを使います。いろんな意味が入り乱れた記号かなと思います。 | |||
16行目: | 16行目: | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td></td> | <td>a.</td> | ||
<td></td> | <td>ドット、アクセント</td> | ||
</tr> | </tr> | ||
<tr style="background-color: #cccccc;"> | <tr style="background-color: #cccccc;"> | ||
<td></td> | <td>av</td> | ||
<td></td> | <td>縦長シングルクォートみたいな、スタッカーティッシモ</td> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td></td> | <td>a></td> | ||
<td></td> | <td>> 記号、アクセント、マルカートの一種、反対向きは無いです。</td> | ||
</tr> | </tr> | ||
<tr style="background-color: #cccccc;"> | <tr style="background-color: #cccccc;"> | ||
<td></td> | <td>a^</td> | ||
<td></td> | <td>^ 記号、山型アクセント、マルカートの一種</td> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td></td> | <td>a-</td> | ||
<td></td> | <td>- 記号、テヌート、はっきり伸ばす。<br />普段から意識しろってことだけど</td> | ||
</tr> | </tr> | ||
<tr style="background-color: #cccccc;"> | <tr style="background-color: #cccccc;"> | ||
<td></td> | <td>a+</td> | ||
<td></td> | <td>+ 記号、レフトハンドピッチカート。<br />バイオリンの奏法。左手で弦を弾く。</td> | ||
</tr> | </tr> | ||
<tr> | <tr> | ||
<td></td> | <td>ao</td> | ||
<td></td> | <td>oの上に側に|の記号。スナップピッチカート。<br />バルトークピチカートとも。マルカート。<br />垂直に弾いて指版に弦を当てる奏法だそうです。</td> | ||
</tr> | </tr> | ||
<tr style="background-color: #cccccc;"> | <tr style="background-color: #cccccc;"> | ||
<td></td> | <td>a|</td> | ||
<td></td> | <td>V みたいな記号。Downストロークの意味</td> | ||
</tr> | |||
<tr> | |||
<td>am</td> | |||
<td>下開きのコみたいな記号。Upストロークの意味</td> | |||
</tr> | |||
<tr style="background-color: #cccccc;"> | |||
<td>a@a</td> | |||
<td>フェルマータの下開き</td> | |||
</tr> | |||
<tr> | |||
<td>a@u</td> | |||
<td>フェルマータの上開き</td> | |||
</tr> | </tr> | ||
</table> | </table> | ||
169行目: | 181行目: | ||
notes1[5].addModifier(new VF.Articulation('a+').setPosition(3)); | notes1[5].addModifier(new VF.Articulation('a+').setPosition(3)); | ||
notes1[6].addModifier(new VF.Articulation('ao').setPosition(3)); | notes1[6].addModifier(new VF.Articulation('ao').setPosition(3)); | ||
notes1[7].addModifier(new VF.Articulation('a | notes1[7].addModifier(new VF.Articulation('a|').setPosition(3)); | ||
Formatter.FormatAndDraw(ctx, stave1, notes1); | Formatter.FormatAndDraw(ctx, stave1, notes1); | ||
181行目: | 193行目: | ||
// stave2に対する音符の作成と描画 | // stave2に対する音符の作成と描画 | ||
var note2_1 = new Vex.Flow.StaveNote({ keys: [" | var note2_1 = new Vex.Flow.StaveNote({ keys: ["F/4"], duration: "8" }); | ||
var note2_2 = new Vex.Flow.StaveNote({ keys: ["D/4"], duration: " | var note2_2 = new Vex.Flow.StaveNote({ keys: ["C/5"], duration: "8", stem_direction: -1 }); | ||
var | var note2_3 = new Vex.Flow.StaveNote({ keys: ["D/4"], duration: "8" }); | ||
var | var note2_4 = new Vex.Flow.StaveNote({ keys: ["C/4"], duration: "8" }); | ||
var note2_5 = new Vex.Flow.StaveNote({ keys: ["G/4"], duration: "8" }); | |||
var note2_6 = new Vex.Flow.StaveNote({ keys: ["F/4"], duration: "8" }); | |||
var note2_7 = new Vex.Flow.StaveNote({ keys: ["G/4"], duration: "8" }); | |||
var note2_8 = new Vex.Flow.StaveNote({ keys: ["F/4"], duration: "8" }); | |||
note2_1.addModifier(new VF.Articulation('am').setPosition(4)); | |||
note2_2.addModifier(new VF.Articulation('a@a').setPosition(3)); | |||
note2_3.addModifier(new VF.Articulation('a@u').setPosition(4)); | |||
note2_4.addModifier(new VF.Articulation('a-').setPosition(4)); | |||
note2_4.addModifier(new VF.Articulation('a.').setPosition(4)); | |||
var stave2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 }); | var stave2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 }); | ||
stave2Voice.addTickables([note2_1, note2_2, note2_3, note2_4]); | stave2Voice.addTickables([note2_1, note2_2, note2_3, note2_4, note2_5, note2_6, note2_7, note2_8]); | ||
//stave2Voice.setStave(stave2); | //stave2Voice.setStave(stave2); | ||
427行目: | 450行目: | ||
RenderContext, | RenderContext, | ||
TextDynamics, | TextDynamics, | ||
Articulation, | |||
Renderer | Renderer | ||
} = Vex.Flow; | } = Vex.Flow; | ||
497行目: | 521行目: | ||
const notes1 = [ | const notes1 = [ | ||
new StaveNote({ keys: ["d/5"], duration: " | new StaveNote({ keys: ["d/5"], duration: "8", stem_direction: -1 }), | ||
new StaveNote({ keys: ["e/5"], duration: " | new StaveNote({ keys: ["e/5"], duration: "8", stem_direction: -1 }), | ||
new StaveNote({ keys: ["f/5"], duration: " | new StaveNote({ keys: ["f/5"], duration: "8", stem_direction: -1 }), | ||
new StaveNote({ keys: ["g/5"], duration: " | new StaveNote({ keys: ["g/5"], duration: "8", stem_direction: -1 }), | ||
new StaveNote({ keys: ["a/5"], duration: "8", stem_direction: -1 }), | |||
new StaveNote({ keys: ["b/5"], duration: "8", stem_direction: -1 }), | |||
new StaveNote({ keys: ["c/6"], duration: "8", stem_direction: -1 }), | |||
new StaveNote({ keys: ["d/6"], duration: "8", stem_direction: -1 }), | |||
]; | ]; | ||
//ここで各ノートに指定したアーティキュレーションを追加 | |||
notes1[0].addModifier(new VF.Articulation('a.').setPosition(3)); | |||
notes1[1].addModifier(new VF.Articulation('av').setPosition(3)); | |||
notes1[2].addModifier(new VF.Articulation('a>').setPosition(3)); | |||
notes1[3].addModifier(new VF.Articulation('a^').setPosition(3)); | |||
notes1[4].addModifier(new VF.Articulation('a-').setPosition(3)); | |||
notes1[5].addModifier(new VF.Articulation('a+').setPosition(3)); | |||
notes1[6].addModifier(new VF.Articulation('ao').setPosition(3)); | |||
notes1[7].addModifier(new VF.Articulation('a|').setPosition(3)); | |||
Formatter.FormatAndDraw(ctx, stave1, notes1); | Formatter.FormatAndDraw(ctx, stave1, notes1); | ||
var stave2 = new Vex.Flow.Stave(stave1.width + stave1.x, stave1.y, nStaveWidth); | var stave2 = new Vex.Flow.Stave(stave1.width + stave1.x, stave1.y, nStaveWidth); | ||
var stave1002 = new Vex.Flow.Stave(stave1.width + stave1.x, stave1.y + 120, 0); | var stave1002 = new Vex.Flow.Stave(stave1.width + stave1.x, stave1.y + 120, 0); | ||
stave2.setEndBarType(VF.Barline.type.REPEAT_BOTH); | stave2.setEndBarType(VF.Barline.type.REPEAT_BOTH); | ||
stave2.setMeasure(2); | stave2.setMeasure(2); | ||
533行目: | 549行目: | ||
stave2.setContext(ctx).draw(); | stave2.setContext(ctx).draw(); | ||
var note2_1 = new Vex.Flow.StaveNote({ keys: [" | var note2_1 = new Vex.Flow.StaveNote({ keys: ["F/4"], duration: "8" }); | ||
var note2_2 = new Vex.Flow.StaveNote({ keys: ["D/4"], duration: " | var note2_2 = new Vex.Flow.StaveNote({ keys: ["C/5"], duration: "8", stem_direction: -1 }); | ||
var | var note2_3 = new Vex.Flow.StaveNote({ keys: ["D/4"], duration: "8" }); | ||
var | var note2_4 = new Vex.Flow.StaveNote({ keys: ["C/4"], duration: "8" }); | ||
var note2_5 = new Vex.Flow.StaveNote({ keys: ["B/3"], duration: "8" }); | |||
var note2_6 = new Vex.Flow.StaveNote({ keys: ["A/3"], duration: "8" }); | |||
var note2_7 = new Vex.Flow.StaveNote({ keys: ["G/3"], duration: "8" }); | |||
var note2_8 = new Vex.Flow.StaveNote({ keys: ["F/3"], duration: "8" }); | |||
//ここで各ノートに指定したアーティキュレーションを追加 | |||
note2_1.addModifier(new VF.Articulation('am').setPosition(4)); | |||
note2_2.addModifier(new VF.Articulation('a@a').setPosition(3)); | |||
note2_3.addModifier(new VF.Articulation('a@u').setPosition(4)); | |||
var stave2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 }); | var stave2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 }); | ||
stave2Voice.addTickables([note2_1, note2_2, note2_3, note2_4]); | stave2Voice.addTickables([note2_1, note2_2, note2_3, note2_4, note2_5, note2_6, note2_7, note2_8]); | ||
var formatter2 = new Vex.Flow.Formatter().joinVoices([stave2Voice]);//.format([stave2Voice], nStaveWidth); | var formatter2 = new Vex.Flow.Formatter().joinVoices([stave2Voice]);//.format([stave2Voice], nStaveWidth); | ||
546行目: | 571行目: | ||
stave2Voice.draw(ctx, stave2); | stave2Voice.draw(ctx, stave2); | ||
var Dynamics2_1 = new Vex.Flow.TextDynamics({ text: "sfz", duration: "2" }); | var Dynamics2_1 = new Vex.Flow.TextDynamics({ text: "sfz", duration: "2" }); | ||
var Dynamics2_3 = new Vex.Flow.TextDynamics({ text: "p", duration: "4" }); | var Dynamics2_3 = new Vex.Flow.TextDynamics({ text: "p", duration: "4" }); | ||
var Dynamics2_4 = new Vex.Flow.TextDynamics({ text: "f", duration: "4" }); | var Dynamics2_4 = new Vex.Flow.TextDynamics({ text: "f", duration: "4" }); | ||
var stave2VoiceDynamics = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 }); | var stave2VoiceDynamics = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 }); | ||
stave2VoiceDynamics.addTickables([Dynamics2_1, Dynamics2_3, Dynamics2_4]); | stave2VoiceDynamics.addTickables([Dynamics2_1, Dynamics2_3, Dynamics2_4]); | ||
var Dynamics_formatter2 = new Vex.Flow.Formatter().joinVoices([stave2VoiceDynamics]); | var Dynamics_formatter2 = new Vex.Flow.Formatter().joinVoices([stave2VoiceDynamics]); | ||
Dynamics_formatter2.format([stave2VoiceDynamics], nStaveWidth); | Dynamics_formatter2.format([stave2VoiceDynamics], nStaveWidth); | ||
stave2VoiceDynamics.draw(ctx, stave1002); | stave2VoiceDynamics.draw(ctx, stave1002); | ||
628行目: | 648行目: | ||
const notes6 = [ | const notes6 = [ | ||
new StaveNote({ keys: ["e/5"], duration: "q" }), | new StaveNote({ keys: ["e/5"], duration: "q", stem_direction: -1 }), | ||
new StaveNote({ keys: ["f/5"], duration: "q" }), | new StaveNote({ keys: ["f/5"], duration: "q", stem_direction: -1 }), | ||
new StaveNote({ keys: ["g/5"], duration: "q" }), | new StaveNote({ keys: ["g/5"], duration: "q", stem_direction: -1 }), | ||
new StaveNote({ keys: ["a/5"], duration: "q" }), | new StaveNote({ keys: ["a/5"], duration: "q", stem_direction: -1 }), | ||
]; | ]; | ||
704行目: | 724行目: | ||
newText.setAttribute('fill', 'black'); | newText.setAttribute('fill', 'black'); | ||
newText.textContent = 'TestTitle - subTitle - lyrics: yo-net, music: yo-net'; | newText.textContent = 'TestTitle - subTitle - lyrics: yo-net, music: yo-net'; | ||
svgElement.appendChild(newText); | svgElement.appendChild(newText); | ||
714行目: | 735行目: | ||
newText2.setAttribute('fill', 'black'); | newText2.setAttribute('fill', 'black'); | ||
newText2.textContent = 'Vocal'; | newText2.textContent = 'Vocal'; | ||
var textGroup2 = document.createElementNS('http://www.w3.org/2000/svg', 'g'); | var textGroup2 = document.createElementNS('http://www.w3.org/2000/svg', 'g'); | ||
741行目: | 761行目: | ||
できたね。音符を定義したところに例えば、notes1というオブジェクトにノートの配列を保持している場合は | |||
const notes1 = [ | |||
new StaveNote({ keys: ["d/5"], duration: "8", stem_direction: -1 }), | |||
省略 | |||
new StaveNote({ keys: ["d/6"], duration: "8", stem_direction: -1 }), | |||
]; | |||
に対しては | |||
notes1[0].addModifier(new VF.Articulation('a.').setPosition(3)); | |||
のようにして、addModifier関数を呼び出し、 | |||
var note2_1 = new Vex.Flow.StaveNote({ keys: ["F/4"], duration: "8" }); | |||
のように定義されたノートには | |||
note2_1.addModifier(new VF.Articulation('a.').setPosition(3)); | |||
のように定義して、addModifier関数を呼び出します。 | |||
第一引数:Articurationクラスのコンストラクタと、その下のsetPositionのコンストラクタにも引数を定義します。 | |||
Articurationの | |||
第一引数:冒頭で紹介したコードを付与します。 | |||
setPositionの | |||
第一引数:3なら音符の上なので、通常はノート作成の際 , stem_direction: -1 と定義した音符に3を指定します。4なら音符の下にアーティキュレーションが追加されます。なので stem_direction: 1 か、省略されたノートに対して4を指定します。 | |||
そんなところですね。 | |||
[[VexFlow 使い方]]に戻る。 | [[VexFlow 使い方]]に戻る。 |
2024年3月15日 (金) 20:30時点における最新版
VexFlow 使い方に戻る。
概要
これは入門やら、連桁の記事でも使ったので、説明記事つくるのも楽だわ~と思いながら書き始めました。アクセント・テヌート・スタッカートに加えて、スタッカーティッシモなるものやアップストロークダウンストローク。ピッチカートやレフトハンドピッチカートがあるらしい。タブ譜ならレフトハンドの↓とかもいるんだろうけど、そこまでは無いみたい。フェルマータもこの記事で扱います。マルカートははっきりとかの意味を持つアーティキュレーションの総称です。で>やvの逆の記号とかを使います。いろんな意味が入り乱れた記号かなと思います。
アクセント記号の種類
コード | 表示内容 |
a. | ドット、アクセント |
av | 縦長シングルクォートみたいな、スタッカーティッシモ |
a> | > 記号、アクセント、マルカートの一種、反対向きは無いです。 |
a^ | ^ 記号、山型アクセント、マルカートの一種 |
a- | - 記号、テヌート、はっきり伸ばす。 普段から意識しろってことだけど |
a+ | + 記号、レフトハンドピッチカート。 バイオリンの奏法。左手で弦を弾く。 |
ao | oの上に側に|の記号。スナップピッチカート。 バルトークピチカートとも。マルカート。 垂直に弾いて指版に弦を当てる奏法だそうです。 |
a| | V みたいな記号。Downストロークの意味 |
am | 下開きのコみたいな記号。Upストロークの意味 |
a@a | フェルマータの下開き |
a@u | フェルマータの上開き |
アクセント・テヌート・スタッカート
コードは以下のとおりです。
<div id="yonet202403Mid_Output01"></div>
<script>
class Position {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
var VF = Vex.Flow;
const Instrument1 = new Position(0, 0);
const Instrument2 = new Position(0, 0);
(function(){
const {
Factory,
Stave,
StaveNote,
Formatter,
Voice,
StaveTie,
BarLine,
StaveConnector,
Modifier,
RenderContext,
TextDynamics,
Articulation,
Renderer
} = Vex.Flow;
let nscale = 0.64;
let nwidth = 1040;
let nheight = 720;
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(80, 150, nHeadMargin + nStaveWidth).setContext(ctx);
stave1.setClef("treble").setContext(ctx);
stave1.setTimeSignature('4/4').setContext(ctx);
stave1.setSection("A", 0);
stave1.setMeasure(1);
stave1.setTempo({ duration: "q", dots: 0, bpm: 120 }, 0);
stave1.setBegBarType(VF.Barline.type.REPEAT_BEGIN);//BarLine.type.REPEAT_BEGIN
Instrument1.x = stave1.x - 30;
Instrument1.y = stave1.y + 90;
stave1.draw();
const notes1 = [
new StaveNote({ keys: ["d/5"], duration: "8", stem_direction: -1 }),
new StaveNote({ keys: ["e/5"], duration: "8", stem_direction: -1 }),
new StaveNote({ keys: ["f/5"], duration: "8", stem_direction: -1 }),
new StaveNote({ keys: ["g/5"], duration: "8", stem_direction: -1 }),
new StaveNote({ keys: ["a/5"], duration: "8", stem_direction: -1 }),
new StaveNote({ keys: ["b/5"], duration: "8", stem_direction: -1 }),
new StaveNote({ keys: ["c/6"], duration: "8", stem_direction: -1 }),
new StaveNote({ keys: ["d/6"], duration: "8", stem_direction: -1 }),
];
//ここで各ノートに指定したアーティキュレーションを追加
notes1[0].addModifier(new VF.Articulation('a.').setPosition(3));
notes1[1].addModifier(new VF.Articulation('av').setPosition(3));
notes1[2].addModifier(new VF.Articulation('a>').setPosition(3));
notes1[3].addModifier(new VF.Articulation('a^').setPosition(3));
notes1[4].addModifier(new VF.Articulation('a-').setPosition(3));
notes1[5].addModifier(new VF.Articulation('a+').setPosition(3));
notes1[6].addModifier(new VF.Articulation('ao').setPosition(3));
notes1[7].addModifier(new VF.Articulation('a|').setPosition(3));
Formatter.FormatAndDraw(ctx, stave1, notes1);
var stave2 = new Vex.Flow.Stave(stave1.width + stave1.x, stave1.y, nStaveWidth);
var stave1002 = new Vex.Flow.Stave(stave1.width + stave1.x, stave1.y + 120, 0);
stave2.setEndBarType(VF.Barline.type.REPEAT_BOTH);
stave2.setMeasure(2);
stave2.setTempo({ name: "Andante", note: "8", bpm: 120 }, 0);
stave2.setContext(ctx).draw();
var note2_1 = new Vex.Flow.StaveNote({ keys: ["F/4"], duration: "8" });
var note2_2 = new Vex.Flow.StaveNote({ keys: ["C/5"], duration: "8", stem_direction: -1 });
var note2_3 = new Vex.Flow.StaveNote({ keys: ["D/4"], duration: "8" });
var note2_4 = new Vex.Flow.StaveNote({ keys: ["C/4"], duration: "8" });
var note2_5 = new Vex.Flow.StaveNote({ keys: ["B/3"], duration: "8" });
var note2_6 = new Vex.Flow.StaveNote({ keys: ["A/3"], duration: "8" });
var note2_7 = new Vex.Flow.StaveNote({ keys: ["G/3"], duration: "8" });
var note2_8 = new Vex.Flow.StaveNote({ keys: ["F/3"], duration: "8" });
//ここで各ノートに指定したアーティキュレーションを追加
note2_1.addModifier(new VF.Articulation('am').setPosition(4));
note2_2.addModifier(new VF.Articulation('a@a').setPosition(3));
note2_3.addModifier(new VF.Articulation('a@u').setPosition(4));
var stave2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });
stave2Voice.addTickables([note2_1, note2_2, note2_3, note2_4, note2_5, note2_6, note2_7, note2_8]);
var formatter2 = new Vex.Flow.Formatter().joinVoices([stave2Voice]);//.format([stave2Voice], nStaveWidth);
formatter2.formatToStave([stave2Voice], stave2);
stave2Voice.draw(ctx, stave2);
var Dynamics2_1 = new Vex.Flow.TextDynamics({ text: "sfz", duration: "2" });
var Dynamics2_3 = new Vex.Flow.TextDynamics({ text: "p", duration: "4" });
var Dynamics2_4 = new Vex.Flow.TextDynamics({ text: "f", duration: "4" });
var stave2VoiceDynamics = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });
stave2VoiceDynamics.addTickables([Dynamics2_1, Dynamics2_3, Dynamics2_4]);
var Dynamics_formatter2 = new Vex.Flow.Formatter().joinVoices([stave2VoiceDynamics]);
Dynamics_formatter2.format([stave2VoiceDynamics], nStaveWidth);
stave2VoiceDynamics.draw(ctx, stave1002);
var note2_1_X = note2_1.getAbsoluteX();
var staveFrom1To4_Y = note2_1.getStave().getYForLine(2.5);
const stave3 = new Stave(stave2.width + stave2.x, stave1.y, nStaveWidth).setContext(ctx);
stave3.setEndBarType(VF.Barline.type.NONE);
stave3.setSection("B", 0);
stave3.setMeasure(3);
stave3.draw();
const stave4 = new Stave(stave3.width + stave3.x, stave1.y, nStaveWidth).setContext(ctx);
stave4.setBegBarType(VF.Barline.type.NONE);
stave4.setEndBarType(VF.Barline.type.REPEAT_END);
stave4.setMeasure(4);
stave4.draw();
const stave5 = new Stave(stave1.x, stave1.y + 200, nHeadMargin + nStaveWidth).setContext(ctx);
stave5.addClef("treble").setContext(ctx);
stave5.addTimeSignature('4/4').setContext(ctx);
stave5.setSection("C", 0);
stave5.setMeasure(5);
stave5.setEndBarType(VF.Barline.type.SINGLE);//規定値(省略可能)
stave5.draw();
var connector = new VF.StaveConnector(stave1, stave5);
connector.setType(VF.StaveConnector.type.SINGLE);
connector.setContext(ctx);
connector.draw();
const notes5 = [
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, stave5, notes5);
const tie3 = new StaveTie({
first_note: notes5[1],
last_note: notes5[2],
first_indices: [0],
last_indices: [0],
});
const tie4 = new StaveTie({
first_note: notes5[2],
last_note: notes5[3],
first_indices: [0],
last_indices: [0],
});
tie3.setContext(ctx).draw();
tie4.setContext(ctx).draw();
const stave6 = new Stave(stave5.width + stave5.x, stave5.y, nStaveWidth).setContext(ctx);
stave6.setEndBarType(VF.Barline.type.DOUBLE);
stave6.setMeasure(6);
stave6.draw();
const notes6 = [
new StaveNote({ keys: ["e/5"], duration: "q", stem_direction: -1 }),
new StaveNote({ keys: ["f/5"], duration: "q", stem_direction: -1 }),
new StaveNote({ keys: ["g/5"], duration: "q", stem_direction: -1 }),
new StaveNote({ keys: ["a/5"], duration: "q", stem_direction: -1 }),
];
Formatter.FormatAndDraw(ctx, stave6, notes6);
const tie5 = new StaveTie({
first_note: notes5[3],
last_note: notes6[0],
first_indices: [0],
last_indices: [0],
});
tie5.setContext(ctx).draw();
const stave7 = new Stave(stave6.width + stave6.x, stave5.y, nStaveWidth).setContext(ctx);
stave7.setMeasure(7);
stave7.draw();
const stave8 = new Stave(stave7.width + stave7.x, stave5.y, nStaveWidth).setContext(ctx);
stave8.setMeasure(8);
stave8.draw();
const stave9 = new Stave(stave5.x, stave5.y + 200, nHeadMargin + nStaveWidth).setContext(ctx);
stave9.setMeasure(9);
stave9.draw();
var connector9 = new VF.StaveConnector(stave5, stave9);
connector9.setType(VF.StaveConnector.type.SINGLE);
connector9.setContext(ctx);
connector9.draw();
var connector9_2 = new VF.StaveConnector(stave5, stave9);
connector9_2.setType(VF.StaveConnector.type.BRACKET);
connector9_2.setContext(ctx);
connector9_2.draw();
Instrument2.x = stave1.x - 30;
Instrument2.y = stave5.y + ((stave9.y - stave5.y) / 2) + 90;
const stave10 = new Stave(stave9.width + stave9.x, stave9.y, nStaveWidth).setContext(ctx);
stave10.setMeasure(10);
stave10.draw();
const stave11 = new Stave(stave10.width + stave10.x, stave9.y, nStaveWidth).setContext(ctx);
stave11.setMeasure(11);
stave11.draw();
const stave12 = new Stave(stave11.width + stave11.x, stave9.y, nStaveWidth).setContext(ctx);
stave12.setMeasure(12);
stave12.draw();
})();
const svgElement2 = document.querySelector('#yonet202403Mid_Output01 svg');
svgElement2.style.backgroundColor = '#F5F5F5';
var svgContainer = document.getElementById('yonet202403Mid_Output01');
var svgElement = svgContainer.querySelector('svg');
var newText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
newText.setAttribute('x', '100');
newText.setAttribute('y', '100');
newText.setAttribute('font-family', 'Hiragino Kaku Gothic Pro, メイリオ, MS Gothic, sans-serif');
newText.setAttribute('font-size', '50');
newText.setAttribute('fill', 'black');
newText.textContent = 'TestTitle - subTitle - lyrics: yo-net, music: yo-net';
svgElement.appendChild(newText);
var newText2 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
newText2.setAttribute('x', Instrument1.x);
newText2.setAttribute('y', Instrument1.y);
newText2.setAttribute('font-family', 'Bravura, VexFlow, Arial, sans-serif');
newText2.setAttribute('font-size', '20pt');
newText2.setAttribute('fill', 'black');
newText2.textContent = 'Vocal';
var textGroup2 = document.createElementNS('http://www.w3.org/2000/svg', 'g');
textGroup2.setAttribute('transform', 'rotate(-90 ' + Instrument1.x + ' ' + Instrument1.y + ')');
textGroup2.appendChild(newText2);
svgElement.appendChild(textGroup2);
var newText3 = document.createElementNS('http://www.w3.org/2000/svg', 'text');
newText3.setAttribute('x', Instrument2.x);
newText3.setAttribute('y', Instrument2.y);
newText3.setAttribute('font-family', 'Bravura, VexFlow, Arial, sans-serif');
newText3.setAttribute('font-size', '20pt');
newText3.setAttribute('fill', 'black');
newText3.textContent = 'E.Guitar';
var textGroup3 = document.createElementNS('http://www.w3.org/2000/svg', 'g');
textGroup3.setAttribute('transform', 'rotate(-90 ' + Instrument2.x + ' ' + Instrument2.y + ')');
textGroup3.appendChild(newText3);
svgElement.appendChild(textGroup3);
</script>
できたね。音符を定義したところに例えば、notes1というオブジェクトにノートの配列を保持している場合は
const notes1 = [
new StaveNote({ keys: ["d/5"], duration: "8", stem_direction: -1 }),
省略
new StaveNote({ keys: ["d/6"], duration: "8", stem_direction: -1 }),
];
に対しては
notes1[0].addModifier(new VF.Articulation('a.').setPosition(3));
のようにして、addModifier関数を呼び出し、
var note2_1 = new Vex.Flow.StaveNote({ keys: ["F/4"], duration: "8" });
のように定義されたノートには
note2_1.addModifier(new VF.Articulation('a.').setPosition(3));
のように定義して、addModifier関数を呼び出します。
第一引数:Articurationクラスのコンストラクタと、その下のsetPositionのコンストラクタにも引数を定義します。
Articurationの
第一引数:冒頭で紹介したコードを付与します。
setPositionの
第一引数:3なら音符の上なので、通常はノート作成の際 , stem_direction: -1 と定義した音符に3を指定します。4なら音符の下にアーティキュレーションが追加されます。なので stem_direction: 1 か、省略されたノートに対して4を指定します。
そんなところですね。
VexFlow 使い方に戻る。