VexFlow 強弱表示 - 版の履歴

Yo-net: /* 強弱表示 */

2024-03-14T13:53:26Z

強弱表示

← 古い版		2024年3月14日 (木) 22:53時点における版
217行目:		217行目:
	stave2VoiceDynamics.addTickables([Dynamics2_1, Dynamics2_3, Dynamics2_4]);		stave2VoiceDynamics.addTickables([Dynamics2_1, Dynamics2_3, Dynamics2_4]);


			//stave2VoiceDynamics.setStrict(false)にすると、
			//一小節の音符の長さを足してnum_beats:の指定の音符をbeat_value:の数だけ必要とする規則がなくなり適当にできる。
	var Dynamics_formatter2 = new Vex.Flow.Formatter().joinVoices([stave2VoiceDynamics]);		var Dynamics_formatter2 = new Vex.Flow.Formatter().joinVoices([stave2VoiceDynamics]);
	//.format([stave2Voice], nStaveWidth);		//.format([stave2Voice], nStaveWidth);

2024年3月14日 (木) 13:46にYo-netによる

2024-03-14T13:46:47Z

← 古い版		2024年3月14日 (木) 22:46時点における版
755行目:		755行目:


	~~まだできてないっす。くっそ！~~		できたね。StaveNoteクラスに似た感じで使うことができるTextDynamicsクラスでコンストラクタで、強弱記号のキーワード文字列とduration架空の音符長さを指定します。.TextDynamics({ text: "sfz", duration: "2" })こんな感じ


			第一引数：オブジェクト値のキー Text : "" のリテラルの中に強弱記号コードを設定する。duration : "" のリテラルの中に1,2,4,8,16,32を使って架空の長さを設定する。



	[[VexFlow 使い方]]に戻る。		[[VexFlow 使い方]]に戻る。

Yo-net: /* 強弱表示 */

2024-03-14T13:40:30Z

強弱表示

← 古い版		2024年3月14日 (木) 22:40時点における版
503行目:		503行目:
	stave1.setMeasure(1);		stave1.setMeasure(1);
	stave1.setTempo({ duration: "q", dots: 0, bpm: 120 }, 0);		stave1.setTempo({ duration: "q", dots: 0, bpm: 120 }, 0);
	~~//stave1.setText("Vocal", VF.Modifier.Position.LEFT, {shift_y: 0});~~
	~~//stave1.setBegBarType(4);//BarLine.type.REPEAT_BEGIN~~
	stave1.setBegBarType(VF.Barline.type.REPEAT_BEGIN);//BarLine.type.REPEAT_BEGIN		stave1.setBegBarType(VF.Barline.type.REPEAT_BEGIN);//BarLine.type.REPEAT_BEGIN

511行目:		509行目:

	stave1.draw();		stave1.draw();


	~~//SINGLE:1, DOUBLE:2, END:3, REPEAT_BEGIN:4, REPEAT_END:5, REPEAT_BOTH:6, NONE:7~~

	const notes1 = [		const notes1 = [
543行目:		538行目:

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

	~~// stave2に対する音符の作成と描画~~
	var note2_1 = new Vex.Flow.StaveNote({ keys: ["C/4"], duration: "q" });		var note2_1 = new Vex.Flow.StaveNote({ keys: ["C/4"], duration: "q" });
	var note2_2 = new Vex.Flow.StaveNote({ keys: ["D/4"], duration: "q" });		var note2_2 = new Vex.Flow.StaveNote({ keys: ["D/4"], duration: "q" });
556行目:		553行目:
	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]);
	~~//stave2Voice.setStave(stave2);~~

	var formatter2 = new Vex.Flow.Formatter().joinVoices([stave2Voice]);//.format([stave2Voice], nStaveWidth);		var formatter2 = new Vex.Flow.Formatter().joinVoices([stave2Voice]);//.format([stave2Voice], nStaveWidth);
563行目:		560行目:
	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]);
	//~~.format([stave2Voice], nStaveWidth);~~		//フォーマッターで作成したボイスオブジェクトをnStaveWidthの横幅で配置する。
	~~//Dynamics_formatter2.formatToStave([stave2VoiceDynamics], stave2);~~
	Dynamics_formatter2.format([stave2VoiceDynamics], nStaveWidth);		Dynamics_formatter2.format([stave2VoiceDynamics], nStaveWidth);

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


	var note2_1_X = note2_1.getAbsoluteX();		var note2_1_X = note2_1.getAbsoluteX();
	~~//var note2_1_Y = note2_1.getAbsoluteY(); これは存在しない~~
	var staveFrom1To4_Y = note2_1.getStave().getYForLine(2.5);		var staveFrom1To4_Y = note2_1.getStave().getYForLine(2.5);

	~~//stave2Voice.draw(new Vex.Flow.RenderContext(ctx, stave2.x, stave2.y));~~

	const stave3 = new Stave(stave2.width + stave2.x, stave1.y, nStaveWidth).setContext(ctx);		const stave3 = new Stave(stave2.width + stave2.x, stave1.y, nStaveWidth).setContext(ctx);
