VexFlow アクセント・テヌート・スタッカート - 版の履歴

Yo-net: /* 概要 */

2024-03-15T11:30:50Z

概要

← 古い版		2024年3月15日 (金) 20:30時点における版
5行目:		5行目:
	[[VexFlow 使い方]]に戻る。		[[VexFlow 使い方]]に戻る。
	== '''概要''' ==		== '''概要''' ==
	これは入門やら、連桁の記事でも使ったので、説明記事つくるのも楽だわ～と思いながら書き始めました。アクセント・テヌート・スタッカートに加えて、スタッカーティッシモなるものやアップストロークダウンストローク。ピッチカートやレフトハンドピッチカートがあるらしい。タブ譜ならレフトハンドの↓とかもいるんだろうけど、そこまでは無いみたい。フェルマータもこの記事で扱います。マルカートははっきりとの意味で＞やｖの逆の記号とかを使います。いろんな意味が入り乱れた記号かなと思います。この記事はいろんな種類のマークを網羅しなければならず、キリが悪いところで放置。書くこと多すぎた。		これは入門やら、連桁の記事でも使ったので、説明記事つくるのも楽だわ～と思いながら書き始めました。アクセント・テヌート・スタッカートに加えて、スタッカーティッシモなるものやアップストロークダウンストローク。ピッチカートやレフトハンドピッチカートがあるらしい。タブ譜ならレフトハンドの↓とかもいるんだろうけど、そこまでは無いみたい。フェルマータもこの記事で扱います。マルカートははっきりとかの意味を持つアーティキュレーションの総称です。で＞やｖの逆の記号とかを使います。いろんな意味が入り乱れた記号かなと思います。

Yo-net: /* アクセント・テヌート・スタッカート */

2024-03-15T11:29:33Z

アクセント・テヌート・スタッカート

@@ 761行目: / 761行目: @@
-　できたね。StaveNoteクラスに似た感じで使うことができるTextDynamicsクラスでコンストラクタで、強弱記号のキーワード文字列とduration架空の音符長さを指定します。.TextDynamics({ text: "sfz", duration: "2" })こんな感じ
+　できたね。音符を定義したところに例えば、notes1というオブジェクトにノートの配列を保持している場合は
-第一引数：オブジェクト値のキー Text : "" のリテラルの中に強弱記号コードを設定する。duration : "" のリテラルの中に1,2,4,8,16,32を使って架空の長さを設定する。
+const notes1 = [
 [[VexFlow 使い方]]に戻る。

Yo-net: /* アクセント・テヌート・スタッカート */

2024-03-15T11:15:11Z

アクセント・テヌート・スタッカート

← 古い版		2024年3月15日 (金) 20:15時点における版
205行目:		205行目:
	note2_2.addModifier(new VF.Articulation('a@a').setPosition(3));		note2_2.addModifier(new VF.Articulation('a@a').setPosition(3));
	note2_3.addModifier(new VF.Articulation('a@u').setPosition(4));		note2_3.addModifier(new VF.Articulation('a@u').setPosition(4));
	note2_4.addModifier(new VF.Articulation('a-').setPosition(2));		note2_4.addModifier(new VF.Articulation('a-').setPosition(4));
	note2_4.addModifier(new VF.Articulation('a.').setPosition(2));		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 });

2024年3月15日 (金) 11:14にYo-netによる

2024-03-15T11:14:19Z

← 古い版		2024年3月15日 (金) 20:14時点における版
197行目:		197行目:
	var note2_3 = new Vex.Flow.StaveNote({ keys: ["D/4"], duration: "8" });		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_4 = new Vex.Flow.StaveNote({ keys: ["C/4"], duration: "8" });
	var note2_5 = new Vex.Flow.StaveNote({ keys: ["B/3"], duration: "8" });		var note2_5 = new Vex.Flow.StaveNote({ keys: ["G/4"], duration: "8" });
	var note2_6 = new Vex.Flow.StaveNote({ keys: ["A/3"], duration: "8" });		var note2_6 = new Vex.Flow.StaveNote({ keys: ["F/4"], duration: "8" });
	var note2_7 = new Vex.Flow.StaveNote({ keys: ["G/3"], duration: "8" });		var note2_7 = new Vex.Flow.StaveNote({ keys: ["G/4"], duration: "8" });
	var note2_8 = new Vex.Flow.StaveNote({ keys: ["F/3"], duration: "8" });		var note2_8 = new Vex.Flow.StaveNote({ keys: ["F/4"], duration: "8" });

	note2_1.addModifier(new VF.Articulation('am').setPosition(4));		note2_1.addModifier(new VF.Articulation('am').setPosition(4));
	note2_2.addModifier(new VF.Articulation('a@a').setPosition(3));		note2_2.addModifier(new VF.Articulation('a@a').setPosition(3));
	note2_3.addModifier(new VF.Articulation('a@u').setPosition(4));		note2_3.addModifier(new VF.Articulation('a@u').setPosition(4));
			note2_4.addModifier(new VF.Articulation('a-').setPosition(2));
			note2_4.addModifier(new VF.Articulation('a.').setPosition(2));

	var stave2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });		var stave2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 4 });

