「VexFlow タブ譜 ミュート」の版間の差分

提供：yonewiki
編集の要約なし
編集の要約なし
12行目: 12行目:
== ''' タブ譜 ミュート''' ==
== ''' タブ譜 ミュート''' ==
<div id="notation"></div>
<div id="notation"></div>
<div id="yonet202403Mid_Output01"></div>
<div id="yonet202404Mid_Output01"></div>
<yjavascript></script>
<yjavascript></script>
<script>
<script>
39行目: 39行目:
const Guitar2tab_3st = new Position();
const Guitar2tab_3st = new Position();
const Guitar2tab_4st = new Position();
const Guitar2tab_4st = new Position();


const BaseInst = new Position();
const BaseInst = new Position();
433行目: 432行目:
   return staveNote;
   return staveNote;
}
}
const {
  Factory,
  Stave,
  StaveNote,
  Formatter,
  Voice,
  StaveTie,
  BarLine,
  Beam,
  Dot,
  StaveConnector,
  Modifier,
  RenderContext,
  TextDynamics,
  Articulation,
  TextNote,
  Crescendo,
  Renderer
} = Vex.Flow;


let nscale = 0.64;
let nscale = 0.64;
461行目: 440行目:
let nStaveWidth = 350;
let nStaveWidth = 350;


const f = new Factory({  
const f = new VF.Factory({  
   renderer: { elementId: 'yonet202403Mid_Output01', width: nwidth, height: nheight * nscale }
   renderer: { elementId: 'yonet202404Mid_Output01', width: nwidth, height: nheight * nscale }
   });
   });
const ctx = f.getContext();
const ctx = f.getContext();
505行目: 484行目:
ctx.strokeStyle = defaultStyle.strokeStyle;
ctx.strokeStyle = defaultStyle.strokeStyle;


const VocalSt1 = new Stave(80, 30, nHeadMargin + nStaveWidth).setContext(ctx);
const VocalSt1 = new VF.Stave(80, 30, nHeadMargin + nStaveWidth).setContext(ctx);
VocalSt1.setClef("treble").setContext(ctx);
VocalSt1.setClef("treble").setContext(ctx);
VocalSt1.setTimeSignature('4/4').setContext(ctx);
VocalSt1.setTimeSignature('4/4').setContext(ctx);
519行目: 498行目:
VocalSt2.setContext(ctx).draw();
VocalSt2.setContext(ctx).draw();


const VocalSt3 = new Stave(VocalSt2.width + VocalSt2.x, VocalSt1.y, nStaveWidth).setContext(ctx);
const VocalSt3 = new VF.Stave(VocalSt2.width + VocalSt2.x, VocalSt1.y, nStaveWidth).setContext(ctx);
VocalSt3.setMeasure(3);
VocalSt3.setMeasure(3);
VocalSt3.draw();
VocalSt3.draw();
533行目: 512行目:
Guitar1St1.draw();
Guitar1St1.draw();


const Guitar1St2 = new Stave(Guitar1St1.width + Guitar1St1.x, Guitar1St1.y, nStaveWidth).setContext(ctx);
const Guitar1St2 = new VF.Stave(Guitar1St1.width + Guitar1St1.x, Guitar1St1.y, nStaveWidth).setContext(ctx);
Guitar1St2.draw();
Guitar1St2.draw();


const Guitar1St3 = new Stave(Guitar1St2.width + Guitar1St2.x, Guitar1St1.y, nStaveWidth).setContext(ctx);
const Guitar1St3 = new VF.Stave(Guitar1St2.width + Guitar1St2.x, Guitar1St1.y, nStaveWidth).setContext(ctx);
Guitar1St3.draw();
Guitar1St3.draw();


const Guitar1St4 = new Stave(Guitar1St3.width + Guitar1St3.x, Guitar1St1.y, nStaveWidth).setContext(ctx);
const Guitar1St4 = new VF.Stave(Guitar1St3.width + Guitar1St3.x, Guitar1St1.y, nStaveWidth).setContext(ctx);
Guitar1St4.draw();
Guitar1St4.draw();