684行目:		682行目:
	connector9_2.setType(VF.StaveConnector.type.BRACKET);		connector9_2.setType(VF.StaveConnector.type.BRACKET);
	connector9_2.setContext(ctx);		connector9_2.setContext(ctx);
	~~//connector9_2.setText('E.Guitar');~~
	connector9_2.draw();		connector9_2.draw();

712行目:		709行目:
	var svgContainer = document.getElementById('yonet202403Mid_Output01');		var svgContainer = document.getElementById('yonet202403Mid_Output01');

	~~// span要素内の最初のsvg要素を取得~~
	var svgElement = svgContainer.querySelector('svg');		var svgElement = svgContainer.querySelector('svg');

	~~// 新しいテキスト要素を作成~~
	var newText = document.createElementNS('http://www.w3.org/2000/svg', 'text');		var newText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
	newText.setAttribute('x', '100');		newText.setAttribute('x', '100');
723行目:		718行目:
	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';
	~~// SVG要素に新しいテキスト要素を追加~~
	svgElement.appendChild(newText);		svgElement.appendChild(newText);

735行目:		729行目:
	newText2.textContent = 'Vocal';		newText2.textContent = 'Vocal';

	~~// グループ（g要素）を作成~~
	var textGroup2 = document.createElementNS('http://www.w3.org/2000/svg', 'g');		var textGroup2 = document.createElementNS('http://www.w3.org/2000/svg', 'g');
	textGroup2.setAttribute('transform', 'rotate(-90 ' + Instrument1.x + ' ' + Instrument1.y + ')');		textGroup2.setAttribute('transform', 'rotate(-90 ' + Instrument1.x + ' ' + Instrument1.y + ')');

	~~// テキストをグループに追加~~
	textGroup2.appendChild(newText2);		textGroup2.appendChild(newText2);

	~~// グループをSVG要素に追加~~
	svgElement.appendChild(textGroup2);		svgElement.appendChild(textGroup2);

753行目:		745行目:
	newText3.textContent = 'E.Guitar';		newText3.textContent = 'E.Guitar';

	~~// グループ（g要素）を作成~~
	var textGroup3 = document.createElementNS('http://www.w3.org/2000/svg', 'g');		var textGroup3 = document.createElementNS('http://www.w3.org/2000/svg', 'g');
	textGroup3.setAttribute('transform', 'rotate(-90 ' + Instrument2.x + ' ' + Instrument2.y + ')');		textGroup3.setAttribute('transform', 'rotate(-90 ' + Instrument2.x + ' ' + Instrument2.y + ')');

	~~// テキストをグループに追加~~
	textGroup3.appendChild(newText3);		textGroup3.appendChild(newText3);

	~~// グループをSVG要素に追加~~
	svgElement.appendChild(textGroup3);		svgElement.appendChild(textGroup3);
	</script>		</script>

Yo-net: /* 概要 */

2024-03-14T13:29:43Z

概要

← 古い版		2024年3月14日 (木) 22:29時点における版
57行目:		57行目:
	<tr style="background-color: #cccccc;">		<tr style="background-color: #cccccc;">
	<td>ff</td>		<td>ff</td>
	<td>~~フォルッテシモ・より強くで、これ以降の扱いはピアニッシモに準ずる。フォルテッシッシモ。~~</td>		<td>フォルッテシモ・より強くで、これ以降の扱いはピアニッシモに準ずる。</br>フォルテッシッシモ。</td>
	</tr>		</tr>
	</table>		</table>

Yo-net: /* 概要 */

2024-03-14T13:29:06Z

概要

@@ 8行目: / 8行目: @@
-　結局、奥の手に近いことを使ったが、幅0のゴースト小節を120px低いところにつくって、そいつにTextDynamicsクラスを適用するとそのゴーストの上のあたりに強弱記号が記述される。めちゃくちゃなやり方だけど、過不足なくVexFlowの技術範囲で描画しているだけまし。
+　ところで、なんでVexFlowのサンプルは強弱記号を五線の上に描くのがデフォで動かせないのか？不思議に思う。確かに歌がついてる楽譜は下にスペースがないので、上もありうる。だが、楽器などの歌わないパートは基本は下にある楽譜がほとんど。なのに上にしか描けない。ChatGPTも知らないっていうし。どうなってんの？そういうオプションは誰が教えてくれるの。どこにあんの？お世話になりっぱなしのVexFlowに文句ばかり思いつく。無料だからこんなもんなの？かなしいことよのう。コイツ。お世話になりっぱなしなのを忘れてるだろ。
@@ 22行目: / 28行目: @@
 </tr>
 <tr>
