VexFlow 音符 - 版の履歴

Yo-net: /* 音符の種類 */

2023-02-10T10:05:14Z

音符の種類

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

	<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>
140行目:		141行目:
	*stem_direction		*stem_direction
	:　音符に旗が付く場合、1で上向き -1で下向きにできます。		:　音符に旗が付く場合、1で上向き -1で下向きにできます。


	== '''和音''' ==		== '''和音''' ==

Yo-net: /* 臨時記号付き音符 */

2023-02-10T07:54:26Z

臨時記号付き音符

← 古い版		2023年2月10日 (金) 16:54時点における版
549行目:		549行目:

	Accidentalオブジェクトを利用しますので、11行目でAccidentalという要素を追加しました。22行目で実際にオブジェクトを生成しています。New StaveNote(…).addModifier(new Accidental('b'), 1) という配列要素にすることで、臨時記号のついた音符になります。addModifier関数で音符に付加する情報を指定できて、addModifier関数の第一引数にはAccidentalオブジェクトを生成したものを付与することができます。そのうちのひとつとして、Accidental関数の引数に b を与えるとフラットになります。addModifier関数の第二引数には何番目の音程に対して適用するものか指定します。		Accidentalオブジェクトを利用しますので、11行目でAccidentalという要素を追加しました。22行目で実際にオブジェクトを生成しています。New StaveNote(…).addModifier(new Accidental('b'), 1) という配列要素にすることで、臨時記号のついた音符になります。addModifier関数で音符に付加する情報を指定できて、addModifier関数の第一引数にはAccidentalオブジェクトを生成したものを付与することができます。そのうちのひとつとして、Accidental関数の引数に b を与えるとフラットになります。addModifier関数の第二引数には何番目の音程に対して適用するものか指定します。


			例では以下のようなものを定義しました。


			*11行目 b で1小節目の全音符の和音構成要素1にフラット(※構成要素番号は0から始まります。)
			*29行目 n で2小節目の1拍目2分音符の和音構成要素1にナチュラル
			*29行目 # で2小節目の3拍目4分音符の和音構成要素2にシャープ
			*29行目 ## で2小節目の4拍目4分音符の和音構成要素2にダブルシャープ


			調号のところで、使った、切り替え記号種類の全てが使えます。微分音使うことあるのかなぁ。見たことないけど。



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

Yo-net: /* 臨時記号付き音符 */

2023-02-10T07:44:21Z

臨時記号付き音符

← 古い版		2023年2月10日 (金) 16:44時点における版
486行目:		486行目:


	<syntaxhighlight lang="JavaScript" line start="1" highlight="11, 29, 31, 33">		<syntaxhighlight lang="JavaScript" line start="1" highlight="11, 22, 29, 31, 33">
	<div id="yonet202302_Output04"></div>		<div id="yonet202302_Output04"></div>
	<script>		<script>
548行目:		548行目:
	</syntaxhighlight>		</syntaxhighlight>

			Accidentalオブジェクトを利用しますので、11行目でAccidentalという要素を追加しました。22行目で実際にオブジェクトを生成しています。New StaveNote(…).addModifier(new Accidental('b'), 1) という配列要素にすることで、臨時記号のついた音符になります。addModifier関数で音符に付加する情報を指定できて、addModifier関数の第一引数にはAccidentalオブジェクトを生成したものを付与することができます。そのうちのひとつとして、Accidental関数の引数に b を与えるとフラットになります。addModifier関数の第二引数には何番目の音程に対して適用するものか指定します。



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

Yo-net: /* 臨時記号付き音符 */

2023-02-10T07:35:23Z

臨時記号付き音符

← 古い版		2023年2月10日 (金) 16:35時点における版
486行目:		486行目:


	<syntaxhighlight lang="JavaScript" line start="1" highlight="11">		<syntaxhighlight lang="JavaScript" line start="1" highlight="11, 29, 31, 33">
	<div id="yonet202302_Output04"></div>		<div id="yonet202302_Output04"></div>
	<script>		<script>

Yo-net: /* 臨時記号付き音符 */

2023-02-10T07:33:01Z

臨時記号付き音符

← 古い版		2023年2月10日 (金) 16:33時点における版
486行目:		486行目:


	<syntaxhighlight lang="JavaScript" line start="1">		<syntaxhighlight lang="JavaScript" line start="1" highlight="11">
	<div id="yonet202302_Output04"></div>		<div id="yonet202302_Output04"></div>
	<script>		<script>

Yo-net: /* 臨時記号付き音符 */

2023-02-10T07:31:56Z

臨時記号付き音符

@@ 487行目: / 487行目: @@
 <syntaxhighlight lang="JavaScript" line start="1">
 </syntaxhighlight>
 [[VexFlow 使い方]]に戻る。

Yo-net: /* 臨時記号付き音符 */

2023-02-10T07:27:42Z

臨時記号付き音符

← 古い版		2023年2月10日 (金) 16:27時点における版
435行目:		435行目:
	Voice,		Voice,
	Barline,		Barline,
			Accidental,
	} = Vex.Flow;		} = Vex.Flow;

