「VexFlow タブ譜 コードフォーム」の版間の差分
490行目: | 490行目: | ||
VocalSt3.draw(); | VocalSt3.draw(); | ||
const VocalSt4 = new Stave(VocalSt3.width + VocalSt3.x, VocalSt1.y, nStaveWidth).setContext(ctx); | const VocalSt4 = new VF.Stave(VocalSt3.width + VocalSt3.x, VocalSt1.y, nStaveWidth).setContext(ctx); | ||
VocalSt4.setMeasure(4); | VocalSt4.setMeasure(4); | ||
VocalSt4.draw(); | VocalSt4.draw(); | ||
const Guitar1St1 = new Stave(VocalSt1.x, VocalSt1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx); | const Guitar1St1 = new VF.Stave(VocalSt1.x, VocalSt1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx); | ||
Guitar1St1.addClef("treble").setContext(ctx); | Guitar1St1.addClef("treble").setContext(ctx); | ||
Guitar1St1.addTimeSignature('4/4').setContext(ctx); | Guitar1St1.addTimeSignature('4/4').setContext(ctx); | ||
534行目: | 534行目: | ||
]; | ]; | ||
var Guitar1_St1_Voice_1 = new | var Guitar1_St1_Voice_1 = new VF.Voice({ num_beats: 4, beat_value: 4 }); | ||
Guitar1_St1_Voice_1.setStrict(true); | Guitar1_St1_Voice_1.setStrict(true); | ||
Guitar1_St1_1Voice_1.addTickables(Guitar1_St1_notes_1); | Guitar1_St1_1Voice_1.addTickables(Guitar1_St1_notes_1); | ||
var Guitar1_St1_Voice_2 = new | var Guitar1_St1_Voice_2 = new VF.Voice({ num_beats: 4, beat_value: 4 }); | ||
Guitar1_St1_Voice_2.setStrict(true); | Guitar1_St1_Voice_2.setStrict(true); | ||
Guitar1_St1_Voice_2.addTickables(Guitar1_St1_notes_2); | Guitar1_St1_Voice_2.addTickables(Guitar1_St1_notes_2); | ||
var formatterGuitar1_St1 = new | var formatterGuitar1_St1 = new VF.Formatter().joinVoices([Guitar1_St1_Voice_1, Guitar1_St1_Voice_2]); | ||
formatterGuitar1_St1.format([Guitar1_St1_Voice_1, Guitar1_St1_Voice_2], nStaveWidth - 20 - 10); | formatterGuitar1_St1.format([Guitar1_St1_Voice_1, Guitar1_St1_Voice_2], nStaveWidth - 20 - 10); | ||
Guitar1_St1_Voice_1.draw(ctx, Guitar1St1); | Guitar1_St1_Voice_1.draw(ctx, Guitar1St1); |
2024年4月11日 (木) 22:54時点における版
VexFlow 使い方に戻る。
概要
コードフォームをタブ譜に載せるという手法もありまして、コードが一小節で2個種類くらいしか無いような曲で見られる描画方法です。その場合、五線譜には同一コード用の音符を使ってリズムだけをハタ棒とハタで表現します。
タブ譜 コードフォーム
コードは以下のとおりです。
<div id="yonet202403Mid_Output01"></div>
<script>
</script>
VexFlow 使い方に戻る。