-   <td></td>
+   <td>sfz</td>
-   <td></td>
+   <td>スフォルツァンド・その部分をがらっと変えるほど強調して</td>
 </tr>
 <tr style="background-color: #cccccc;">
-   <td></td>
+   <td>ff</td>
-   <td></td>
+   <td>フォルッテシモ・より強くで、これ以降の扱いはピアニッシモに準ずる。フォルテッシッシモ。</td>
 </tr>
 </table>

Yo-net: /* 概要 */

2024-03-14T12:30:23Z

概要

← 古い版		2024年3月14日 (木) 21:30時点における版
8行目:		8行目:


	~~音の長さ~~		結局、奥の手に近いことを使ったが、幅0のゴースト小節を120px低いところにつくって、そいつにTextDynamicsクラスを適用するとそのゴーストの上のあたりに強弱記号が記述される。めちゃくちゃなやり方だけど、過不足なくVexFlowの技術範囲で描画しているだけまし。


			じゃ、ゆっくりコードでも見て行ってください。


			強弱記号の種類

	<table style="border: 0; border-collapse: collapse;">		<table style="border: 0; border-collapse: collapse;">

Yo-net: /* 強弱表示 */

2024-03-14T12:26:17Z

強弱表示

← 古い版		2024年3月14日 (木) 21:26時点における版
155行目:		155行目:

	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 + ~~100~~, 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);
404行目:		404行目:
	Modifier,		Modifier,
	RenderContext,		RenderContext,
			TextDynamics,
	Renderer		Renderer
	} = Vex.Flow;		} = Vex.Flow;
466行目:		467行目:
	stave1.setMeasure(1);		stave1.setMeasure(1);
	stave1.setTempo({ duration: "q", dots: 0, bpm: 120 }, 0);		stave1.setTempo({ duration: "q", dots: 0, bpm: 120 }, 0);
			//stave1.setText("Vocal", VF.Modifier.Position.LEFT, {shift_y: 0});
			//stave1.setBegBarType(4);//BarLine.type.REPEAT_BEGIN
	stave1.setBegBarType(VF.Barline.type.REPEAT_BEGIN);//BarLine.type.REPEAT_BEGIN		stave1.setBegBarType(VF.Barline.type.REPEAT_BEGIN);//BarLine.type.REPEAT_BEGIN

504行目:		507行目:

	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);
	stave2.setEndBarType(VF.Barline.type.REPEAT_BOTH);		stave2.setEndBarType(VF.Barline.type.REPEAT_BOTH);
	stave2.setMeasure(2);		stave2.setMeasure(2);
509行目:		513行目:
	stave2.setContext(ctx).draw();		stave2.setContext(ctx).draw();

			// stave2に対する音符の作成と描画
	var note2_1 = new Vex.Flow.StaveNote({ keys: ["C/4"], duration: "q" });		var note2_1 = new Vex.Flow.StaveNote({ keys: ["C/4"], duration: "q" });
	var note2_2 = new Vex.Flow.StaveNote({ keys: ["D/4"], duration: "q" });		var note2_2 = new Vex.Flow.StaveNote({ keys: ["D/4"], duration: "q" });
521行目:		526行目:

	stave2Voice.draw(ctx, 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]);
			//.format([stave2Voice], nStaveWidth);
			//Dynamics_formatter2.formatToStave([stave2VoiceDynamics], stave2);
			Dynamics_formatter2.format([stave2VoiceDynamics], nStaveWidth);

			stave2VoiceDynamics.draw(ctx, stave1002);


	var note2_1_X = note2_1.getAbsoluteX();		var note2_1_X = note2_1.getAbsoluteX();
			//var note2_1_Y = note2_1.getAbsoluteY(); これは存在しない
	var staveFrom1To4_Y = note2_1.getStave().getYForLine(2.5);		var staveFrom1To4_Y = note2_1.getStave().getYForLine(2.5);

			//stave2Voice.draw(new Vex.Flow.RenderContext(ctx, stave2.x, stave2.y));

	const stave3 = new Stave(stave2.width + stave2.x, stave1.y, nStaveWidth).setContext(ctx);		const stave3 = new Stave(stave2.width + stave2.x, stave1.y, nStaveWidth).setContext(ctx);
544行目:		566行目:
	stave5.setSection("C", 0);		stave5.setSection("C", 0);
	stave5.setMeasure(5);		stave5.setMeasure(5);
	stave5.setEndBarType(VF.Barline.type.SINGLE);		stave5.setEndBarType(VF.Barline.type.SINGLE);//規定値(省略可能)

	stave5.draw();		stave5.draw();