Yo-net: /* 臨時記号付き音符 */

2023-02-10T07:26:42Z

臨時記号付き音符

← 古い版		2023年2月10日 (金) 16:26時点における版
444行目:		444行目:

	const notes1 = [		const notes1 = [
	new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "1" }),		new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "1" })
			.addModifier(new Accidental('b'), 1),
	];		];
	Formatter.FormatAndDraw(ctx, stave1, notes1);		Formatter.FormatAndDraw(ctx, stave1, notes1);
450行目:		451行目:
	const stave2 = new Stave(360, 50, 350).setContext(ctx).draw();		const stave2 = new Stave(360, 50, 350).setContext(ctx).draw();
	const notes2 = [		const notes2 = [
	new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "2" }),		new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "2" })
	new StaveNote({ keys: ["d/4", "f/4", "a/4"], duration: "4" }),		.addModifier(new Accidental('n'), 1),
	new StaveNote({ keys: ["e/4", "g/4", "b/4"], duration: "4" }),		new StaveNote({ keys: ["d/4", "f/4", "a/4"], duration: "4" })
			.addModifier(new Accidental('#'), 2),
			new StaveNote({ keys: ["e/4", "g/4", "b/4"], duration: "4" })
			.addModifier(new Accidental('##'), 2),
	];		];
	Formatter.FormatAndDraw(ctx, stave2, notes2);		Formatter.FormatAndDraw(ctx, stave2, notes2);

Yo-net: /* 付点音符 */

2023-02-10T07:18:27Z

付点音符

← 古い版		2023年2月10日 (金) 16:18時点における版
413行目:		413行目:
	</syntaxhighlight>		</syntaxhighlight>

	付点音符にするには、Dot.buildAndAttach([new StaveNote({ keys: ["c/4"], duration: "8d" }), {all: true});のようにする必要があります。durationには末尾にdを付けます。このdは付点をつけるという部分には影響が発生しませんが、Voiceという概念には影響があって、音符の間隔の描画に変化が発生します。直接見た目が変わるわけではないので、 d を付け忘れがちになるかもしれませんが、d をつけましょう。非常に長い関数表記になるので、JavaScriptの関数機能を使って、簡単に定義できるように工夫しています。Dot.buildAndAttach関数では、第一引数で指定した引数の音符に対して、第二引数では、何番目の音程に付点をつけるかという設定ができるようになっています。{all:true}というオブジェクトを与える場合と、[0~~,1,2]のように0番目から2番目の和音構成要素に対して付点をつけるというような処理にすることもできるようになっています。~~		付点音符にするには、Dot.buildAndAttach([new StaveNote({ keys: ["c/4"], duration: "8d" }), {all: true});のようにする必要があります。durationには末尾にdを付けます。このdは付点をつけるという部分には影響が発生しませんが、Voiceという概念には影響があって、音符の間隔の描画に変化が発生します。直接見た目が変わるわけではないので、 d を付け忘れがちになるかもしれませんが、d をつけましょう。非常に長い関数表記になるので、JavaScriptの関数機能を使って、簡単に定義できるように工夫しています。Dot.buildAndAttach関数では、第一引数で指定した引数の音符に対して、第二引数では、何番目の音程に付点をつけるかという設定ができるようになっています。{all:true}というオブジェクトを与える場合と、{index: 0}のように0番目の和音構成要素に対して付点をつけるというような処理にすることもできるようになっています。和音全てのindexの番号を指定していく必要があり、何度もDot.buildAndAttach関数を呼び出す必要があります。自作関数を使わない場合の手数の多さに気づかされると思います。

Yo-net: /* 付点音符 */

2023-02-10T07:14:27Z

付点音符

← 古い版		2023年2月10日 (金) 16:14時点における版
338行目:		338行目:
	})();		})();
	</yjavascript>		</yjavascript>


	<syntaxhighlight lang="JavaScript" line start="1">		<syntaxhighlight lang="JavaScript" line start="1">
413行目:		412行目:
	</script>		</script>
	</syntaxhighlight>		</syntaxhighlight>

			付点音符にするには、Dot.buildAndAttach([new StaveNote({ keys: ["c/4"], duration: "8d" }), {all: true});のようにする必要があります。durationには末尾にdを付けます。このdは付点をつけるという部分には影響が発生しませんが、Voiceという概念には影響があって、音符の間隔の描画に変化が発生します。直接見た目が変わるわけではないので、 d を付け忘れがちになるかもしれませんが、d をつけましょう。非常に長い関数表記になるので、JavaScriptの関数機能を使って、簡単に定義できるように工夫しています。Dot.buildAndAttach関数では、第一引数で指定した引数の音符に対して、第二引数では、何番目の音程に付点をつけるかという設定ができるようになっています。{all:true}というオブジェクトを与える場合と、[0,1,2]のように0番目から2番目の和音構成要素に対して付点をつけるというような処理にすることもできるようになっています。


			したがって、自作関数dottedも、dotted(new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "2" }),[0,1,2])のように第二引数を指定することができるようになっています。