Yo-net: /* アクセント・テヌート・スタッカート */

2024-03-15T11:08:32Z

アクセント・テヌート・スタッカート

← 古い版		2024年3月15日 (金) 20:08時点における版
448行目:		448行目:
	RenderContext,		RenderContext,
	TextDynamics,		TextDynamics,
			Articulation,
	Renderer		Renderer
	} = Vex.Flow;		} = Vex.Flow;
518行目:		519行目:

	const notes1 = [		const notes1 = [
	new StaveNote({ keys: ["d/5"], duration: "q" }),		new StaveNote({ keys: ["d/5"], duration: "8", stem_direction: -1 }),
	new StaveNote({ keys: ["e/5"], duration: "q" }),		new StaveNote({ keys: ["e/5"], duration: "8", stem_direction: -1 }),
	new StaveNote({ keys: ["f/5"], duration: "q" }),		new StaveNote({ keys: ["f/5"], duration: "8", stem_direction: -1 }),
	new StaveNote({ keys: ["g/5"], duration: "q" }),		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);

	~~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();~~


	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);
554行目:		547行目:
	stave2.setContext(ctx).draw();		stave2.setContext(ctx).draw();

	var note2_1 = new Vex.Flow.StaveNote({ keys: ["C/4"], duration: "q" });		var note2_1 = new Vex.Flow.StaveNote({ keys: ["F/4"], duration: "8" });
	var note2_2 = new Vex.Flow.StaveNote({ keys: ["D/4"], duration: "q" });		var note2_2 = new Vex.Flow.StaveNote({ keys: ["C/5"], duration: "8", stem_direction: -1 });
	var ~~note2_3~~ = new Vex.Flow.StaveNote({ keys: ["E/4"], duration: "q" });		var note2_3 = new Vex.Flow.StaveNote({ keys: ["D/4"], duration: "8" });
	var ~~note2_4~~ = new Vex.Flow.StaveNote({ keys: ["F/4"], duration: "q" });		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);
567行目:		569行目:
	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" });

	~~//ダイナミクス記号の配置に指定した幅に対する音符の長さを利用するためVoiceを使う。~~
	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]);
	~~//フォーマッターで作成したボイスオブジェクトをnStaveWidthの横幅で配置する。~~
	Dynamics_formatter2.format([stave2VoiceDynamics], nStaveWidth);		Dynamics_formatter2.format([stave2VoiceDynamics], nStaveWidth);

	~~//配置計算をおえた状態のボイスオブジェクトを書き出す。ctxの中の小節オブジェクトstave1002に対して~~
	stave2VoiceDynamics.draw(ctx, stave1002);		stave2VoiceDynamics.draw(ctx, stave1002);

649行目:		646行目:

	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 }),
	];		];

725行目:		722行目:
	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);

735行目:		733行目:
	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');

Yo-net: /* 概要 */

2024-03-15T10:58:32Z

概要

← 古い版		2024年3月15日 (金) 19:58時点における版
41行目:		41行目:
	<tr>		<tr>
	<td>ao</td>		<td>ao</td>
	<td>oの上に側に\|の記号。スナップピッチカート。<br />~~マルカート。~~</td>		<td>oの上に側に\|の記号。スナップピッチカート。<br />バルトークピチカートとも。マルカート。<br />垂直に弾いて指版に弦を当てる奏法だそうです。</td>
	</tr>		</tr>
	<tr style="background-color: #cccccc;">		<tr style="background-color: #cccccc;">
	<td>a\|</td>		<td>a\|</td>
	<td></td>		<td>V みたいな記号。Downストロークの意味</td>
	</tr>		</tr>
	<tr>		<tr>
	<td>am</td>		<td>am</td>
	<td></td>		<td>下開きのコみたいな記号。Upストロークの意味</td>
	</tr>		</tr>
	<tr style="background-color: #cccccc;">		<tr style="background-color: #cccccc;">
	<td>a@a</td>		<td>a@a</td>
	<td></td>		<td>フェルマータの下開き</td>
	</tr>		</tr>
	<tr>		<tr>
	<td>a@u</td>		<td>a@u</td>
	<td></td>		<td>フェルマータの上開き</td>
	</tr>		</tr>
	</table>		</table>

