VexFlow テンポ - 版の履歴

Yo-net: /* テンポ */

2024-03-14T09:28:27Z

テンポ

← 古い版		2024年3月14日 (木) 18:28時点における版
497行目:		497行目:
	StaveConnector,		StaveConnector,
	Modifier,		Modifier,
			RenderContext,
	Renderer		Renderer
	} = Vex.Flow;		} = Vex.Flow;
558行目:		559行目:
	stave1.setSection("A", 0);		stave1.setSection("A", 0);
	stave1.setMeasure(1);		stave1.setMeasure(1);
	stave1.setTempo({ duration: "q", dots: 0, bpm: 80 }, 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

598行目:		597行目:


	~~const~~ stave2 = new Stave(stave1.width + stave1.x, stave1.y, nStaveWidth~~).setContext(ctx~~);		var stave2 = new Vex.Flow.Stave(stave1.width + stave1.x, stave1.y, nStaveWidth);
	stave2.setEndBarType(VF.Barline.type.REPEAT_BOTH);		stave2.setEndBarType(VF.Barline.type.REPEAT_BOTH);
	stave2.setMeasure(2);		stave2.setMeasure(2);
	stave2.draw();		stave2.setTempo({ name: "Andante", note: "8", bpm: 120 }, 0);
			stave2.setContext(ctx).draw();

			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_3 = new Vex.Flow.StaveNote({ keys: ["E/4"], duration: "q" });
			var note2_4 = new Vex.Flow.StaveNote({ keys: ["F/4"], duration: "q" });
			var stave2Voice = new Vex.Flow.Voice({ num_beats: 4, beat_value: 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);
			formatter2.formatToStave([stave2Voice], stave2);

			stave2Voice.draw(ctx, stave2);

			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);		const stave3 = new Stave(stave2.width + stave2.x, stave1.y, nStaveWidth).setContext(ctx);
623行目:		638行目:
	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();
733行目:		748行目:
	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');
744行目:		757行目:
	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);

756行目:		768行目:
	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);

774行目:		783行目:
	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>
	</syntaxhighlight>		</syntaxhighlight>

			とくに最後にいうこともありません。長くなってきたので、そろそろ、前の項目でやった技術に対する重ね書きをやめて、整理しなあかんかな。でも重ねることによってわかることもあるし。まぁね。おいおい。
	またまた、なかなか強引なことをしましたが、VexFlowが描画するsvgタグの中に描画が終わった後のJavaScript処理としてsvg関連のエレメントが挿入されるようなスクリプトの第二弾です。svgの操作がわかると楽器名が回転しちゃうっていうね。より余白を狭くもできるね。フォントをもうちょっと細めの字体にすると表示できる文字数もアップするし、改行もしちゃえば、さらに長い楽器名にも対応できる。


	仕組みとしてはポジションを覚えるグローバル的な変数をVexFlow描画関数の外で定義して、描画関数の中のstave.オブジェクトのメンバ関数.xや.yの値をグローバル変数に保持して、小節からの相対距離に対して、描画するような座標計算によってもとめられる位置にテキストを配置します。90度回す回転軸の位置を設定しながらまわしたものをグループとして設定するとねじこんだテキストだけが、回転する感じになります。


	あとは、自分で作ったWebフォントが準備できれば、思うがままのグラフィックも好きな位置に表示できるってことですね。Svgの操作はさらに難しそうなイメージだけど。時間があればやってみようかな。


	ヒントとして、音符のX位置も取得できる。getAbsoluteXっていう関数がある。音符のあるところの縦位置については、その五線譜の一番下段を0、一番上が4として、つまり真ん中は2数値をいれれば、その値が取得できる。0.5で半音の部分も座標が返ってくる。ノートオブジェクトの中の.getStave().getYForLine(-4)みたいな関数を使う。


	*var note2_1_X = note2_1.getAbsoluteX();
	*<s>//var note2_1_Y = note2_1.getAbsoluteY();</s> これは存在しない。
	*var staveFrom1To4_Y = note2_1.getStave().getYForLine(-4);



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

Yo-net: /* 概要 */

2024-03-14T09:22:14Z

概要

← 古い版		2024年3月14日 (木) 18:22時点における版
128行目:		128行目:
	<td>tempo giusto(テンポ・ジュスト)</td>		<td>tempo giusto(テンポ・ジュスト)</td>
	<td>正確な速さで</td>		<td>正確な速さで</td>
			</tr>
			<tr style="background-color: #cccccc;">
			<td>grazioso(グラツィオーソ)</td>
			<td>優美に</td>
	</tr>		</tr>
	</table>		</table>

Yo-net: /* 概要 */

2024-03-14T09:18:28Z

概要

@@ 11行目: / 11行目: @@
-音の長さ1 = 全音符(w)、2 = ２分音符(h)、4 = ４分音符(q)、 8 = ８分音符、16 = １６分音符と対応しています。
+音の長さ
 <table style="border: 0; border-collapse: collapse;">
@@ 44行目: / 43行目: @@
 </tr>
 </table>
 　ほかにも、速さ記号を表示するだけのものがあります。{ name: "Andante", note: "8", bpm: 120 } のようにnameキーが設定されていると文字表示になるようです。

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

