How to sequentially add notes... instead of adding them to the same chord

[Sven Haiges]

Hi all, 

consider me a super beginner that wants to put a basic music notation (nursery rhymes/music) onto a music notation using vexflow. I know there is vextab, but I am familiar with JavaScript and have a basic example running. My problem is that I want to add multiple chords, then maybe even switch to a new line once the space is taken. Right now my notes appear in the same chord. Can anyone show me a super simple example of how that works?

I know this is a super simple, I apologize for not getting this myself but I am sure anyone here can quickly point me in the right direction... 

My current code:

      var canvas = $("#musicCanvas")[0];

      var renderer = new Vex.Flow.Renderer(canvas, Vex.Flow.Renderer.Backends.CANVAS);

      var ctx = renderer.getContext();

      var stave = new Vex.Flow.Stave(10, 0, 500);

      stave.addClef("treble").setContext(ctx).draw();

      //notes

      // Create the notes

      var notesA = [

        new Vex.Flow.StaveNote({ keys: ["c/4"], duration: "q" }),

        new Vex.Flow.StaveNote({ keys: ["d/4"], duration: "q" }),

        new Vex.Flow.StaveNote({ keys: ["e/4"], duration: "q" }),

        new Vex.Flow.StaveNote({ keys: ["f/4"], duration: "q" }),

      ];

      var notesB = [

        new Vex.Flow.StaveNote({ keys: ["g/4"], duration: "q" }),

        new Vex.Flow.StaveNote({ keys: ["a/4"], duration: "q" }),

        new Vex.Flow.StaveNote({ keys: ["g/4"], duration: "q" }),

        new Vex.Flow.StaveNote({ keys: ["a/4"], duration: "q" })

      ];

  

      var voiceA = getVoice(notesA);

      var voiceB = getVoice(notesB);

      // Create a voice in 4/4

     

      // Format and justify the notes to 500 pixels

      var formatter = new Vex.Flow.Formatter().

        joinVoices([voiceA, voiceB]).format([voiceA, voiceB], 500);

      // Render voice

      voiceA.draw(ctx, stave);

      voiceB.draw(ctx, stave);    

[LarryKu]

If I understand your example correctly, you are trying to enter double-stops (2 note chords). To add a chord of two or more notes, you only need one voice unless you want the upper notes(s) with stems up and the lower note with stems down. For your example, recode voiceA as follows and delete voiceB.

      //notes

      // Create the notes

      var notesA = [

        new Vex.Flow.StaveNote({ keys: ["c/4, g/4"], duration: "q" }),

        new Vex.Flow.StaveNote({ keys: ["d/4, a/4"], duration: "q" }),

        new Vex.Flow.StaveNote({ keys: ["e/4, g/4"], duration: "q" }),

        new Vex.Flow.StaveNote({ keys: ["f/4, a/4"], duration: "q" }),

      ];

This should give you the same notes.

[Sven Haiges]

No, sorry, I just expressed my issue really badly. With the solution you gave me, I get two connected notes, right? that's not what I want. I simply want to have the "second" nots appear sequentially after the last note. e,g, I want to have 

c->d>e>f>g>h>a>h>c

and not 

c+g -> d+h, etc.

I guess this is super simple, but I do not see the solution.

Cheers

Sven

[Mohit Muthanna]

That's one voice, with a StaveNote object for each note. E.g.:

      var canvas = $("#musicCanvas")[0];

      var renderer = new Vex.Flow.Renderer(canvas, Vex.Flow.Renderer.Backends.CANVAS);

      var ctx = renderer.getContext();

      var stave = new Vex.Flow.Stave(10, 0, 500);

      stave.addClef("treble").setContext(ctx).draw();

      //notes

      // Create the notes

      var notesA = [

        new Vex.Flow.StaveNote({ keys: ["c/4"], duration: "q" }),

        new Vex.Flow.StaveNote({ keys: ["d/4"], duration: "q" }),

        new Vex.Flow.StaveNote({ keys: ["e/4"], duration: "q" }),

        new Vex.Flow.StaveNote({ keys: ["f/4"], duration: "q" }),

        new Vex.Flow.StaveNote({ keys: ["g/4"], duration: "q" }),

        new Vex.Flow.StaveNote({ keys: ["a/4"], duration: "q" }),

        new Vex.Flow.StaveNote({ keys: ["b/4"], duration: "q" }),

        new Vex.Flow.StaveNote({ keys: ["c/5"], duration: "q" }),

      ];

      var voiceA = getVoice(notesA);

      // Create a voice in 4/4

     

      // Format and justify the notes to 500 pixels

      var formatter = new Vex.Flow.Formatter().

        joinVoices([voiceA]).format([voiceA], 500);

      // Render voice

      voiceA.draw(ctx, stave);

--
--
You received this message because you are subscribed to the Google
Groups "vexflow" group.
To post to this group, send email to vex...@googlegroups.com
To unsubscribe from this group, send email to
vexflow+u...@googlegroups.com
For more options, visit this group at
http://groups.google.com/group/vexflow?hl=en
 
---
You received this message because you are subscribed to the Google Groups "vexflow" group.
To unsubscribe from this group and stop receiving emails from it, send an email to vexflow+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.
 
 

--
Mohit Muthanna [mohit (at) muthanna (uhuh) com]

[Sven Haiges]

Thx, but when I run this i get this:

Uncaught RuntimeError: Too many ticks. 

What's in getVoice? I guess I do something wrong in there then.

[Sven Haiges]

ok, got it.

function getVoice(notes)

{

      var voice = new Vex.Flow.Voice({

        num_beats: 8,

        beat_value: 4,

        resolution: Vex.Flow.RESOLUTION

      });

      // Add notes to voice

      voice.addTickables(notes);  

      return voice;

}

Now just one question - what if I want to have the "typical" vertical line after the 4 quarter notes in this case? Is there a flag I can turn on?

Thx

Sven

[Mohit Muthanna]

Right, that's because you're overflowing the voice. You can change the quarter notes to eighth notes (change "q" to "8"). Or initailize the voice as 8/4.

[Mohit Muthanna]

On Fri, Mar 22, 2013 at 10:37 AM, Sven Haiges <sven....@gmail.com> wrote:

ok, got it.

function getVoice(notes)

{

      var voice = new Vex.Flow.Voice({

        num_beats: 8,

        beat_value: 4,

        resolution: Vex.Flow.RESOLUTION

      });

      // Add notes to voice

      voice.addTickables(notes);  

      return voice;

}

Now just one question - what if I want to have the "typical" vertical line after the 4 quarter notes in this case? Is there a flag I can turn on?

You'll have to draw a BarNote in between.

But realistically, it's much simpler if you use the VexTab javascript library and feed the music in directly. VexTab takes care of all the details (accidentals, modifiers, bars, key signatures, etc.) Else, you'll have to reimplement all this logic yourself.

Mohit.