0xfe/vexflow

A JavaScript library for rendering music notation and guitar tablature.

vexflow's Issues

Guitar tablature editor

Hi all,

First of all congratulations for the great library you're developing. It's getting quite impressive.
I used to check it some monthes ago and I didn't have so many features as I see today, so I decided to create something by myself for a custom guitar editor i'm developing.
You can see it working in the following link:
http://kile.stravaganza.org/lab/js/guitartab
Basically you Add Tabs sections and using the mouse or the cursors you move around the tab lines and press which fret you want to play. You can use the shortcuts 'h', 's', 'v',.. for hammers, slides, vibrato.. etc.

The idea of this webapp is to allow flamenco guitarrist with low level of musical score theory to write down their songs instead of using simply textbased tabs.

Flamenco has also some special techniques like for example hitting the wood so I needed these special symbols too.

After checking your new advances I'm thinking about give a try and create a little parser for my data to vexflow syntax.
Could you recommend me how to make it, I mean, as I'm not going to edit note but frets numbers I don't know if could be a good idea to create each note like a quarternote and each space a quarternote silencce...
Also when I tried to use vextab format I found some problems while trying to create simple transcriptions with modifiers like for example something simple like:
--0------
--2------
--2-h-3-
--2-------
--0-------
---------.

Should I use the vextab format? Or directly the vexflow syntax?

Sorry for the loooooooooong post :)

Formatting Bug

I discovered a bug in the formatter. You can see a picture here: http://i.imgur.com/aLGkm.png

The code to replicate it is below.

var canvas   = $("#canvas")[0];
var renderer = new Vex.Flow.Renderer(canvas, Vex.Flow.Renderer.Backends.CANVAS);
var ctx      = renderer.getContext();
var stave    = new Vex.Flow.Stave(0,0, 200)

stave.setContext(ctx).draw();

var notes = [
    new Vex.Flow.StaveNote({keys: ["A/4"], duration: "q"}),
    new Vex.Flow.StaveNote({keys: ["A/4"], duration: "64"}),
    new Vex.Flow.StaveNote({keys: ["A/4"], duration: "64"})
    ]

Vex.Flow.Formatter.FormatAndDraw(ctx, stave, notes);

Basically, it seems that Vex.RERR("NoRoomForNotes") doesn't get thrown.

I tried to track down the source of the bug and it looks like in the Vex.Flow.Formatter.preFormat function the minTotalWidth is based on a sum total of all the widths of the notes, but doesn't take into account the whitespace of the tickContext So the minTotalWidth is inaccurate to what is actually needed to fit all the notes.

There seems to be two paths:

Either:

• We simply fix this to throw Vex.RERR("NoRoomForNotes")
• OR We adjust the formatter to shorten the whitespace of previous high duration tickContexts to allow for more short duration tickContexts in a Stave with a small width.

Not sure what the actual intention of the API is here.

Ability to display notation only

Hi,

Love vexflow/tabdiv. I'd like to be able to display only notation, not tablature, and have written code that mostly works for doing this (by adding "notation=true tablature=false" to the tabstave tag). The issue with my code is that the notes all display but the note flags are not connecting and I'm getting "Uncaught RuntimeError: Note needs a TickContext assigned for an X-Value".

What's the best way on github to show you this code? A gist? A fork/pull request?

Beam display algorithm results in abnormally high beams

See http://ice-nine.org/adamf/bad-beams.png

The code to generate this image:

tabstave notation=true
notes :w 4/5

tabstave notation=true
notes :8 [ 1/1 1/3 1/4 1/5 ] [ 1/6 1/1 1/5 0/1 ]

tabstave notation=true
notes :8 [ 1/1 1/3 1/4 1/5 ] [ 1/6 1/1 ] [ 1/5 0/1 ]

I think there's a few reasonable approaches to this; one is ignore it and let the user only beam notes that have similar velocities of pitch (that's the current approach). Another is to adjust the slope of the beams such that the slope is never an angle above a few degrees, calculated from the highest stem being beamed. Third is automatic beaming, discussed below. Thoughts?

It'd be nice to have an automatic beaming option that handles proper beaming rules, but that's a larger change. I have some ideas around this that I might implement in the next few weeks if I get riled up.