2024-03-14T08:52:06Z

← 古い版		2024年3月14日 (木) 17:52時点における版
10行目:		10行目:
	第一引数は { duration: "q", dots: 1, bpm: 80 } のように設定します。基準の音符をdurationキーにdotを何個つけるか(付点音符)をdotsキーに設定する感じですね。あまり使わないでしょうね。基本は0だと思います。bpmキーにはbpm値です。		第一引数は { duration: "q", dots: 1, bpm: 80 } のように設定します。基準の音符をdurationキーにdotを何個つけるか(付点音符)をdotsキーに設定する感じですね。あまり使わないでしょうね。基本は0だと思います。bpmキーにはbpm値です。


			音の長さ1 = 全音符(w)、2 = ２分音符(h)、4 = ４分音符(q)、 8 = ８分音符、16 = １６分音符と対応しています。


			<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>
			<td>1 or w</td>
			<td>全音符</td>
			</tr>
			<tr style="background-color: #cccccc;">
			<td>2 or h</td>
			<td>２分音符</td>
			</tr>
			<tr>
			<td>4 or q</td>
			<td>４分音符</td>
			</tr>
			<tr style="background-color: #cccccc;">
			<td>8</td>
			<td>8分音符</td>
			</tr>
			<tr>
			<td>16</td>
			<td>16分音符</td>
			</tr>
			<tr style="background-color: #cccccc;">
			<td>32</td>
			<td>32分音符</td>
			</tr>
			</table>

	ほかにも、速さ記号を表示するだけのものがあります。{ name: "Andante", note: "8", bpm: 120 } のようにnameキーが設定されていると文字表示になるようです。		ほかにも、速さ記号を表示するだけのものがあります。{ name: "Andante", note: "8", bpm: 120 } のようにnameキーが設定されていると文字表示になるようです。

Yo-net: /* テンポ */

2024-03-14T08:39:57Z

テンポ

← 古い版		2024年3月14日 (木) 17:39時点における版
144行目:		144行目:
	stave2.setEndBarType(VF.Barline.type.REPEAT_BOTH);		stave2.setEndBarType(VF.Barline.type.REPEAT_BOTH);
	stave2.setMeasure(2);		stave2.setMeasure(2);
			stave2.setTempo({ name: "Andante", note: "8", bpm: 120 }, 0);
	stave2.setContext(ctx).draw();		stave2.setContext(ctx).draw();

Yo-net: /* 概要 */

2024-03-14T08:38:34Z

概要

← 古い版		2024年3月14日 (木) 17:38時点における版
5行目:		5行目:
	[[VexFlow 使い方]]に戻る。		[[VexFlow 使い方]]に戻る。
	== '''概要''' ==		== '''概要''' ==
	前の項目の記事で我々は禁断の手法を編み出したといっていいと思います。VexFlowの技術を使いながらも好き勝手にsvg領域にテキストを配置するという技です。つまり「元気があれば！なんでもできる！１，２，３，だーっ！」みたいな？そのような技術をつかって好き勝手テキストを挿入してみようという実験的な記事になる予定です。なんでもは言い過ぎたかもしれない。		いろいろ重ねていくと横方向の表示があまりよくないのに、縦にしか位置調整できないという。いたい。横幅0のゴースト小節をつくって横方向を調節した方がいいのかもしれない。VexFlowやっぱかゆいところに手が届かないよね。staveクラスのオブジェクトのメンバ関数にsetTempoというのがあるので、そこの第一引数でテンポの基準となる音符とbpm値(1分当たりの基準の音符の数)を指定して、第二引数にはY方向のオフセット座標を入力します。


			第一引数は { duration: "q", dots: 1, bpm: 80 } のように設定します。基準の音符をdurationキーにdotを何個つけるか(付点音符)をdotsキーに設定する感じですね。あまり使わないでしょうね。基本は0だと思います。bpmキーにはbpm値です。


			ほかにも、速さ記号を表示するだけのものがあります。{ name: "Andante", note: "8", bpm: 120 } のようにnameキーが設定されていると文字表示になるようです。

Yo-net: /* テンポ */

2024-03-14T08:19:51Z

テンポ

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

Yo-net: /* テキスト挿入 */

2024-03-14T08:18:56Z

テキスト挿入

← 古い版		2024年3月14日 (木) 17:18時点における版
9行目:		9行目:


	== '''~~テキスト挿入~~''' ==		== '''テンポ''' ==
	<div id="yonet202403Mid_Output01"></div>		<div id="yonet202403Mid_Output01"></div>
	<yjavascript></script>		<yjavascript></script>
95行目:		95行目:
	stave1.setSection("A", 0);		stave1.setSection("A", 0);
	stave1.setMeasure(1);		stave1.setMeasure(1);
			stave1.setTempo({ duration: "q", dots: 1, bpm: 80 }, 0);
	//stave1.setText("Vocal", VF.Modifier.Position.LEFT, {shift_y: 0});		//stave1.setText("Vocal", VF.Modifier.Position.LEFT, {shift_y: 0});
	//stave1.setBegBarType(4);//BarLine.type.REPEAT_BEGIN		//stave1.setBegBarType(4);//BarLine.type.REPEAT_BEGIN