「VexFlow タブ譜 ミュート」の版間の差分
(同じ利用者による、間の34版が非表示) | |||
24行目: | 24行目: | ||
} | } | ||
var VF = Vex.Flow; | var VF = Vex.Flow; | ||
const | |||
const VocalInst = new Position(); | |||
const Guitar1Inst = new Position(); | const Guitar1Inst = new Position(); | ||
const Guitar2Inst = new Position(); | |||
const BaseInst = new Position(); | |||
const DrumInst = new Position(); | |||
const PercInst = new Position(); | |||
const Guitar1tab_1st_tabmark = new Position(); | |||
const Guitar1tab_1st = new Position(); | const Guitar1tab_1st = new Position(); | ||
32行目: | 39行目: | ||
const Guitar1tab_4st = new Position(); | const Guitar1tab_4st = new Position(); | ||
const | const Guitar2tab_1st_tabmark = new Position(); | ||
const Guitar2tab_1st = new Position(); | const Guitar2tab_1st = new Position(); | ||
40行目: | 46行目: | ||
const Guitar2tab_4st = new Position(); | const Guitar2tab_4st = new Position(); | ||
const | const Basetab_1st_tabmark = new Position(); | ||
var StaveBase1; | var StaveBase1; | ||
50行目: | 52行目: | ||
var StaveBase3; | var StaveBase3; | ||
var StaveBase4; | var StaveBase4; | ||
var shiftGuitar1_1st; | var shiftGuitar1_1st; | ||
76行目: | 73行目: | ||
var shiftGuitar2tab_4st; | var shiftGuitar2tab_4st; | ||
var | var shiftDrum_1st; | ||
var | var shiftDrum_2st; | ||
var shiftDrum_3st; | |||
var shiftDrum_4st; | |||
var shiftPerc_1st; | |||
var shiftPerc_2st; | |||
var shiftPerc_3st; | |||
var shiftPerc_4st; | |||
function insertBaseEndBarPathToSVG(Stave) { | function insertBaseEndBarPathToSVG(Stave) { | ||
491行目: | 495行目: | ||
Vocal_St1.draw(); | Vocal_St1.draw(); | ||
VocalInst.x = Vocal_St1.x - 30; | |||
VocalInst.y = Vocal_St1.y + 90; | |||
const Vocal_St2 = f.Stave({ x: Vocal_St1.width + Vocal_St1.x, y: Vocal_St1.y, width: nStaveWidth }); | const Vocal_St2 = f.Stave({ x: Vocal_St1.width + Vocal_St1.x, y: Vocal_St1.y, width: nStaveWidth }); | ||
506行目: | 510行目: | ||
Vocal_St4.draw(); | Vocal_St4.draw(); | ||
const Guitar1_St1 = new VF.Stave(Vocal_St1.x, Vocal_St1.y + | const Guitar1_St1 = new VF.Stave(Vocal_St1.x, Vocal_St1.y + 150, nHeadMargin + nStaveWidth).setContext(ctx); | ||
Guitar1_St1.addClef("treble").setContext(ctx); | Guitar1_St1.addClef("treble").setContext(ctx); | ||
Guitar1_St1.addTimeSignature('4/4').setContext(ctx); | Guitar1_St1.addTimeSignature('4/4').setContext(ctx); | ||
Guitar1_St1.addKeySignature('D').setContext(ctx); | Guitar1_St1.addKeySignature('D').setContext(ctx); | ||
Guitar1_St1.draw(); | Guitar1_St1.draw(); | ||
const Guitar1_St1_notes_1 = [ | |||
new VF.StaveNote({ keys: ["b/4"], duration: "2r" }), | |||
new VF.StaveNote({ keys: ["b/4"], duration: "4r" }), | |||
new VF.StaveNote({ keys: ["b/4"], duration: "8r" }), | |||
new VF.StaveNote({ keys: ["c/5"], duration: "16", stem_direction: -1 }), | |||
new VF.StaveNote({ keys: ["c/5"], duration: "16", stem_direction: -1 }), | |||
]; | |||
const Guitar1_St1_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_St1_notes_1, [3, 4]); | |||
allUniqueIds = updateAllUniqueIds(UniqueIds); | |||
const Guitar1_St1_beam_1 = new VF.Beam([Guitar1_St1_notes_1[3], Guitar1_St1_notes_1[4]]); | |||
var Guitar1_St1_Voice_1 = new VF.Voice({ num_beats: 4, beat_value: 4 }); | |||
Guitar1_St1_Voice_1.setStrict(true); | |||
Guitar1_St1_Voice_1.addTickables(Guitar1_St1_notes_1); | |||
var Guitar1_St1_Voice_2 = new VF.Voice({ num_beats: 4, beat_value: 4 }); | |||
Guitar1_St1_Voice_2.setStrict(true); | |||
Guitar1_St1_Voice_2.addTickables(Guitar1_St1_notes_2); | |||
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 - 40 - 10); | |||
Guitar1_St1_Voice_1.draw(ctx, Guitar1_St1); | |||
Guitar1_St1_Voice_2.draw(ctx, Guitar1_St1); | |||
Guitar1_St1_beam_1.setContext(ctx).draw(); | |||
shiftGuitar1_1st= addShift( | |||
Guitar1_St1_notes_1, | |||
[ 3, 4, 3], | |||
[1.8, 1.8, -1] | |||
); | |||
const Guitar1_St2 = new VF.Stave(Guitar1_St1.width + Guitar1_St1.x, Guitar1_St1.y, nStaveWidth).setContext(ctx); | const Guitar1_St2 = new VF.Stave(Guitar1_St1.width + Guitar1_St1.x, Guitar1_St1.y, nStaveWidth).setContext(ctx); | ||
521行目: | 584行目: | ||
Guitar1_St4.draw(); | Guitar1_St4.draw(); | ||
const | const Guitar1_Tab_St1 = new VF.Stave(Guitar1_St1.x, Guitar1_St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx); | ||
Guitar1_Tab_St1.draw(); | |||
Guitar1tab_1st_tabmark.x = Guitar1_Tab_St1.x; | |||
Guitar1tab_1st_tabmark.y = Guitar1_Tab_St1.y; | |||
var Guitar1Connector_St1_L = new VF.StaveConnector(Guitar1_St1, Guitar1_Tab_St1); | |||
Guitar1Connector_St1_L.setType(VF.StaveConnector.type.BRACKET); | |||
Guitar1Connector_St1_L.setContext(ctx); | |||
Guitar1Connector_St1_L.draw(); | |||
Guitar1Inst.x = Vocal_St1.x - 30; | |||
Guitar1Inst.y = Guitar1_St1.y + ((Guitar1_Tab_St1.y - Guitar1_St1.y) / 2) + 90; | |||
const Guitar1_Tab_St1_1 = new VF.Stave(Guitar1_Tab_St1.x + nHeadMargin + 20, Guitar1_Tab_St1.y, 0).setContext(ctx); | |||
Guitar1_Tab_St1_1.setBegBarType(VF.Barline.type.NONE); | |||
Guitar1_Tab_St1_1.setEndBarType(VF.Barline.type.NONE); | |||
Guitar1_Tab_St1_1.draw(); | |||
Guitar1tab_1st.x = Guitar1_Tab_St1_1.x | |||
Guitar1tab_1st.y = Guitar1_Tab_St1_1.y | |||
const Guitar1_Tab_St1_notes_1 = [ | |||
new VF.StaveNote({ keys: ["f/5"], duration: "2r" }), | |||
new VF.StaveNote({ keys: ["c/5"], duration: "4r" }), | |||
new VF.StaveNote({ keys: ["c/5"], duration: "8r" }), | |||
new VF.StaveNote({ keys: ["e/5"], duration: "16", stem_direction: -1 }), | |||
new VF.StaveNote({ keys: ["e/5"], duration: "16", stem_direction: -1 }), | |||
]; | |||
const Guitar1_Tab_St1_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_Tab_St1_notes_1, [3, 4]); | |||
allUniqueIds = updateAllUniqueIds(UniqueIds); | |||
const Guitar1_Tab_St1_beam_1 = new VF.Beam([Guitar1_Tab_St1_notes_1[3], Guitar1_Tab_St1_notes_1[4]]); | |||
var Guitar1_Tab_St1_Voice_1 = new VF.Voice({ num_beats: 4, beat_value: 4 }); | |||
Guitar1_Tab_St1_Voice_1.setStrict(true); | |||
Guitar1_Tab_St1_Voice_1.addTickables(Guitar1_Tab_St1_notes_1); | |||
var Guitar1_Tab_St1_Voice_2 = new VF.Voice({ num_beats: 4, beat_value: 4 }); | |||
Guitar1_Tab_St1_Voice_2.setStrict(true); | |||
Guitar1_Tab_St1_Voice_2.addTickables(Guitar1_Tab_St1_notes_2); | |||
var formatterGuitar1_Tab_St1 = new VF.Formatter().joinVoices([Guitar1_Tab_St1_Voice_1, Guitar1_Tab_St1_Voice_2]); | |||
formatterGuitar1_Tab_St1.format([Guitar1_Tab_St1_Voice_1, Guitar1_Tab_St1_Voice_2], nStaveWidth - 40 - 10); | |||
Guitar1_Tab_St1_Voice_1.draw(ctx, Guitar1_Tab_St1_1); | |||
Guitar1_Tab_St1_Voice_2.draw(ctx, Guitar1_Tab_St1_1); | |||
Guitar1_Tab_St1_beam_1.setContext(ctx).draw(); | |||
shiftGuitar1tab_1st= addShift( | |||
Guitar1_Tab_St1_notes_1, | |||
[ 3, 4, 3], | |||
[0.8, 0.8, -2] | |||
); | |||
const Guitar1_Tab_St2 = new VF.Stave(Guitar1_Tab_St1.width + Guitar1_Tab_St1.x, Guitar1_Tab_St1.y, nStaveWidth).setContext(ctx); | |||
Guitar1_Tab_St2.draw(); | |||
Guitar1tab_2st.x = Guitar1_Tab_St2.x | |||
Guitar1tab_2st.y = Guitar1_Tab_St2.y | |||
var Guitar1Connector_St2_L = new VF.StaveConnector(Guitar1_St2, Guitar1_Tab_St2); | |||
Guitar1Connector_St2_L.setType(VF.StaveConnector.type.SINGLE); | |||
Guitar1Connector_St2_L.setContext(ctx); | |||
Guitar1Connector_St2_L.draw(); | |||
const Guitar1_Tab_St3 = new VF.Stave(Guitar1_Tab_St2.width + Guitar1_Tab_St2.x, Guitar1_Tab_St1.y, nStaveWidth).setContext(ctx); | |||
Guitar1_Tab_St3.draw(); | |||
Guitar1tab_3st.x = Guitar1_Tab_St3.x | |||
Guitar1tab_3st.y = Guitar1_Tab_St3.y | |||
var Guitar1Connector_St3_L = new VF.StaveConnector(Guitar1_St3, Guitar1_Tab_St3); | |||
Guitar1Connector_St3_L.setType(VF.StaveConnector.type.SINGLE); | |||
Guitar1Connector_St3_L.setContext(ctx); | |||
Guitar1Connector_St3_L.draw(); | |||
const Guitar1_Tab_St4 = new VF.Stave(Guitar1_Tab_St3.width + Guitar1_Tab_St3.x, Guitar1_Tab_St1.y, nStaveWidth).setContext(ctx); | |||
Guitar1_Tab_St4.draw(); | |||
Guitar1tab_4st.x = Guitar1_Tab_St4.x | |||
Guitar1tab_4st.y = Guitar1_Tab_St4.y | |||
var Guitar1Connector_St4_L = new VF.StaveConnector(Guitar1_St4, Guitar1_Tab_St4); | |||
Guitar1Connector_St4_L.setType(VF.StaveConnector.type.SINGLE); | |||
Guitar1Connector_St4_L.setContext(ctx); | |||
Guitar1Connector_St4_L.draw(); | |||
var Guitar1Connector_St4_R = new VF.StaveConnector(Guitar1_St4, Guitar1_Tab_St4); | |||
Guitar1Connector_St4_R.setType(VF.StaveConnector.type.SINGLE_RIGHT); | |||
Guitar1Connector_St4_R.setContext(ctx); | |||
Guitar1Connector_St4_R.draw(); | |||
const Guitar1_vTab_St1 = new VF.Stave(Guitar1_St1.x, Guitar1_St1.y + 110, nHeadMargin + nStaveWidth).setContext(ctx); | |||
for (var i = 0; i < 5; i++) { | |||
if (i == 0) continue; | |||
Guitar1_vTab_St1.setConfigForLine(i, {visible: false} ); | |||
} | |||
Guitar1_vTab_St1.draw(); | |||
const Guitar2_St1 = new VF.Stave( | const Guitar1_vTab_St2 = new VF.Stave(Guitar1_vTab_St1.width + Guitar1_vTab_St1.x, Guitar1_vTab_St1.y, nStaveWidth).setContext(ctx); | ||
for (var i = 0; i < 5; i++) { | |||
if (i == 0) continue; | |||
Guitar1_vTab_St2.setConfigForLine(i, {visible: false} ); | |||
} | |||
Guitar1_vTab_St2.draw(); | |||
const Guitar1_vTab_St3 = new VF.Stave(Guitar1_vTab_St2.width + Guitar1_vTab_St2.x, Guitar1_vTab_St1.y, nStaveWidth).setContext(ctx); | |||
for (var i = 0; i < 5; i++) { | |||
if (i == 0) continue; | |||
Guitar1_vTab_St3.setConfigForLine(i, {visible: false} ); | |||
} | |||
Guitar1_vTab_St3.draw(); | |||
const Guitar1_vTab_St4 = new VF.Stave(Guitar1_vTab_St3.width + Guitar1_vTab_St3.x, Guitar1_vTab_St1.y, nStaveWidth).setContext(ctx); | |||
for (var i = 0; i < 5; i++) { | |||
if (i == 0) continue; | |||
Guitar1_vTab_St4.setConfigForLine(i, {visible: false} ); | |||
} | |||
Guitar1_vTab_St4.draw(); | |||
const Guitar2_St1 = new VF.Stave(Guitar1_Tab_St1.x, Guitar1_Tab_St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx); | |||
Guitar2_St1.addClef("treble").setContext(ctx); | Guitar2_St1.addClef("treble").setContext(ctx); | ||
Guitar2_St1.addTimeSignature('4/4').setContext(ctx); | Guitar2_St1.addTimeSignature('4/4').setContext(ctx); | ||
611行目: | 752行目: | ||
Guitar2_St4.draw(); | Guitar2_St4.draw(); | ||
const Guitar2_Tab_St1_1 = new VF.Stave(Guitar2_St1.x + nHeadMargin + 20, Guitar2_St1.y + 120, 0).setContext(ctx); | |||
Guitar2_Tab_St1_1.setBegBarType(VF.Barline.type.NONE); | |||
Guitar2_Tab_St1_1.setEndBarType(VF.Barline.type.NONE); | |||
Guitar2_Tab_St1_1.draw(); | |||
const Guitar2_Tab_St1 = new VF.Stave(Guitar2_St1.x, Guitar2_St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx); | |||
Guitar2_Tab_St1.draw(); | |||
Guitar2tab_1st.x = Guitar2_Tab_St1_1.x; | |||
Guitar2tab_1st.y = Guitar2_Tab_St1_1.y; | |||
Guitar2tab_1st_tabmark.x = Guitar2_Tab_St1.x; | |||
Guitar2tab_1st_tabmark.y = Guitar2_Tab_St1.y; | |||
var Guitar2Connector_St1_L = new VF.StaveConnector(Guitar2_St1, Guitar2_Tab_St1); | |||
Guitar2Connector_St1_L.setType(VF.StaveConnector.type.BRACKET); | |||
Guitar2Connector_St1_L.setContext(ctx); | |||
Guitar2Connector_St1_L.draw(); | |||
const | const Guitar2_Tab_St2 = new VF.Stave(Guitar2_Tab_St1.width + Guitar2_Tab_St1.x, Guitar2_Tab_St1.y, nStaveWidth).setContext(ctx); | ||
Guitar2_Tab_St2.draw(); | |||
const Guitar2_Tab_St2_1 = new VF.Stave(Guitar2_Tab_St1.width + Guitar2_Tab_St1.x + 45, Guitar2_Tab_St1.y, 0).setContext(ctx); | |||
Guitar2_Tab_St2_1.setBegBarType(VF.Barline.type.NONE); | |||
Guitar2_Tab_St2_1.setEndBarType(VF.Barline.type.NONE); | |||
Guitar2_Tab_St2_1.draw(); | |||
Guitar2tab_2st.x = Guitar2_Tab_St2.x; | |||
Guitar2tab_2st.y = Guitar2_Tab_St2.y; | |||
var Guitar2Connector_St2_L = new VF.StaveConnector(Guitar2_St2, Guitar2_Tab_St2); | |||
Guitar2Connector_St2_L.setType(VF.StaveConnector.type.SINGLE); | |||
Guitar2Connector_St2_L.setContext(ctx); | |||
Guitar2Connector_St2_L.draw(); | |||
const | const Guitar2_Tab_St3 = new VF.Stave(Guitar2_Tab_St2.width + Guitar2_Tab_St2.x, Guitar2_Tab_St2.y, nStaveWidth).setContext(ctx); | ||
Guitar2_Tab_St3.draw(); | |||
Guitar2tab_3st.x = | Guitar2tab_3st.x = Guitar2_Tab_St3.x; | ||
Guitar2tab_3st.y = | Guitar2tab_3st.y = Guitar2_Tab_St3.y; | ||
var Guitar2Connector_St3_L = new VF.StaveConnector(Guitar2_St3, Guitar2_Tab_St3); | |||
Guitar2Connector_St3_L.setType(VF.StaveConnector.type.SINGLE); | |||
Guitar2Connector_St3_L.setContext(ctx); | |||
Guitar2Connector_St3_L.draw(); | |||
const | const Guitar2_Tab_St4 = new VF.Stave(Guitar2_Tab_St3.width + Guitar2_Tab_St3.x, Guitar2_Tab_St3.y, nStaveWidth).setContext(ctx); | ||
Guitar2_Tab_St4.draw(); | |||
Guitar2tab_4st.x = | Guitar2tab_4st.x = Guitar2_Tab_St4.x; | ||
Guitar2tab_4st.y = | Guitar2tab_4st.y = Guitar2_Tab_St4.y; | ||
var | var Guitar2Connector_St4_L = new VF.StaveConnector(Guitar2_St4, Guitar2_Tab_St4); | ||
Guitar2Connector_St4_L.setType(VF.StaveConnector.type.SINGLE); | |||
Guitar2Connector_St4_L.setContext(ctx); | |||
Guitar2Connector_St4_L.draw(); | |||
const | var Guitar2Connector_St4_R = new VF.StaveConnector(Guitar2_St4, Guitar2_Tab_St4); | ||
Guitar2Connector_St4_R.setType(VF.StaveConnector.type.SINGLE_RIGHT); | |||
Guitar2Connector_St4_R.setContext(ctx); | |||
Guitar2Connector_St4_R.draw(); | |||
const Guitar2_vTab_St1 = new VF.Stave(Guitar2_Tab_St1.x, Guitar2_Tab_St1.y - 10, nHeadMargin + nStaveWidth).setContext(ctx); | |||
for (var i = 0; i < 5; i++) { | for (var i = 0; i < 5; i++) { | ||
if (i == 0) continue; | if (i == 0) continue; | ||
Guitar2_vTab_St1.setConfigForLine(i, {visible: false} ); | |||
} | } | ||
Guitar2_vTab_St1.draw(); | |||
const | const Guitar2_vTab_St2 = new VF.Stave(Guitar2_vTab_St1.width + Guitar2_vTab_St1.x, Guitar2_vTab_St1.y, nStaveWidth).setContext(ctx); | ||
for (var i = 0; i < 5; i++) { | for (var i = 0; i < 5; i++) { | ||
if (i == 0) continue; | if (i == 0) continue; | ||
Guitar2_vTab_St2.setConfigForLine(i, {visible: false} ); | |||
} | } | ||
Guitar2_vTab_St2.draw(); | |||
const | const Guitar2_vTab_St3 = new VF.Stave(Guitar2_vTab_St2.width + Guitar2_vTab_St2.x, Guitar2_vTab_St2.y, nStaveWidth).setContext(ctx); | ||
for (var i = 0; i < 5; i++) { | for (var i = 0; i < 5; i++) { | ||
if (i == 0) continue; | if (i == 0) continue; | ||
Guitar2_vTab_St3.setConfigForLine(i, {visible: false} ); | |||
} | } | ||
Guitar2_vTab_St3.draw(); | |||
const | const Guitar2_vTab_St4 = new VF.Stave(Guitar2_vTab_St3.width + Guitar2_vTab_St3.x, Guitar2_vTab_St3.y, nStaveWidth).setContext(ctx); | ||
for (var i = 0; i < 5; i++) { | for (var i = 0; i < 5; i++) { | ||
if (i == 0) continue; | if (i == 0) continue; | ||
Guitar2_vTab_St4.setConfigForLine(i, {visible: false} ); | |||
} | } | ||
Guitar2_vTab_St4.draw(); | |||
Guitar2Inst.x = Guitar2_St1.x - 30; | Guitar2Inst.x = Guitar2_St1.x - 30; | ||
Guitar2Inst.y = Guitar2_St1.y + (( | Guitar2Inst.y = Guitar2_St1.y + ((Guitar2_Tab_St1.y - Guitar2_St1.y) / 2) + 90; | ||
const Base_St1 = new VF.Stave( | const Base_St1 = new VF.Stave(Guitar2_Tab_St1.x, Guitar2_Tab_St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx); | ||
Base_St1.addClef("bass").setContext(ctx); | Base_St1.addClef("bass").setContext(ctx); | ||
Base_St1.addTimeSignature('4/4').setContext(ctx); | Base_St1.addTimeSignature('4/4').setContext(ctx); | ||
701行目: | 860行目: | ||
Base_St4.draw(); | Base_St4.draw(); | ||
const | const Base_Tab_St1 = new VF.Stave(Base_St1.x, Base_St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx); | ||
Base_Tab_St1.setEndBarType(VF.Barline.type.NONE); | |||
for (var i = 0; i < 5; i++) { | for (var i = 0; i < 5; i++) { | ||
if (i != 0) continue; | if (i != 0) continue; | ||
Base_Tab_St1.setConfigForLine(i, {visible: false} ); | |||
} | } | ||
Base_Tab_St1.draw(); | |||
Basetab_1st_tabmark.x = Base_Tab_St1.x; | |||
Basetab_1st_tabmark.y = Base_Tab_St1.y; | |||
BaseInst.x = Base_St1.x - 30; | BaseInst.x = Base_St1.x - 30; | ||
BaseInst.y = Base_St1.y + (( | BaseInst.y = Base_St1.y + ((Base_Tab_St1.y - Base_St1.y) / 2) + 90; | ||
StaveBase1 = | StaveBase1 = Base_Tab_St1; | ||
const | var BaseConnector_St1_L = new VF.StaveConnector(Base_St1, Base_Tab_St1); | ||
BaseConnector_St1_L.setType(VF.StaveConnector.type.BRACKET); | |||
BaseConnector_St1_L.setContext(ctx); | |||
BaseConnector_St1_L.draw(); | |||
const Base_Tab_St2 = new VF.Stave(Base_Tab_St1.width + Base_Tab_St1.x, Base_Tab_St1.y, nStaveWidth).setContext(ctx); | |||
Base_Tab_St2.setBegBarType(VF.Barline.type.NONE); | |||
Base_Tab_St2.setEndBarType(VF.Barline.type.NONE); | |||
for (var i = 0; i < 5; i++) { | for (var i = 0; i < 5; i++) { | ||
if (i != 0) continue; | if (i != 0) continue; | ||
Base_Tab_St2.setConfigForLine(i, {visible: false} ); | |||
} | } | ||
Base_Tab_St2.draw(); | |||
StaveBase2 = | StaveBase2 = Base_Tab_St2; | ||
const | var BaseConnector_St2_L = new VF.StaveConnector(Base_St2, Base_Tab_St2); | ||
BaseConnector_St2_L.setType(VF.StaveConnector.type.SINGLE); | |||
BaseConnector_St2_L.setContext(ctx); | |||
BaseConnector_St2_L.draw(); | |||
const Base_Tab_St3 = new VF.Stave(Base_Tab_St2.width + Base_Tab_St2.x, Base_Tab_St2.y, nStaveWidth).setContext(ctx); | |||
Base_Tab_St3.setBegBarType(VF.Barline.type.NONE); | |||
Base_Tab_St3.setEndBarType(VF.Barline.type.NONE); | |||
for (var i = 0; i < 5; i++) { | for (var i = 0; i < 5; i++) { | ||
if (i != 0) continue; | if (i != 0) continue; | ||
Base_Tab_St3.setConfigForLine(i, {visible: false} ); | |||
} | } | ||
Base_Tab_St3.draw(); | |||
StaveBase3 = Base_Tab_St3; | |||
var BaseConnector_St3_L = new VF.StaveConnector(Base_St3, Base_Tab_St3); | |||
BaseConnector_St3_L.setType(VF.StaveConnector.type.SINGLE); | |||
BaseConnector_St3_L.setContext(ctx); | |||
BaseConnector_St3_L.draw(); | |||
const | const Base_Tab_St4 = new VF.Stave(Base_Tab_St3.width + Base_Tab_St3.x, Base_Tab_St3.y, nStaveWidth).setContext(ctx); | ||
Base_Tab_St4.setBegBarType(VF.Barline.type.NONE); | |||
Base_Tab_St4.setEndBarType(VF.Barline.type.NONE); | |||
for (var i = 0; i < 5; i++) { | for (var i = 0; i < 5; i++) { | ||
if (i != 0) continue; | if (i != 0) continue; | ||
Base_Tab_St4.setConfigForLine(i, {visible: false} ); | |||
} | } | ||
Base_Tab_St4.draw(); | |||
StaveBase4 = Base_Tab_St4; | |||
var BaseConnector_St4_L = new VF.StaveConnector(Base_St4, Base_Tab_St4); | |||
BaseConnector_St4_L.setType(VF.StaveConnector.type.SINGLE); | |||
BaseConnector_St4_L.setContext(ctx); | |||
BaseConnector_St4_L.draw(); | |||
var | var BaseConnector_St4_R = new VF.StaveConnector(Base_St4, Base_Tab_St4); | ||
BaseConnector_St4_R.setType(VF.StaveConnector.type.SINGLE_RIGHT); | |||
BaseConnector_St4_R.setContext(ctx); | |||
BaseConnector_St4_R.draw(); | |||
const Drum_St1 = new VF.Stave( | const Drum_St1 = new VF.Stave(Base_Tab_St1.x, Base_Tab_St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx); | ||
Drum_St1.addClef("bass").setContext(ctx); | Drum_St1.addClef("bass").setContext(ctx); | ||
Drum_St1.addTimeSignature('4/4').setContext(ctx); | Drum_St1.addTimeSignature('4/4').setContext(ctx); | ||
763行目: | 942行目: | ||
DrumInst.y = Drum_St1.y + 90; | DrumInst.y = Drum_St1.y + 90; | ||
const Drum_St1_1 = new VF.Stave(nHeadMargin + | const Drum_St1_1 = new VF.Stave(nHeadMargin + Base_Tab_St1.x, Base_Tab_St1.y + 120, 0).setContext(ctx); | ||
Drum_St1_1.setBegBarType(VF.Barline.type.NONE); | Drum_St1_1.setBegBarType(VF.Barline.type.NONE); | ||
Drum_St1_1.setEndBarType(VF.Barline.type.NONE); | Drum_St1_1.setEndBarType(VF.Barline.type.NONE); | ||
Drum_St1_1.draw(); | Drum_St1_1.draw(); | ||
const Drum_St1_2 = new VF.Stave(nHeadMargin + | const Drum_St1_2 = new VF.Stave(nHeadMargin + Base_Tab_St1.x, Base_Tab_St1.y + 120, 0).setContext(ctx); | ||
Drum_St1_2.setBegBarType(VF.Barline.type.NONE); | Drum_St1_2.setBegBarType(VF.Barline.type.NONE); | ||
Drum_St1_2.setEndBarType(VF.Barline.type.NONE); | Drum_St1_2.setEndBarType(VF.Barline.type.NONE); | ||
840行目: | 1,019行目: | ||
textContent: ["Vocal"], // 必須文字列 | textContent: ["Vocal"], // 必須文字列 | ||
strID: "VocalText", // 必須 | strID: "VocalText", // 必須 | ||
Stave_x: | Stave_x: VocalInst.x, | ||
Stave_y: | Stave_y: VocalInst.y, | ||
fontFamily: "Arial, sans-serif", | fontFamily: "Arial, sans-serif", | ||
fontSize: "20pt", | fontSize: "20pt", | ||
862行目: | 1,041行目: | ||
textContent: ["@"], // 必須文字列 | textContent: ["@"], // 必須文字列 | ||
strID: "EGuitarTab", // 必須 | strID: "EGuitarTab", // 必須 | ||
Stave_x: | Stave_x: Guitar1tab_1st_tabmark.x, | ||
Stave_y: | Stave_y: Guitar1tab_1st_tabmark.y, | ||
Stave_x_Offset: 10, | Stave_x_Offset: 10, | ||
Stave_y_Offset: 80, | Stave_y_Offset: 80, | ||
869行目: | 1,048行目: | ||
}; | }; | ||
insertTextToSVG(EGuitarTab_options); | insertTextToSVG(EGuitarTab_options); | ||
var Guitar1_st1_option = { | |||
textContent: ["\uFF86", "\uFF86", "┌── M ──┐"], // 必須文字列 | |||
strID: "Guitar1_st1", // 必須 | |||
Stave_x_Offset: 0, | |||
Stave_y_Offset: 0, | |||
fontSize: 40, | |||
fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial" | |||
shift_x: [ | |||
{x:shiftGuitar1_1st[0].x, y:shiftGuitar1_1st[0].y}, | |||
{x:shiftGuitar1_1st[1].x, y:shiftGuitar1_1st[1].y}, | |||
{x:shiftGuitar1_1st[2].x - 12, y:shiftGuitar1_1st[2].y}, | |||
], | |||
IsOffset_x_Abs: true | |||
}; | |||
insertTextToSVG(Guitar1_st1_option); | |||
var EGuitar2Text_options = { | var EGuitar2Text_options = { | ||
884行目: | 1,079行目: | ||
textContent: ["@"], // 必須文字列 | textContent: ["@"], // 必須文字列 | ||
strID: "EGuitar2Tab", // 必須 | strID: "EGuitar2Tab", // 必須 | ||
Stave_x: | Stave_x: Guitar2tab_1st_tabmark.x, | ||
Stave_y: | Stave_y: Guitar2tab_1st_tabmark.y, | ||
Stave_x_Offset: 10, | Stave_x_Offset: 10, | ||
Stave_y_Offset: 80, | Stave_y_Offset: 80, | ||
891行目: | 1,086行目: | ||
}; | }; | ||
insertTextToSVG(EGuitar2Tab_options); | insertTextToSVG(EGuitar2Tab_options); | ||
var Guitar1tab_st1_option = { | |||
textContent: ["\uFF86", "\uFF86", "┌── M ──┐"], // 必須文字列 | |||
strID: "Guitar1tab_st1", // 必須 | |||
Stave_x_Offset: 0, | |||
Stave_y_Offset: 0, | |||
fontSize: 40, | |||
fontFamily: "YonetMuFL, Arial", // オプション、デフォルトは"Bravura, Arial" | |||
shift_x: [ | |||
{x:shiftGuitar1tab_1st[0].x, y:shiftGuitar1tab_1st[0].y}, | |||
{x:shiftGuitar1tab_1st[1].x, y:shiftGuitar1tab_1st[1].y}, | |||
{x:shiftGuitar1tab_1st[2].x - 12, y:shiftGuitar1tab_1st[2].y}, | |||
], | |||
IsOffset_x_Abs: true | |||
}; | |||
insertTextToSVG(Guitar1tab_st1_option); | |||
var BaseText_options = { | var BaseText_options = { | ||
906行目: | 1,117行目: | ||
textContent: ["@"], // 必須文字列 | textContent: ["@"], // 必須文字列 | ||
strID: "BaseTab", // 必須 | strID: "BaseTab", // 必須 | ||
Stave_x: | Stave_x: Basetab_1st_tabmark.x, | ||
Stave_y: | Stave_y: Basetab_1st_tabmark.y, | ||
Stave_x_Offset: 10, | Stave_x_Offset: 10, | ||
Stave_y_Offset: 90, | Stave_y_Offset: 90, |
2024年4月19日 (金) 18:54時点における最新版
VexFlow 使い方に戻る。
概要
タブ譜 ミュート
コードは以下のとおりです。
<div id="yonet202404Mid_Output01"></div>
<script>
VexFlow 使い方に戻る。