Rests must be positionable with multiple voices.

Currently rests are rendered at a fixed position on the stave. This does not work well when there are multiple voices. Either the user should be able to specify a position for the rest, or one of the context managers should automatically position it.

Rendering drum notation

Hi, I'm still pretty new to javascript so, I'm sorry if I come across badly. I've started writing a musicxml parser for vexflow to render drum notation however, I'm unsure as to how I would go about rendering a neutrall clef and (unless it already exists in vexflow) an 'x' note head. I'm assuming it will be the clef.js and the glyph.js files I'll need to use?

...I'm a quick learner, it just takes me forever to find where to start :p

Explain in the tutorial how to use Stave Connectors

Thanks a lot for this great app.
I am trying to learn it for piano.
I found that you can implement Stave Connectors, but I don't see how to do it in the tutorial.
Please, can you explain it in the tutorial?
Thanks a lot

Support for sixty-fourth notes

Hello!

Any chance there will be support for 64th notes soon?

Best,
Raffaele

piano score support

I think it would be cool if we could get piano score support in vexflow, i.e. something like:

I know there is currently a stave connector, but as far as I know the brace used to connect the two staves in a piano score is not implemented. Also, as this seems to be pretty commonly used, it would be nice to have an easy way to create a connected stave of this sort, and add notes to it.

Fractional Development

forking the fractional duration discussion from issue #20 here. to start off the fractional timings development, i wrote a fraction class to facilitate fractional calculation.

https://gist.github.com/2370065

some notes here - its not thoroughly tested and completed in anyways, so feel free to comment, but it should be able do basic operations.

The class is also not immutable. this is to prevent tons of unwanted fraction objects from being created and GC-ed.

Usage

var fractionA = new Vex.Flow.Fraction(1, 2);
var fractionB = new Vex.Flow.Fraction(3, 4);
var total = new Vex.Flow.Fraction();

the normal operations

total.add(fractionA, fractionB);
total.subtract(fractionA, fractionB);
total.multiply(fractionA, fractionB);
total.divide(fractionA, fractionB);

other operations

total.value(); // returns a float representation
total.simplify(); // reduce to its simplest form
total.clone(); // create a new fraction class with its value
total.copy(fractionA); // copies value of fractionA into itself
total.toString(); // string representation

utils methods

fract.gcd();
fract.lcm();

updated

total.parse(str); // parse a fraction
total.fraction(); // trancat to its fractional component
total.toSimplifiedString(); // returns a simplified string representation
total.toMixedString(); // returns a simplified mixed form string representation
total.abs(); // turns itself positive

TabDiv scale property does not zoom in/out tablature with canvas

<div class="vex-tabdiv" width="500" scale="2.0">...

When using TabDiv with Raphael.js for SVG the scale property works correctly by zooming in/out the tab just like a browser can zoom in/out webpages.

When using TabDiv with canvas (no Raphael.js) the scale property does not zoom in/out the tab, instead it just increases the width and height of the canvas. It seems like the code ctx.scale(this.scale, this.scale) in tabdiv.js is being ignored or overwritten which is causing the tab not to zoom.

Is this a bug with TabDiv?

Tempo for a Stave

It's not really a issue, but i'm wondering if there a way to draw a Tempo(BPM) for a Stave.

I searches Google Groups, Repository and the official Tutorial without success. If im wrong sorry for the mistake!

It would be very helpful.

TabDiv handling input differently in Firefox 3.6 and IE 8

TabDiv is capable of being displayed in both Firefox and IE 8. However, TabDiv is not processing the input in IE because it is formatted differently than in Firefox. I think this is due to the use of the jQuery .text() function before .spit() is called. jQuery's API states "Due to variations in the HTML parsers in different browsers, the text returned may vary in newlines and other white space." Therefore, I don't think b=b.split("\n"); is correctly parsing in IE. One solution may be to parse based on another input, but I'm not skilled enough to modify this code. Just wanted to point it out.

How input is interpreted in Firefox:
tabstave notation=true
notes 4-5-6/3 10/4

How input is interpreted in Internet Explorer:
tabstave notation=true notes 4-5-6/3 10/4