const Guitar1_tab1 = new Stave(Guitar1St1.x, Guitar1St1.y + 110, nHeadMargin + nStaveWidth).setContext(ctx);
const Guitar1_tab1 = new VF.Stave(Guitar1St1.x, Guitar1St1.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;
549行目: 528行目:
Guitar1_tab1.draw();
Guitar1_tab1.draw();


const Guitar1_tab2 = new Stave(Guitar1_tab1.width + Guitar1_tab1.x, Guitar1_tab1.y, nStaveWidth).setContext(ctx);
const Guitar1_tab2 = new VF.Stave(Guitar1_tab1.width + Guitar1_tab1.x, Guitar1_tab1.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;
556行目: 535行目:
Guitar1_tab2.draw();
Guitar1_tab2.draw();


const Guitar1_tab3 = new Stave(Guitar1_tab2.width + Guitar1_tab2.x, Guitar1_tab1.y, nStaveWidth).setContext(ctx);
const Guitar1_tab3 = new VF.Stave(Guitar1_tab2.width + Guitar1_tab2.x, Guitar1_tab1.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;
563行目: 542行目:
Guitar1_tab3.draw();
Guitar1_tab3.draw();


const Guitar1_tab4 = new Stave(Guitar1_tab3.width + Guitar1_tab3.x, Guitar1_tab1.y, nStaveWidth).setContext(ctx);
const Guitar1_tab4 = new VF.Stave(Guitar1_tab3.width + Guitar1_tab3.x, Guitar1_tab1.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;
570行目: 549行目:
Guitar1_tab4.draw();
Guitar1_tab4.draw();


const Guitar1_Tab1 = new Stave(Guitar1St1.x, Guitar1St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);
const Guitar1_Tab1 = new VF.Stave(Guitar1St1.x, Guitar1St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);
Guitar1_Tab1.draw();
Guitar1_Tab1.draw();


584行目: 563行目:
Guitar1Inst.y = Guitar1St1.y + ((Guitar1_Tab1.y - Guitar1St1.y) / 2) + 90;  
Guitar1Inst.y = Guitar1St1.y + ((Guitar1_Tab1.y - Guitar1St1.y) / 2) + 90;  


const Guitar1_Tab1_1 = new Stave(Guitar1_Tab1.x + nHeadMargin + 20, Guitar1_Tab1.y, 0).setContext(ctx);
const Guitar1_Tab1_1 = new VF.Stave(Guitar1_Tab1.x + nHeadMargin + 20, Guitar1_Tab1.y, 0).setContext(ctx);
Guitar1_Tab1_1.setBegBarType(VF.Barline.type.NONE);
Guitar1_Tab1_1.setBegBarType(VF.Barline.type.NONE);
Guitar1_Tab1_1.setEndBarType(VF.Barline.type.NONE);
Guitar1_Tab1_1.setEndBarType(VF.Barline.type.NONE);
594行目: 573行目:




const Guitar1_Tab2 = new Stave(Guitar1_Tab1.width + Guitar1_Tab1.x, Guitar1_Tab1.y, nStaveWidth).setContext(ctx);
const Guitar1_Tab2 = new VF.Stave(Guitar1_Tab1.width + Guitar1_Tab1.x, Guitar1_Tab1.y, nStaveWidth).setContext(ctx);
Guitar1_Tab2.draw();
Guitar1_Tab2.draw();


600行目: 579行目:
Guitar1tab_2st.y = Guitar1_Tab2.y
Guitar1tab_2st.y = Guitar1_Tab2.y


const Guitar1_Tab3 = new Stave(Guitar1_Tab2.width + Guitar1_Tab2.x, Guitar1_Tab1.y, nStaveWidth).setContext(ctx);
const Guitar1_Tab3 = new VF.Stave(Guitar1_Tab2.width + Guitar1_Tab2.x, Guitar1_Tab1.y, nStaveWidth).setContext(ctx);
Guitar1_Tab3.draw();
Guitar1_Tab3.draw();


606行目: 585行目:
Guitar1tab_3st.y = Guitar1_Tab3.y
Guitar1tab_3st.y = Guitar1_Tab3.y


const Guitar1_Tab4 = new Stave(Guitar1_Tab3.width + Guitar1_Tab3.x, Guitar1_Tab1.y, nStaveWidth).setContext(ctx);
const Guitar1_Tab4 = new VF.Stave(Guitar1_Tab3.width + Guitar1_Tab3.x, Guitar1_Tab1.y, nStaveWidth).setContext(ctx);
Guitar1_Tab4.draw();
Guitar1_Tab4.draw();


612行目: 591行目:
Guitar1tab_4st.y = Guitar1_Tab4.y
Guitar1tab_4st.y = Guitar1_Tab4.y


const Guitar2_St1 = new Stave(Guitar1_Tab1.x, Guitar1_Tab1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);
const Guitar2_St1 = new VF.Stave(Guitar1_Tab1.x, Guitar1_Tab1.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);
618行目: 597行目:
Guitar2_St1.draw();
Guitar2_St1.draw();


const Guitar2_St2 = new Stave(Guitar2_St1.width + Guitar2_St1.x, Guitar2_St1.y, nStaveWidth).setContext(ctx);
const Guitar2_St2 = new VF.Stave(Guitar2_St1.width + Guitar2_St1.x, Guitar2_St1.y, nStaveWidth).setContext(ctx);
Guitar2_St2.draw();
Guitar2_St2.draw();


const Guitar2_St2_1 = new Stave(Guitar2_St1.width + Guitar2_St1.x + 45, Guitar2_St1.y, 0).setContext(ctx);
const Guitar2_St2_1 = new VF.Stave(Guitar2_St1.width + Guitar2_St1.x + 45, Guitar2_St1.y, 0).setContext(ctx);
Guitar2_St2_1.setBegBarType(VF.Barline.type.NONE);
Guitar2_St2_1.setBegBarType(VF.Barline.type.NONE);
Guitar2_St2_1.setEndBarType(VF.Barline.type.NONE);
Guitar2_St2_1.setEndBarType(VF.Barline.type.NONE);
Guitar2_St2_1.draw();
Guitar2_St2_1.draw();


const Guitar2_St3 = new Stave(Guitar2_St2.width + Guitar2_St2.x, Guitar2_St2.y, nStaveWidth).setContext(ctx);
const Guitar2_St3 = new VF.Stave(Guitar2_St2.width + Guitar2_St2.x, Guitar2_St2.y, nStaveWidth).setContext(ctx);
Guitar2_St3.draw();
Guitar2_St3.draw();


const Guitar2_St4 = new 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_Tab1_1 = new Stave(Guitar2_St1.x + nHeadMargin + 20, Guitar2_St1.y + 120, 0).setContext(ctx);
const Guitar2_Tab1_1 = new VF.Stave(Guitar2_St1.x + nHeadMargin + 20, Guitar2_St1.y + 120, 0).setContext(ctx);
Guitar2_Tab1_1.setBegBarType(VF.Barline.type.NONE);
Guitar2_Tab1_1.setBegBarType(VF.Barline.type.NONE);
Guitar2_Tab1_1.setEndBarType(VF.Barline.type.NONE);
Guitar2_Tab1_1.setEndBarType(VF.Barline.type.NONE);
Guitar2_Tab1_1.draw();
Guitar2_Tab1_1.draw();
const Guitar2_Tab1 = new Stave(Guitar2_St1.x, Guitar2_St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);
const Guitar2_Tab1 = new VF.Stave(Guitar2_St1.x, Guitar2_St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);
Guitar2_Tab1.draw();
Guitar2_Tab1.draw();


646行目: 625行目:
Guitar2Tab1.y = Guitar2_Tab1.y;
Guitar2Tab1.y = Guitar2_Tab1.y;


const Guitar2_Tab2 = new Stave(Guitar2_Tab1.width + Guitar2_Tab1.x, Guitar2_Tab1.y, nStaveWidth).setContext(ctx);
const Guitar2_Tab2 = new VF.Stave(Guitar2_Tab1.width + Guitar2_Tab1.x, Guitar2_Tab1.y, nStaveWidth).setContext(ctx);
Guitar2_Tab2.draw();
Guitar2_Tab2.draw();




const Guitar2_Tab2_1 = new Stave(Guitar2_Tab1.width + Guitar2_Tab1.x + 45, Guitar2_Tab1.y, 0).setContext(ctx);
const Guitar2_Tab2_1 = new VF.Stave(Guitar2_Tab1.width + Guitar2_Tab1.x + 45, Guitar2_Tab1.y, 0).setContext(ctx);
Guitar2_Tab2_1.setBegBarType(VF.Barline.type.NONE);
Guitar2_Tab2_1.setBegBarType(VF.Barline.type.NONE);
Guitar2_Tab2_1.setEndBarType(VF.Barline.type.NONE);
Guitar2_Tab2_1.setEndBarType(VF.Barline.type.NONE);
658行目: 637行目:
Guitar2tab_2st.y = Guitar2_Tab2.y;
Guitar2tab_2st.y = Guitar2_Tab2.y;


const Guitar2_Tab3 = new Stave(Guitar2_Tab2.width + Guitar2_Tab2.x, Guitar2_Tab2.y, nStaveWidth).setContext(ctx);
const Guitar2_Tab3 = new VF.Stave(Guitar2_Tab2.width + Guitar2_Tab2.x, Guitar2_Tab2.y, nStaveWidth).setContext(ctx);
Guitar2_Tab3.draw();
Guitar2_Tab3.draw();


665行目: 644行目:




const Guitar2_Tab4 = new Stave(Guitar2_Tab3.width + Guitar2_Tab3.x, Guitar2_Tab3.y, nStaveWidth).setContext(ctx);
const Guitar2_Tab4 = new VF.Stave(Guitar2_Tab3.width + Guitar2_Tab3.x, Guitar2_Tab3.y, nStaveWidth).setContext(ctx);
Guitar2_Tab4.draw();
Guitar2_Tab4.draw();


676行目: 655行目:
Guitar2_connect.draw();
Guitar2_connect.draw();


const Guitar2_Tab1_tab = new Stave(Guitar2_Tab1.x, Guitar2_Tab1.y - 10, nHeadMargin + nStaveWidth).setContext(ctx);
const Guitar2_Tab1_tab = new VF.Stave(Guitar2_Tab1.x, Guitar2_Tab1.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;
683行目: 662行目:
Guitar2_Tab1_tab.draw();
Guitar2_Tab1_tab.draw();


const Guitar2_Tab2_tab = new Stave(Guitar2_Tab1_tab.width + Guitar2_Tab1_tab.x, Guitar2_Tab1_tab.y, nStaveWidth).setContext(ctx);
const Guitar2_Tab2_tab = new VF.Stave(Guitar2_Tab1_tab.width + Guitar2_Tab1_tab.x, Guitar2_Tab1_tab.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;
690行目: 669行目:
Guitar2_Tab2_tab.draw();
Guitar2_Tab2_tab.draw();


const Guitar2_Tab3_tab = new Stave(Guitar2_Tab2_tab.width + Guitar2_Tab2_tab.x, Guitar2_Tab2_tab.y, nStaveWidth).setContext(ctx);
const Guitar2_Tab3_tab = new VF.Stave(Guitar2_Tab2_tab.width + Guitar2_Tab2_tab.x, Guitar2_Tab2_tab.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;
697行目: 676行目:
Guitar2_Tab3_tab.draw();
Guitar2_Tab3_tab.draw();


const Guitar2_Tab4_tab = new Stave(Guitar2_Tab3_tab.width + Guitar2_Tab3_tab.x, Guitar2_Tab3_tab.y, nStaveWidth).setContext(ctx);
const Guitar2_Tab4_tab = new VF.Stave(Guitar2_Tab3_tab.width + Guitar2_Tab3_tab.x, Guitar2_Tab3_tab.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;
707行目: 686行目:
Guitar2Inst.y = Guitar2_St1.y + ((Guitar2_Tab1.y - Guitar2_St1.y) / 2) + 90;  
Guitar2Inst.y = Guitar2_St1.y + ((Guitar2_Tab1.y - Guitar2_St1.y) / 2) + 90;  


const Base_St1 = new Stave(Guitar2_Tab1.x, Guitar2_Tab1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);
const Base_St1 = new VF.Stave(Guitar2_Tab1.x, Guitar2_Tab1.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);
713行目: 692行目:
Base_St1.draw();
Base_St1.draw();


const Base_St2 = new Stave(Base_St1.width + Base_St1.x, Base_St1.y, nStaveWidth).setContext(ctx);
const Base_St2 = new VF.Stave(Base_St1.width + Base_St1.x, Base_St1.y, nStaveWidth).setContext(ctx);
Base_St2.draw();
Base_St2.draw();


const Base_St3 = new Stave(Base_St2.width + Base_St2.x, Base_St2.y, nStaveWidth).setContext(ctx);
const Base_St3 = new VF.Stave(Base_St2.width + Base_St2.x, Base_St2.y, nStaveWidth).setContext(ctx);
Base_St3.draw();
Base_St3.draw();


const Base_St4 = new Stave(Base_St3.width + Base_St3.x, Base_St3.y, nStaveWidth).setContext(ctx);
const Base_St4 = new VF.Stave(Base_St3.width + Base_St3.x, Base_St3.y, nStaveWidth).setContext(ctx);
Base_St4.draw();
Base_St4.draw();


const Base_Tab1 = new Stave(Base_St1.x, Base_St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);
const Base_Tab1 = new VF.Stave(Base_St1.x, Base_St1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);
Base_Tab1.setEndBarType(VF.Barline.type.NONE);
Base_Tab1.setEndBarType(VF.Barline.type.NONE);
for (var i = 0; i < 5; i++) {
for (var i = 0; i < 5; i++) {
738行目: 717行目:
StaveBase1 = Base_Tab1;
StaveBase1 = Base_Tab1;


const Base_Tab2 = new Stave(Base_Tab1.width + Base_Tab1.x, Base_Tab1.y, nStaveWidth).setContext(ctx);
const Base_Tab2 = new VF.Stave(Base_Tab1.width + Base_Tab1.x, Base_Tab1.y, nStaveWidth).setContext(ctx);
Base_Tab2.setBegBarType(VF.Barline.type.NONE);
Base_Tab2.setBegBarType(VF.Barline.type.NONE);
Base_Tab2.setEndBarType(VF.Barline.type.NONE);
Base_Tab2.setEndBarType(VF.Barline.type.NONE);
749行目: 728行目:
StaveBase2 = Base_Tab2;
StaveBase2 = Base_Tab2;


const Base_Tab3 = new Stave(Base_Tab2.width + Base_Tab2.x, Base_Tab2.y, nStaveWidth).setContext(ctx);
const Base_Tab3 = new VF.Stave(Base_Tab2.width + Base_Tab2.x, Base_Tab2.y, nStaveWidth).setContext(ctx);
Base_Tab3.setBegBarType(VF.Barline.type.NONE);
Base_Tab3.setBegBarType(VF.Barline.type.NONE);
Base_Tab3.setEndBarType(VF.Barline.type.NONE);
Base_Tab3.setEndBarType(VF.Barline.type.NONE);
760行目: 739行目:
StaveBase3 = Base_Tab3;
StaveBase3 = Base_Tab3;


const Base_Tab4 = new Stave(Base_Tab3.width + Base_Tab3.x, Base_Tab3.y, nStaveWidth).setContext(ctx);
const Base_Tab4 = new VF.Stave(Base_Tab3.width + Base_Tab3.x, Base_Tab3.y, nStaveWidth).setContext(ctx);
Base_Tab4.setBegBarType(VF.Barline.type.NONE);
Base_Tab4.setBegBarType(VF.Barline.type.NONE);
Base_Tab4.setEndBarType(VF.Barline.type.NONE);
Base_Tab4.setEndBarType(VF.Barline.type.NONE);
776行目: 755行目:
Base_connect.draw();
Base_connect.draw();


const Drum_St1 = new Stave(Base_Tab1.x, Base_Tab1.y + 120, nHeadMargin + nStaveWidth).setContext(ctx);
const Drum_St1 = new VF.Stave(Base_Tab1.x, Base_Tab1.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);
784行目: 763行目:
DrumInst.y = Drum_St1.y + 90;  
DrumInst.y = Drum_St1.y + 90;  


const Drum_St1_1 = new Stave(nHeadMargin + Base_Tab1.x, Base_Tab1.y + 120, 0).setContext(ctx);
const Drum_St1_1 = new VF.Stave(nHeadMargin + Base_Tab1.x, Base_Tab1.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 Stave(nHeadMargin + Base_Tab1.x, Base_Tab1.y + 120, 0).setContext(ctx);
const Drum_St1_2 = new VF.Stave(nHeadMargin + Base_Tab1.x, Base_Tab1.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);
Drum_St1_2.draw();
Drum_St1_2.draw();


const Drum_St2 = new Stave(Drum_St1.width + Drum_St1.x, Drum_St1.y, nStaveWidth).setContext(ctx);
const Drum_St2 = new VF.Stave(Drum_St1.width + Drum_St1.x, Drum_St1.y, nStaveWidth).setContext(ctx);
Drum_St2.draw();
Drum_St2.draw();




const Drum_St3 = new Stave(Drum_St2.width + Drum_St2.x, Drum_St1.y, nStaveWidth).setContext(ctx);
const Drum_St3 = new VF.Stave(Drum_St2.width + Drum_St2.x, Drum_St1.y, nStaveWidth).setContext(ctx);
Drum_St3.draw();
Drum_St3.draw();




const Drum_St4 = new Stave(Drum_St3.width + Drum_St3.x, Drum_St1.y, nStaveWidth).setContext(ctx);
const Drum_St4 = new VF.Stave(Drum_St3.width + Drum_St3.x, Drum_St1.y, nStaveWidth).setContext(ctx);
Drum_St4.draw();
Drum_St4.draw();




const Perc_St1 = new Stave(Drum_St1.x, Drum_St1.y + 100, nHeadMargin + nStaveWidth).setContext(ctx);
const Perc_St1 = new VF.Stave(Drum_St1.x, Drum_St1.y + 100, nHeadMargin + nStaveWidth).setContext(ctx);
Perc_St1.addTimeSignature('4/4').setContext(ctx);
Perc_St1.addTimeSignature('4/4').setContext(ctx);


const Perc_St1_1 = new Stave(nHeadMargin + Drum_St1.x, Drum_St1.y + 100, 0).setContext(ctx);
const Perc_St1_1 = new VF.Stave(nHeadMargin + Drum_St1.x, Drum_St1.y + 100, 0).setContext(ctx);
Perc_St1_1.setBegBarType(VF.Barline.type.NONE);
Perc_St1_1.setBegBarType(VF.Barline.type.NONE);
Perc_St1_1.setEndBarType(VF.Barline.type.NONE);
Perc_St1_1.setEndBarType(VF.Barline.type.NONE);
830行目: 809行目:




const Perc_St2 = new Stave(Perc_St1.width + Perc_St1.x, Perc_St1.y, nStaveWidth).setContext(ctx);
const Perc_St2 = new VF.Stave(Perc_St1.width + Perc_St1.x, Perc_St1.y, nStaveWidth).setContext(ctx);
for (var i = 0; i < 5; i++) {
for (var i = 0; i < 5; i++) {
   if (i == 2) continue;
   if (i == 2) continue;
837行目: 816行目:
Perc_St2.draw();
Perc_St2.draw();


const Perc_St3 = new Stave(Perc_St2.width + Perc_St2.x, Perc_St2.y, nStaveWidth).setContext(ctx);
const Perc_St3 = new VF.Stave(Perc_St2.width + Perc_St2.x, Perc_St2.y, nStaveWidth).setContext(ctx);
for (var i = 0; i < 5; i++) {
for (var i = 0; i < 5; i++) {
   if (i == 2) continue;
   if (i == 2) continue;
844行目: 823行目:
Perc_St3.draw();
Perc_St3.draw();


const Perc_St4 = new Stave(Perc_St3.width + Perc_St3.x, Perc_St3.y, nStaveWidth).setContext(ctx);
const Perc_St4 = new VF.Stave(Perc_St3.width + Perc_St3.x, Perc_St3.y, nStaveWidth).setContext(ctx);
for (var i = 0; i < 5; i++) {
for (var i = 0; i < 5; i++) {
   if (i == 2) continue;
   if (i == 2) continue;
853行目: 832行目:
})();
})();


const svgElement2 = document.querySelector('#yonet202403Mid_Output01 svg');
const svgElement2 = document.querySelector('#yonet202404Mid_Output01 svg');
svgElement2.style.backgroundColor = '#F5F5F5';
svgElement2.style.backgroundColor = '#F5F5F5';
var svgContainer = document.getElementById('yonet202403Mid_Output01');
var svgContainer = document.getElementById('yonet202404Mid_Output01');
var svgElement = svgContainer.querySelector('svg');
var svgElement = svgContainer.querySelector('svg');


1,142行目: 1,121行目:


<syntaxhighlight lang="javascript" line start="1" highlight="">
<syntaxhighlight lang="javascript" line start="1" highlight="">
<div id="yonet202403Mid_Output01"></div>
<div id="yonet202404Mid_Output01"></div>
<script>
<script>


2024年4月17日 (水) 22:16時点における版

VexFlow 使い方に戻る。

概要

　

　

タブ譜 ミュート


　コードは以下のとおりです。 


<div id="yonet202404Mid_Output01"></div>
<script>


　

　

VexFlow 使い方に戻る。

「https://wiki.yo-net.jp/index.php?title=VexFlow_タブ譜_ミュート&oldid=7848」から取得