654行目:		676行目:
	var svgContainer = document.getElementById('yonet202403Mid_Output01');		var svgContainer = document.getElementById('yonet202403Mid_Output01');

			// span要素内の最初のsvg要素を取得
	var svgElement = svgContainer.querySelector('svg');		var svgElement = svgContainer.querySelector('svg');

			// 新しいテキスト要素を作成
	var newText = document.createElementNS('http://www.w3.org/2000/svg', 'text');		var newText = document.createElementNS('http://www.w3.org/2000/svg', 'text');
	newText.setAttribute('x', '100');		newText.setAttribute('x', '100');
663行目:		687行目:
	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';
			// SVG要素に新しいテキスト要素を追加
	svgElement.appendChild(newText);		svgElement.appendChild(newText);

674行目:		699行目:
	newText2.textContent = 'Vocal';		newText2.textContent = 'Vocal';

			// グループ（g要素）を作成
	var textGroup2 = document.createElementNS('http://www.w3.org/2000/svg', 'g');		var textGroup2 = document.createElementNS('http://www.w3.org/2000/svg', 'g');
	textGroup2.setAttribute('transform', 'rotate(-90 ' + Instrument1.x + ' ' + Instrument1.y + ')');		textGroup2.setAttribute('transform', 'rotate(-90 ' + Instrument1.x + ' ' + Instrument1.y + ')');

			// テキストをグループに追加
	textGroup2.appendChild(newText2);		textGroup2.appendChild(newText2);

			// グループをSVG要素に追加
	svgElement.appendChild(textGroup2);		svgElement.appendChild(textGroup2);

689行目:		717行目:
	newText3.textContent = 'E.Guitar';		newText3.textContent = 'E.Guitar';

			// グループ（g要素）を作成
	var textGroup3 = document.createElementNS('http://www.w3.org/2000/svg', 'g');		var textGroup3 = document.createElementNS('http://www.w3.org/2000/svg', 'g');
	textGroup3.setAttribute('transform', 'rotate(-90 ' + Instrument2.x + ' ' + Instrument2.y + ')');		textGroup3.setAttribute('transform', 'rotate(-90 ' + Instrument2.x + ' ' + Instrument2.y + ')');

			// テキストをグループに追加
	textGroup3.appendChild(newText3);		textGroup3.appendChild(newText3);

			// グループをSVG要素に追加
	svgElement.appendChild(textGroup3);		svgElement.appendChild(textGroup3);
	</script>		</script>

Yo-net: /* 強弱表示 */

2024-03-14T12:23:02Z

強弱表示

← 古い版		2024年3月14日 (木) 21:23時点における版
155行目:		155行目:

	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 + 100, 0);
	stave2.setEndBarType(VF.Barline.type.REPEAT_BOTH);		stave2.setEndBarType(VF.Barline.type.REPEAT_BOTH);
	stave2.setMeasure(2);		stave2.setMeasure(2);
182行目:		183行目:
	var Dynamics_formatter2 = new Vex.Flow.Formatter().joinVoices([stave2VoiceDynamics]);		var Dynamics_formatter2 = new Vex.Flow.Formatter().joinVoices([stave2VoiceDynamics]);
	//.format([stave2Voice], nStaveWidth);		//.format([stave2Voice], nStaveWidth);
	Dynamics_formatter2.formatToStave([stave2VoiceDynamics], stave2);		//Dynamics_formatter2.formatToStave([stave2VoiceDynamics], stave2);
			Dynamics_formatter2.format([stave2VoiceDynamics], nStaveWidth);

	stave2VoiceDynamics.draw(ctx, ~~stave2~~);		stave2VoiceDynamics.draw(ctx, stave1002);

Yo-net: /* 強弱表示 */

2024-03-14T11:55:47Z

強弱表示

← 古い版		2024年3月14日 (木) 20:55時点における版
174行目:		174行目:
	stave2Voice.draw(ctx, stave2);		stave2Voice.draw(ctx, stave2);

	var Dynamics2_1 = new Vex.Flow.TextDynamics({ ~~keys~~: ["~~C/4~~"], duration: "2" });		var Dynamics2_1 = new Vex.Flow.TextDynamics({ text: "sfz", duration: "2" });
	var Dynamics2_3 = new Vex.Flow.TextDynamics({ ~~keys~~: ["~~E/4~~"], duration: "4" });		var Dynamics2_3 = new Vex.Flow.TextDynamics({ text: "p", duration: "4" });
	var Dynamics2_4 = new Vex.Flow.TextDynamics({ ~~keys~~: ["~~F/4~~"], 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]);

Yo-net: /* 強弱表示 */

2024-03-14T11:53:20Z

強弱表示

← 古い版		2024年3月14日 (木) 20:53時点における版
52行目:		52行目:
	Modifier,		Modifier,
	RenderContext,		RenderContext,
			TextDynamics,
	Renderer		Renderer
	} = Vex.Flow;		} = Vex.Flow;