Search code examples
javascriptvexflow

Render treble and bass staves with vexflow


I have been following the vexflow tutorial for rendering which gives an example for rendering a single stave. This works fine. I now want to render both the treble and the bass which is not explained in the guide. The simplest way I can think of is to just duplicate the example code to render both.

enter image description here

This kind of works but if I take an example rendered using another tool you can see my example is missing the { joining both sides as well as the line between the bars. Does vexflow offer some built in functionality to render both staves?

musescore rendered sheet


Solution

  • After looking through the tests it looks like the way to do this is to use VF.StaveConnector

      new VF.StaveConnector(stave, stave2)
          .setType('single')
          .setContext(context)
          .draw();
    
      new VF.StaveConnector(stave, stave2)
          .setType('brace')
          .setContext(context)
          .draw();
    

    This adds the straight line and the curly brace.