VexFlow 音部記号 - 版の履歴

2023年2月10日 (金) 10:03にYo-netによる

2023-02-10T10:03:14Z

← 古い版		2023年2月10日 (金) 19:03時点における版
38行目:		38行目:

	<syntaxhighlight lang="JavaScript" line start="1">		<syntaxhighlight lang="JavaScript" line start="1">
			<script src="https://wiki.yo-net.jp/vexflow/build/cjs/vexflow.js"></script>
	<div id="yonet202302_Output01"></div>		<div id="yonet202302_Output01"></div>
	<script>		<script>

Yo-net: /* 応用2 */

2023-02-03T15:34:37Z

応用2

← 古い版		2023年2月4日 (土) 00:34時点における版
250行目:		250行目:
	</script>		</script>
	</syntaxhighlight>		</syntaxhighlight>

			注目すべきは、20行目、21行目です。Factoryオブジェクトから生成された変数 f のメンバ関数 .ClefNote関数は、臨時の音部記号を音符のように描くことができる手法です。大きさの options: {size: ' '} には、default or smallが選択できます。臨時の時は通常より小さい形の音部記号をよく使うので、ここでsmallを指定するのは一般的です。type: は音部記号を描くaddClefのときの第一変数に対応する値です。


			.StaveNoteも音符の描き方を覚えないと使えないですが、その中でClefというキーの値を設定できるようになっていて、これを使うと、StaveNoteで指定する音符自体も音部記号に沿った部分に音符が描かれます。指定しないで音符を描くと、常にデフォルトのト音記号が適用されている調子で音符の位置が描画されます。なので、同じc/4でもClefでbassつまりヘ音記号が指定されていれば、c/4は、五線譜の一番上の更に一つ上の位置がc/4にあたるので、そこに音符が描かれます。


			いまは、そんなこと言ってたなぁ程度まで理解しておけばよいでしょう。実際に臨時音部記号を使うときにここに戻ってきたころには、理解できるようになっているでしょう。

Yo-net: /* 応用2 */

2023-02-03T15:20:36Z

応用2

@@ 178行目: / 178行目: @@
 == '''応用2''' ==
 　音符を描くのと同じ仕組みの中に音部記号を指定することができます。音符に対しての音部記号を与えると、その音部記号に従った音の高さに音符が描画されます。音符の中に描く音部記号と組み合わせて使うとよいかもしれません。そのような臨時の音部記号はまれにクラシックの楽曲では登場します。作曲者は手を使わないための発想が豊かで頭が良いかもしれない。
@@ 212行目: / 215行目: @@
 })();
 </yjavascript>
 [[VexFlow 使い方]]に戻る。

Yo-net: /* 応用2 */

2023-02-03T15:15:00Z

応用2

← 古い版		2023年2月4日 (土) 00:15時点における版
208行目:		208行目:
	//Formatter.FormatAndDraw(ctx, stave1, notesBar1);		//Formatter.FormatAndDraw(ctx, stave1, notesBar1);
	const voice = f.Voice({ time: '4/4' }).addTickables(notesBar1);		const voice = f.Voice({ time: '4/4' }).addTickables(notesBar1);
	f.Formatter().joinVoices([voice]).formatToStave([voice], stave1).FormatAndDraw(ctx, stave1, notesBar1);		f.Formatter().joinVoices([voice]).formatToStave([voice], stave1);
			Formatter.FormatAndDraw(ctx, stave1, notesBar1);
	})();		})();
	</yjavascript>		</yjavascript>

Yo-net: /* 応用2 */

2023-02-03T15:14:07Z

応用2

← 古い版		2023年2月4日 (土) 00:14時点における版
208行目:		208行目:
	//Formatter.FormatAndDraw(ctx, stave1, notesBar1);		//Formatter.FormatAndDraw(ctx, stave1, notesBar1);
	const voice = f.Voice({ time: '4/4' }).addTickables(notesBar1);		const voice = f.Voice({ time: '4/4' }).addTickables(notesBar1);
	f.Formatter().joinVoices([voice]).formatToStave([voice], stave1);		f.Formatter().joinVoices([voice]).formatToStave([voice], stave1).FormatAndDraw(ctx, stave1, notesBar1);
	f.~~draw~~();
	})();		})();
	</yjavascript>		</yjavascript>

Yo-net: /* 応用2 */

2023-02-03T14:37:24Z

応用2