Incorrect Stem Length on 1/32nd & 1/64th Notes

For 1/32nd & 1/64th notes, the stem needs to be lengthened to accommodate the extra flags and beam bar.

Render rest (pause note) with TabDiv

Is it possible to render rest with TabDiv?

Two small code "typos?"

Hello. I've been familiarizing myself with the Vex.Flow code, and noticed two small things (perhaps typos?)

1. in Vex.Flow.TimeSignature

(line 27) Vex.Flow.TimeSignature.prototype.constructor = Vex.Flow.KeySignature;

Should this be

Vex.Flow.TimeSignature.prototype.constructor = Vex.Flow.TimeSignature;
?

1. in Vex.Flow.Tickable

(line 28) Vex.Flow.Tickable.prototype.addToModifierContext = function(mc) {
(line 29) this.modifierContext = modifierContext;

Should this be

this.modifierContext = mc;
?

Jon

Add support for slurs

Some of the complexity here is with multiple voices and determining where the slur is positioned.

It's straightforward for a single voice.

We also need to figure out if slurs are rendered above or below articulations.

Problem with chord accidental on wrong line.

Based on my understanding the following code should add a flat to the A, but it is rendered on the B

var notes = [
    new Vex.Flow.StaveNote({ keys: ["B/4", "A/4"], duration: "q",  stem_direction: 1})
];  

//Add flat to the A  
notes[0].addAccidental(1, new Vex.Flow.Accidental('b'));

Rendering error on Google Chrome 7

Running Google Chrome 7.0.517.36 beta on Ubuntu 10.10, I get the following rendering error: http://dl.dropbox.com/u/177495/vextab-error01.png

Request for VexFlow font help

A project I am doing requires augmenting the vexflow.js font with some newfangled invention of alternate musical symbols.

The form of the data used in /vexflow/src/fonts/vexflow_font.js -

Is there any better starting point than the outline paths from an .svg file?

If you have a good recommendation for what tool is good for generating this path data (besides my brain) I would be glad to know it. Perhaps it could even be included in the project. I realize both of these requests are digressions from the project, so I apologize for that. Also involved in our project is a graphic designer with a Mac, so my dream is to have the graphic designer make the font and then I can use some available software to have the glyphs generated for vexflow.

Fails to render on Wordpress

I can't get TabDiv to actually render anything on my self-hosted Wordpress site. The Javascript files are loading properly, but the appropriate div just renders plaintext instead of a stave with musical notes. There are no console errors.

If I try this on a bare-bones web page outside of Wordpress, it works fine. Deactivating all non-default plugins did not help.

Wordpress version is 3.4.2. Tested on latest versions of IE, Firefox, and Chrome on Windows (I assume Mac exhibits the same behavior).

Render dotted note with TabDiv

I found this closed issue: #5

Looks like API allows to render dotted notes, but I can't find a way to render it with TabDiv.
Does TabDiv support dotted notes?

Simple lines don't render with stock tabdiv-free

I downloaded tabdiv-free from the vexflow website on 02/21 and tried to render this code:

tabstave notation=true tablature=true notes :w 4/5 1/4 1/5 2/1

tabstave notation=true tablature=true notes :h 2/2 0/3 3/1 1/5 0/1 1/0 2/0 1/1

tabstave notation=true tablature=true notes :q 3/5 0/0 3/3 3/1 | 2/2 1/3 0/1 4/1 | 0/1 3/4 3/1 1/3 | 3/5 0/1 3/4 0/5

Only the first (whole notes) line renders. If i put them all in the same div, same problem. If they are under one tabstave, nothing renders. Tried under Chrome latest and FF4.0 latest beta. No errors are printed to the javascript console in chrome or firebug.

Add support for arpeggiation.

Example:

https://twitter.com/mikekneller/status/290075301390741505/photo/1

This seems straightforward to implement as a Modifier.

Render clefs in the middle of a measure

Hey guys,

I'm trying to get some different lead sheets rendered, and I'm actually doing quite fine up till now. Trying to render "Footprints", by Wayne Shorter, with a clef-change from measure 20 to measure 21, I just can't figure out a way to place the clef properly (at the end of measure 20, and again at the beginning of measure 21).

Is it not possible to render a clef, just like a regular StaveNote in some way?

(Maybe related to #23), Regards
Jakob Miland

Build issue: File src/stavetempo.jstremelo.js not found

I'm just tried running scons and that is what it told me. Perhaps I'm missing something.

Accidental display

There's a couple of issues with how accidentals (sharps and flats) are being displayed. In traditional music notation, an accidental affects that note for the rest of the measure (or sometimes the rest of the line), so if you want to go back to the natural form of the note within the same measure (or line) it should be "cancelled" with a natural. So for example, if you have a G#4 in a measure, the next G4 should have a natural symbol.

This problem can be avoided in most cases by using the complementary accent from the other note (for example, A-flat instead of G-sharp) if there are uses of that natural note within the measure. That also tends to make for more readable music.

There's a lot more than you'd ever want to know about this stuff at this article: http://en.wikipedia.org/wiki/Accidental_(music)

Vertically align rests within beams

Rests inside beamed notes need to be correctly vertically positioned.

Problem with tenor and alto clefs

0xfe,

With the following code :

new Vex.Flow.StaveNote({ clef: "tenor", keys: ["d/3"], duration: "q" })
new Vex.Flow.StaveNote({ clef: "alto", keys: ["d/3"], duration: "q" })

keys are still in treble clef.

No problem with bass clef, the tranposition is done.

Congratulations for your API

C Major Chord in chord chart has c# and F

Last two notes are one fret two 'high
chords: [
{
name: "C Major",
chord: [[1, 0], [2, 1], [3, 0], [4, 3], [5, 4]],
position: 0,
bars: []
},

should be:
chords: [
{
name: "C Major",
chord: [[1, 0], [2, 1], [3, 0], [4, 2], [5, 3]],
position: 0,
bars: []
},

Runtime error when crotchet (q) triplet followed by semiquaver (16)

I have some code which works fine when you diplays a 1/4 note triplet followed by a 1/8 note. However, if you make a single change to the code to alter the 1/8 note to a 1/16 note you get a runtime error: 'Beams can only be applied to notes shorter than a quarter note'. (I am using automatic beamimg.)

Code to reproduce this error is provided below.

//Contructor
function maTest2 (){
    this.renderer = new Vex.Flow.Renderer('canvas1', Vex.Flow.Renderer.Backends.CANVAS);
    this.ctx = this.renderer.getContext();  

    this.vStave1 = new Vex.Flow.Stave(25, 10, 850);
    this.vStave1.addClef("treble");
    this.vStave1.addTimeSignature("4/4");
    this.vStave1.addKeySignature('C');

    var notes1 = [
        new Vex.Flow.StaveNote({ keys: ["c/4"], duration: "q",  stem_direction: -1}),
        new Vex.Flow.StaveNote({ keys: ["c/4"], duration: "q", stem_direction: -1}),
        new Vex.Flow.StaveNote({ keys: ["c/4"], duration: "q",  stem_direction: -1}),
        //new Vex.Flow.StaveNote({ keys: ["e/4"], duration: "8",  stem_direction: -1}),
        new Vex.Flow.StaveNote({ keys: ["e/4"], duration: "16",  stem_direction: -1}),
    ];  

     var voice1 = new Vex.Flow.Voice({
        num_beats: 4,
        beat_value: 4,
        resolution: Vex.Flow.RESOLUTION
     });

    var tuplet1 = new Vex.Flow.Tuplet(notes1.slice(0, 3));

    voice1.setStrict(false);        
    voice1.addTickables(notes1);

    var beams1 = Vex.Flow.Beam.applyAndGetBeams(voice1);

    var formatter = new Vex.Flow.Formatter().
        joinVoices([voice1]).format([voice1], 420);

    this.vStave1.setContext(this.ctx).draw();   
    voice1.draw(this.ctx, this.vStave1);

    tuplet1.setContext(this.ctx).draw();

    for(var i = 0; i < beams1.length; i++){
        beams1[i].setContext(this.ctx).draw();
    }    
}   

Add support for cross stave beams.

This would require small changes to the beam and stem drawing code.

Also, ghost notes will have to be added to partner staves for synchronization.

Parse Error : trailing commas

Every Time i compile the last 0xfe/Vexflow(or any fork using it) i got a Error on file src/tables.js :152 (Internet Explorer has a non-standard Interpretation of trailing commas).

Thanks
3logy

Auto-beaming gets confused by rests.

It looks like the beaming code doesn't take rests into consideration.

Here's an example:

http://my.vexflow.com/articles/95

Stems Down Support

I realize that adding an integrated capacity for dual-clefs (treble + bass) is probably a long way off (and certainly complex), but I'm wondering if in the meantime we can get bass clefs to show notes stems down (perhaps as an option), as when displaying both a treble clef and bass clef typically bass clef stems are down.

This will at least allow me to render a bass clef below a treble clef and more-or-less get bass notes to line up decently with associated treble notes in a chord that spans both clefs. In my testing, aside from the issues reported in the other ticket regarding bass clef interpretation of key/octave values, with stems down this should show decently even if the notes aren't lined up completely due to the potential presence of accidentals on only one clef.

Render arbitrary text over each note

Is it possible to render arbitrary text over each note and if yes how? Texts over notes do not have to be in the same height, they only have to be over the stave.

This is what I would like to achieve:

My larger goal is to automatically render tabs for harmonica, so it is easier to learn to play it. The text would contain hole numbers along with some harmonica tabs modifiers.

Adding new bar lines to vextab

I am working on updating the Vexflow tutorial to describe how to use the new bar lines in stavebarline.js. We currently have two techniques for adding bar lines - using multiple staves per line or using one stave per line and using barnote.js to draw the bar lines. VexTab uses the second technique to draw bar lines with barnote.js. I have attempted to update barnote.js to utilize stavebarline.js here: http://code.gregjopa.com/vexflow-barnote-test/docs/tutorial.html (scroll to the bottom and check out technique 2 in step 6). However, this new barnote.js code a bit hacky since stavebarline.js inherits from stavemodifier.js while barnote.js inherits from note.js. This brings up the design question - should bar lines be derived from notes or from stave modifiers?

I see two options to resolve this issue:

1. Eliminate barnote.js and update VexTab to use multiple staves per line
2. Rewrite stavebarline.js to derive from note.js and support both techniques for adding barlines

Play button?

I'm sure I'm not the first to suggest this, but would it be within this project's scope to include a play button so that you can listen to the score? I think that would be really helpful!

Origin in rest glyphs

To render a dotted eights rest I use the following VexFlow code:

var note = new Vex.Flow.StaveNote({keys:['b/4'], duration:'8r'});
note.addDotToAll();
// rendering code snipped

However, while the rest itself is placed correctly, the dot is placed on the center line instead of on the second space from above.

I think the problem is that the origin of the rest glyph is at the wrong place. In my opinion, the correct location of the rest would be c/5 instead of b/4.

It seems this holds for the other rest glyphs, too, although I only checked the quarter and eights rest.

Add support for rests to VexTab

Rendering Stave Modifiers between Notes

It seems that clefs/ other stave modifiers are currently rendered separately from notes/voices.

Is there a way to render a clef/key signature in between notes?

For example

[ "Treble" "D major" "4/4" c d e f "Bass" e f .... ]

Right now, all stave modifiers gets rendered to the left of the notes.

Add tuplet support to Vextab

Improve the chaining by returning current object.

I want to suggest to review the code and find the points where is possible to return current object for chaining.

I've found one such point here:

https://github.com/0xfe/vexflow/blob/master/src/stavenote.js

line 269:

// Pre-render formatting
Vex.Flow.StaveNote.prototype.preFormat = function() {
  if (this.preFormatted) return;
  if (this.modifierContext) this.modifierContext.preFormat();

  this.setWidth(this.glyph.head_width + this.extraLeftPx + this.extraRightPx);

  this.setPreFormatted(true);
}

It's obviously, that it is possible to write it like next one:

// Pre-render formatting
Vex.Flow.StaveNote.prototype.preFormat = function() {
  if (this.preFormatted) return this; // return this for chaining
  if (this.modifierContext) this.modifierContext.preFormat();

  this.setWidth(this.glyph.head_width + this.extraLeftPx + this.extraRightPx);

  this.setPreFormatted(true);
  return this; // return this for chaining
}

Semantics of "Stave"

Since the API requires one to use multiple Stavess for measures (excluding the barline hack), doesn't that make the name of Stave a little semantically awkward? Abstractly, there are multiple measures on a single stave (which would take up the width of a page), not a single measure for a single stave.

Thoughts?

docs/sandbox.html is broken. Fix it.

The external link is: http://vexflow.com/docs/sandbox.html.

ModifierContext x shift computation faulty for two different clefs, or multiple keys in a StaveNote

I discovered this when trying to build a way to consistently render a chord. The chord will consist of two StaveNotes - one for treble clef, and one for bass clef - and within each StaveNote is two keys (I'm basically showing a piano voicing for a Jazz chord).

I'm using a ModifierContext in attempting to get all four keys to line up properly, regardless of which keys have accidentals, in either of the two StaveNotes. Ideally I'd like for all four keys to share the same stem too, but really I just want to get them lined up.

In tracing through the code I found that Vex.Flow.ModifierContext.prototype.formatNotes is what attempts to set x_shifts on notes to get them to line up. The conditional that ultimately decides whether to set the x_shift at all is:

if (top_keys[0].line <= (bottom_keys[bottom_keys.length - 1].line + 0.5)) {

There are two problems with this:

Assuming First Key

It's only considering the first key in each StaveNote, which may not make sense. It sounds like you really want the minimum or maximum line value for all keys within a StaveNote, no? I guess as long as the keys are ordered properly it doesn't necessary matter, since it's assuming the first and last respectively. There's even a TODO comment above it that seems to suggest this:

// XXX: Do this right (by key, not whole note).

Assuming Same Clef

The comparison of the line value makes sense within a given clef, but not across clefs. So in my case it's looking at a top_note in treble clef and a bottom_note in bass clef, yet their "line" values are only really specific to that particular clef. So my case is failing the conditional even though in reality it should be passing and setting setting that x shift on the bottom note. It sounds like we really should be comparing line values based off some sort of clef line offset.

Once I get some time and can dig more into VexFlow (and get a local development environment set up) I might try to fix this myself, but in case it's a fairly easy fix for any of the core developers I'm reporting it here. I think a fix here would do a lot to solve formatting issues with chords spanning clefs, with multiple keys each.

adding new StaveNotes to stave with bass clef

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

and adding a note

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

the notes doesn't care the clef.

Formatter Quirk

I have created a new "strokes" class to add brush strokes and rolls (arpeggiated chord) into the notation. I was able to successfully modify "modifiercontext" to format the strokes with the appropriate "left_shift" spacing. When I created the tests, the second triad with the accidentals seems to be stealing space from the 3rd triad as opposed to stealing the space between the 1st and 2nd triads (see example link below). This is true with or without the strokes (stave 1 versus stave 2).

I believe the second triad should be stealing the space between stave 1 and stave2 so all triads are spaced basically the same. In this case the space between triad 1 and triad 2 will be greater, but not that much. Is the current spacing between triads the desired approach for VexFlow?

http://el-kay.com/test/tests/aa.html

Thanks
Larry

Automatic beaming overrides stem direction.

It appears that automatic beaming overrides the notes stem direction. This is a problem because where you have two voices on a stave it is good to have all the stems of one voice running in one direction and the stems of the other voice running in the opposite direction.

Automatic Beaming

I'm using VexFlow to render entire scores, which works very good so far. But as I don't have any information about the notes' beams and ties I was thinking about automatically beaming notes in some sort of pre-processing step.
I found an algorithm that seems suited: http://issuu.com/tobyrush/docs/beaming
Now I was wondering how to actually start implementing this. Oviously the easiest solution is to do the calculations beforehand and pass the resulting beamed notes to VexFlow. But then again, should'nt this be an actual part of VexFlow? I mean it would be awesome if you just passed the notes and they were (optionally) beamed automatically.
What do you think about it? Should this be part of VexFlow, and if so, where would one start to implement such behaviour? Can anyone give me an advice or point me into the right direction?