「VexFlow タブ譜 ミュート」の版間の差分
(同じ利用者による、間の13版が非表示) | |||
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); | ||
526行目: | 530行目: | ||
Guitar1_Tab_St1.draw(); | Guitar1_Tab_St1.draw(); | ||
Guitar1tab_1st_tabmark.x = Guitar1_Tab_St1.x; | |||
Guitar1tab_1st_tabmark.y = Guitar1_Tab_St1.y; | |||
var | 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.x = Vocal_St1.x - 30; | ||
550行目: | 554行目: | ||
Guitar1tab_2st.x = Guitar1_Tab_St2.x | Guitar1tab_2st.x = Guitar1_Tab_St2.x | ||
Guitar1tab_2st.y = Guitar1_Tab_St2.y | 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); | const Guitar1_Tab_St3 = new VF.Stave(Guitar1_Tab_St2.width + Guitar1_Tab_St2.x, Guitar1_Tab_St1.y, nStaveWidth).setContext(ctx); | ||
556行目: | 565行目: | ||
Guitar1tab_3st.x = Guitar1_Tab_St3.x | Guitar1tab_3st.x = Guitar1_Tab_St3.x | ||
Guitar1tab_3st.y = Guitar1_Tab_St3.y | 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); | const Guitar1_Tab_St4 = new VF.Stave(Guitar1_Tab_St3.width + Guitar1_Tab_St3.x, Guitar1_Tab_St1.y, nStaveWidth).setContext(ctx); | ||
562行目: | 576行目: | ||
Guitar1tab_4st.x = Guitar1_Tab_St4.x | Guitar1tab_4st.x = Guitar1_Tab_St4.x | ||
Guitar1tab_4st.y = Guitar1_Tab_St4.y | 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(); | |||
const Guitar1_vTab_St1 = new VF.Stave(Guitar1_St1.x, Guitar1_St1.y + 110, nHeadMargin + nStaveWidth).setContext(ctx); | 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++) { | for (var i = 0; i < 5; i++) { | ||
if (i == 0) continue; | if (i == 0) continue; | ||
Guitar1_vTab_St1.setConfigForLine(i, {visible: false} ); | |||
} | } | ||
Guitar1_vTab_St1.draw(); | |||
const Guitar1_vTab_St2 = new VF.Stave(Guitar1_vTab_St1.width + Guitar1_vTab_St1.x, Guitar1_vTab_St1.y, nStaveWidth).setContext(ctx); | const Guitar1_vTab_St2 = new VF.Stave(Guitar1_vTab_St1.width + Guitar1_vTab_St1.x, Guitar1_vTab_St1.y, nStaveWidth).setContext(ctx); | ||
590行目: | 609行目: | ||
} | } | ||
Guitar1_vTab_St4.draw(); | Guitar1_vTab_St4.draw(); | ||
const Guitar2_St1 = new VF.Stave(Guitar1_Tab_St1.x, Guitar1_Tab_St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx); | const Guitar2_St1 = new VF.Stave(Guitar1_Tab_St1.x, Guitar1_Tab_St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx); | ||
610行目: | 630行目: | ||
const Guitar2_St4 = new VF.Stave(Guitar2_St3.width + Guitar2_St3.x, Guitar2_St3.y, nStaveWidth).setContext(ctx); | const Guitar2_St4 = new VF.Stave(Guitar2_St3.width + Guitar2_St3.x, Guitar2_St3.y, nStaveWidth).setContext(ctx); | ||
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); | const Guitar2_Tab_St1_1 = new VF.Stave(Guitar2_St1.x + nHeadMargin + 20, Guitar2_St1.y + 120, 0).setContext(ctx); | ||
623行目: | 642行目: | ||
Guitar2tab_1st.y = Guitar2_Tab_St1_1.y; | Guitar2tab_1st.y = Guitar2_Tab_St1_1.y; | ||
Guitar2tab_1st_tabmark.x = Guitar2_Tab_St1.x; | |||
Guitar2tab_1st_tabmark.y = Guitar2_Tab_St1.y; | |||
const Guitar2_Tab_St2 = new VF.Stave(Guitar2_Tab_St1.width + Guitar2_Tab_St1.x, Guitar2_Tab_St1.y, nStaveWidth).setContext(ctx); | 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); | const Guitar2_Tab_St2_1 = new VF.Stave(Guitar2_Tab_St1.width + Guitar2_Tab_St1.x + 45, Guitar2_Tab_St1.y, 0).setContext(ctx); | ||
643行目: | 661行目: | ||
Guitar2tab_3st.x = Guitar2_Tab_St3.x; | Guitar2tab_3st.x = Guitar2_Tab_St3.x; | ||
Guitar2tab_3st.y = Guitar2_Tab_St3.y; | Guitar2tab_3st.y = Guitar2_Tab_St3.y; | ||
const Guitar2_Tab_St4 = new VF.Stave(Guitar2_Tab_St3.width + Guitar2_Tab_St3.x, Guitar2_Tab_St3.y, nStaveWidth).setContext(ctx); | const Guitar2_Tab_St4 = new VF.Stave(Guitar2_Tab_St3.width + Guitar2_Tab_St3.x, Guitar2_Tab_St3.y, nStaveWidth).setContext(ctx); | ||
651行目: | 668行目: | ||
Guitar2tab_4st.y = Guitar2_Tab_St4.y; | Guitar2tab_4st.y = Guitar2_Tab_St4.y; | ||
var | 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 Guitar2_vTab_St1 = new VF.Stave(Guitar2_Tab_St1.x, Guitar2_Tab_St1.y - 10, nHeadMargin + nStaveWidth).setContext(ctx); | const Guitar2_vTab_St1 = new VF.Stave(Guitar2_Tab_St1.x, Guitar2_Tab_St1.y - 10, nHeadMargin + nStaveWidth).setContext(ctx); | ||
685行目: | 702行目: | ||
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); | ||
702行目: | 719行目: | ||
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 | 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 | 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 = | StaveBase3 = Base_Tab_St3; | ||
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 = | StaveBase4 = Base_Tab_St4; | ||
var | 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 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); | ||
764行目: | 781行目: | ||
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); | ||
841行目: | 858行目: | ||
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", | ||
863行目: | 880行目: | ||
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, | ||
885行目: | 902行目: | ||
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, | ||
907行目: | 924行目: | ||
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月18日 (木) 23:50時点における版
VexFlow 使い方に戻る。
概要
タブ譜 ミュート
コードは以下のとおりです。
<div id="yonet202404Mid_Output01"></div>
<script>
VexFlow 使い方に戻る。