← 古い版		2023年2月3日 (金) 23:37時点における版
206行目:		206行目:
	f.StaveNote({ keys: ['f/4'], duration: '4'}),		f.StaveNote({ keys: ['f/4'], duration: '4'}),
	];		];
	Formatter.FormatAndDraw(ctx, stave1, notesBar1);		//Formatter.FormatAndDraw(ctx, stave1, notesBar1);
	//const voice = f.Voice({ time: '4/4' }).addTickables(notesBar1);		const voice = f.Voice({ time: '4/4' }).addTickables(notesBar1);
	//f.Formatter().joinVoices([voice]).formatToStave([voice], stave1);		f.Formatter().joinVoices([voice]).formatToStave([voice], stave1);
	//f.draw();		f.draw();
	})();		})();
	</yjavascript>		</yjavascript>

Yo-net: /* 応用2 */

2023-02-03T14:36:57Z

応用2

← 古い版		2023年2月3日 (金) 23:36時点における版
191行目:		191行目:
	Renderer,		Renderer,
	Stem,		Stem,
			Voice,
	} = Vex.Flow;		} = Vex.Flow;

Yo-net: /* 応用2 */

2023-02-03T14:22:55Z

応用2

← 古い版		2023年2月3日 (金) 23:22時点における版
205行目:		205行目:
	f.StaveNote({ keys: ['f/4'], duration: '4'}),		f.StaveNote({ keys: ['f/4'], duration: '4'}),
	];		];
	//Formatter.FormatAndDraw(ctx, stave1, notesBar1);		Formatter.FormatAndDraw(ctx, stave1, notesBar1);
	const voice = f.Voice({ time: '4/4' }).addTickables(notesBar1);		//const voice = f.Voice({ time: '4/4' }).addTickables(notesBar1);
	f.Formatter().joinVoices([voice]).formatToStave([voice], stave1);		//f.Formatter().joinVoices([voice]).formatToStave([voice], stave1);
	f.draw();		//f.draw();
	})();		})();
	</yjavascript>		</yjavascript>

Yo-net: /* 応用2 */

2023-02-03T14:22:18Z

応用2

← 古い版		2023年2月3日 (金) 23:22時点における版
205行目:		205行目:
	f.StaveNote({ keys: ['f/4'], duration: '4'}),		f.StaveNote({ keys: ['f/4'], duration: '4'}),
	];		];
	Formatter.FormatAndDraw(ctx, stave1, notesBar1);		//Formatter.FormatAndDraw(ctx, stave1, notesBar1);
	//const voice = f.Voice({ time: '4/4' }).addTickables(notesBar1);		const voice = f.Voice({ time: '4/4' }).addTickables(notesBar1);
	//f.Formatter().joinVoices([voice]).formatToStave([voice], stave1);		f.Formatter().joinVoices([voice]).formatToStave([voice], stave1);
	//f.draw();		f.draw();
	})();		})();
	</yjavascript>		</yjavascript>

Yo-net: /* 応用2 */

2023-02-03T14:21:25Z

応用2

← 古い版		2023年2月3日 (金) 23:21時点における版
199行目:		199行目:

	const notesBar1 = [		const notesBar1 = [
	f.StaveNote({ keys: ['c/4'], duration: '4'~~, stem_direction: 1~~}),		f.StaveNote({ keys: ['c/4'], duration: '4'}),
	f.ClefNote({ type: 'bass', options: { size: 'small' } }),		f.ClefNote({ type: 'bass', options: { size: 'small' } }),
	f.StaveNote({ keys: ['c/4'], duration: '4'~~, stem_direction: 1~~, clef: 'bass'}),		f.StaveNote({ keys: ['c/4'], duration: '4', clef: 'bass'}),
	f.StaveNote({ keys: ['e/4'], duration: '4'~~, stem_direction: 1~~ }),		f.StaveNote({ keys: ['e/4'], duration: '4'}),
	f.StaveNote({ keys: ['f/4'], duration: '4'~~, stem_direction: 1~~ }),		f.StaveNote({ keys: ['f/4'], duration: '4'}),
	];		];
	//Formatter.FormatAndDraw(ctx, stave1, notesBar1);		Formatter.FormatAndDraw(ctx, stave1, notesBar1);
	const voice = f.Voice({ time: '4/4' }).addTickables(notesBar1);		//const voice = f.Voice({ time: '4/4' }).addTickables(notesBar1);
	f.Formatter().joinVoices([voice]).formatToStave([voice], stave1);		//f.Formatter().joinVoices([voice]).formatToStave([voice], stave1);
	f.draw();		//f.draw();
	})();		})();
	</yjavascript>		</yjavascript>