Yo-net: /* 概要 */

2024-03-15T10:50:37Z

概要

← 古い版		2024年3月15日 (金) 19:50時点における版
25行目:		25行目:
	<tr>		<tr>
	<td>a></td>		<td>a></td>
	<td>> ~~記号、反対向きは無いです。~~</td>		<td>> 記号、アクセント、マルカートの一種、反対向きは無いです。</td>
	</tr>		</tr>
	<tr style="background-color: #cccccc;">		<tr style="background-color: #cccccc;">
	<td>a^</td>		<td>a^</td>
	<td>^ ~~記号、アクセント、~~</td>		<td>^ 記号、山型アクセント、マルカートの一種</td>
	</tr>		</tr>
	<tr>		<tr>

Yo-net: /* 概要 */

2024-03-15T10:45:16Z

概要

← 古い版		2024年3月15日 (金) 19:45時点における版
9行目:		9行目:

	アクセント記号の種類		アクセント記号の種類
	~~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));~~

	~~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));~~
	<table style="border: 0; border-collapse: collapse;">		<table style="border: 0; border-collapse: collapse;">
	<tr border="0" style="color: white; background-color:#666666; font-weight: bolder;">		<tr border="0" style="color: white; background-color:#666666; font-weight: bolder;">
40行目:		29行目:
	<tr style="background-color: #cccccc;">		<tr style="background-color: #cccccc;">
	<td>a^</td>		<td>a^</td>
	<td></td>		<td>^ 記号、アクセント、</td>
	</tr>		</tr>
	<tr>		<tr>
	<td>a-</td>		<td>a-</td>
	<td></td>		<td>- 記号、テヌート、はっきり伸ばす。<br />普段から意識しろってことだけど</td>
	</tr>		</tr>
	<tr style="background-color: #cccccc;">		<tr style="background-color: #cccccc;">
	<td>a+</td>		<td>a+</td>
	<td></td>		<td>+ 記号、レフトハンドピッチカート。<br />バイオリンの奏法。左手で弦を弾く。</td>
	</tr>		</tr>
	<tr>		<tr>
	<td>ao</td>		<td>ao</td>
	<td></td>		<td>oの上に側に\|の記号。スナップピッチカート。<br />マルカート。</td>
	</tr>		</tr>
	<tr style="background-color: #cccccc;">		<tr style="background-color: #cccccc;">

Yo-net: /* 概要 */

2024-03-15T10:16:21Z

概要

← 古い版		2024年3月15日 (金) 19:16時点における版
9行目:		9行目:

	アクセント記号の種類		アクセント記号の種類
			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));

			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));
	<table style="border: 0; border-collapse: collapse;">		<table style="border: 0; border-collapse: collapse;">
	<tr border="0" style="color: white; background-color:#666666; font-weight: bolder;">		<tr border="0" style="color: white; background-color:#666666; font-weight: bolder;">
16行目:		27行目:
	</tr>		</tr>
	<tr>		<tr>
	<td></td>		<td>a.</td>
	<td></td>		<td>ドット、アクセント</td>
			</tr>
			<tr style="background-color: #cccccc;">
			<td>av</td>
			<td>縦長シングルクォートみたいな、スタッカーティッシモ</td>
			</tr>
			<tr>
			<td>a></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></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>ao</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>am</td>
	<td></td>		<td></td>
	</tr>		</tr>
	<tr style="background-color: #cccccc;">		<tr style="background-color: #cccccc;">
			<td>a@a</td>
	<td></td>		<td></td>
			</tr>
			<tr>
			<td>a@u</td>
	<td></td>		<td></td>
	</tr>		</tr>

Yo-net: /* アクセント・テヌート・スタッカート */

2024-03-14T15:51:46Z

アクセント・テヌート・スタッカート

← 古い版		2024年3月15日 (金) 00:51時点における版
191行目:		191行目:

	note2_1.addModifier(new VF.Articulation('am').setPosition(4));		note2_1.addModifier(new VF.Articulation('am').setPosition(4));
	note2_2.addModifier(new VF.Articulation('a@a').setPosition(4));		note2_2.addModifier(new VF.Articulation('a@a').setPosition(3));
	note2_3.addModifier(new VF.Articulation('a@u').setPosition(4));		note2_3.addModifier(new VF.Articulation('a@u').setPosition(4));