「VexFlow タブ譜 コードフォーム」の版間の差分
642行目: | 642行目: | ||
const Guitar1St3 = new Stave(Guitar1St2.width + Guitar1St2.x, Guitar1St1.y, nStaveWidth).setContext(ctx); | const Guitar1St3 = new Stave(Guitar1St2.width + Guitar1St2.x, Guitar1St1.y, nStaveWidth).setContext(ctx); | ||
Guitar1St3.draw(); | Guitar1St3.draw(); | ||
const Guitar1_St3_notes_1 = [ | |||
new VF.StaveNote({ keys: ["b/4"], duration: "4" }), | |||
new VF.StaveNote({ keys: ["b/4"], duration: "8" }), | |||
new VF.StaveNote({ keys: ["b/4"], duration: "8" }), | |||
new VF.StaveNote({ keys: ["b/4"], duration: "8" }), | |||
new VF.StaveNote({ keys: ["b/4"], duration: "8" }), | |||
new VF.StaveNote({ keys: ["b/4"], duration: "8" }), | |||
new VF.StaveNote({ keys: ["b/4"], duration: "8" }), | |||
]; | |||
const Guitar1_St3_notes_2 = [ | |||
new VF.GhostNote({ keys: ["f/4"], duration: "16"}), | |||
new VF.GhostNote({ keys: ["f/4"], duration: "16"}), | |||
new VF.GhostNote({ keys: ["f/4"], duration: "16"}), | |||
new VF.GhostNote({ keys: ["f/4"], duration: "16"}), | |||
new VF.GhostNote({ keys: ["f/4"], duration: "16"}), | |||
new VF.GhostNote({ keys: ["f/4"], duration: "16"}), | |||
new VF.GhostNote({ keys: ["f/4"], duration: "16"}), | |||
new VF.GhostNote({ keys: ["f/4"], duration: "16"}), | |||
new VF.GhostNote({ keys: ["f/4"], duration: "16"}), | |||
new VF.GhostNote({ keys: ["f/4"], duration: "16"}), | |||
new VF.GhostNote({ keys: ["f/4"], duration: "16"}), | |||
new VF.GhostNote({ keys: ["f/4"], duration: "16"}), | |||
new VF.GhostNote({ keys: ["f/4"], duration: "16"}), | |||
new VF.GhostNote({ keys: ["f/4"], duration: "16"}), | |||
new VF.GhostNote({ keys: ["f/4"], duration: "16"}), | |||
new VF.GhostNote({ keys: ["f/4"], duration: "16"}), | |||
]; | |||
UniqueIds = getUniqueNoteheadIds(Guitar1_St3_notes_1, [0, 1, 2, 3, 4, 5, 6]); | |||
allUniqueIds = updateAllUniqueIds(UniqueIds); | |||
const Guitar1_St3_beam_1 = new VF.Beam([Guitar1_St3_notes_1[1], Guitar1_St3_notes_1[2]]); | |||
const Guitar1_St3_beam_2 = new VF.Beam([ | |||
Guitar1_St3_notes_1[3], Guitar1_St3_notes_1[4], Guitar1_St3_notes_1[5], Guitar1_St3_notes_1[6] | |||
]); | |||
var Guitar1_St3_Voice_1 = new VF.Voice({ num_beats: 4, beat_value: 4 }); | |||
Guitar1_St3_Voice_1.setStrict(true); | |||
Guitar1_St3_Voice_1.addTickables(Guitar1_St3_notes_1); | |||
var Guitar1_St3_Voice_2 = new VF.Voice({ num_beats: 4, beat_value: 4 }); | |||
Guitar1_St3_Voice_2.setStrict(true); | |||
Guitar1_St3_Voice_2.addTickables(Guitar1_St3_notes_2); | |||
var formatterGuitar1_St3 = new VF.Formatter().joinVoices([Guitar1_St3_Voice_1, Guitar1_St3_Voice_2]); | |||
formatterGuitar1_St3.format([Guitar1_St3_Voice_1, Guitar1_St3_Voice_2], nStaveWidth - 20 - 10); | |||
Guitar1_St3_Voice_1.draw(ctx, Guitar1St3); | |||
Guitar1_St3_Voice_2.draw(ctx, Guitar1St3); | |||
Guitar1_St3_beam_1.setContext(ctx).draw(); | |||
Guitar1_St3_beam_2.setContext(ctx).draw(); | |||
shiftGuitar1_3st= addShift( | |||
Guitar1_St3_notes_1, | |||
[0, 1, 2, 3, 4, 5, 6], | |||
[3, 3, 3, 3, 3, 3, 3.8] | |||
); | |||
const Guitar1St4 = new Stave(Guitar1St3.width + Guitar1St3.x, Guitar1St1.y, nStaveWidth).setContext(ctx); | const Guitar1St4 = new Stave(Guitar1St3.width + Guitar1St3.x, Guitar1St1.y, nStaveWidth).setContext(ctx); |
2024年4月12日 (金) 00:36時点における版
VexFlow 使い方に戻る。
概要
コードフォームをタブ譜に載せるという手法もありまして、コードが一小節で2種類くらいしか無いような曲で見られる描画方法です。その場合、五線譜には同一コード用の音符を使ってリズムだけをハタ棒とハタで表現します。管理人は左利きなので、左利き用のコードフォームを表示してみました。人生初くらいだな。左利き向けのコードフォームタブ譜なんて見たことなかった。もちろん、作成したフォントには右利き向けのグリフも登録してあります。あとちょっとで完成しそうですね。フォントファイル。もうちょっとで配布できるようになる。駆け抜けたい。でもこの先まだまだ難しいタブ譜作成技術の紹介が残っています。手ごわい。アーム操作の曲線とかどうするべって感じ。VexFlowも不完全だし、機能追加にも疲れてきたっすね。
タブ譜 コードフォーム
コードは以下のとおりです。
<div id="yonet202403Mid_Output01"></div>
<script>
</script>
VexFlow 使い方に戻る。