Git Product home page Git Product logo

vextab's Introduction

VexTab 3.0

A VexTab Parser for VexFlow. Copyright (c) 2012 Mohit Muthanna Cheppudira.

Need Help? Ask on the VexFlow Google Group.

What is VexTab?

VexTab is a language that allows you to easily create, edit, and share music notation and guitar tablature. Unlike ASCII tab, which is designed for readability, VexTab is designed for writeability.

Go try it out at The VexTab Tutorial.

If you want to save and share your VexTab, try out My Vexflow.

To see what VexTab can do, take a look at the list of features.

Quick Start

Simply include dist/div.prod.js into your HTML document via a script tag. The contents of all div elements with the class vextab-auto are parsed as VexTab and automatically rendered in-place as music notation.

<div class="vextab-auto"
    width=680 scale=1.0 editor="true"
    editor-width=680 editor-height=330>
    options space=20
    tabstave notation=true key=A time=4/4

    notes :q =|: (5/2.5/3.7/4) :8 7-5h6/3 ^3^ 5h6-7/5 ^3^ :q 7V/4 |
    notes :8 t12p7/4 s5s3/4 :8 3s:16:5-7/5 :h p5/4
    text :w, |#segno, ,|, :hd, , #tr

    options space=25
</div>

Some of the available div attributes are:

  • editor: true|false -- Enable/disable live editor. Default false.
  • scale: 0.5 -> 3.0 -- Scale factor for rendering. Default 1.0.
  • editor-width, editor-height: pixels -- Dimensions of editor.

Note that the provided dist/div.dev.js bundle is unminified, and dist/div.prod.js is minified. They include bundled versions of zepto, lodash, and VexFlow. You can get access to some of these classes, and the VexTab API (see below) via the vextab global.

  • vextab.Div: The TabDiv class used to implement the auto-render functionality for div elements.
  • vextab.VexTab: The parser. See API below.
  • vextab.Artist: The renderer. See API below.
  • vextab.Vex: The Vex namespace from the VexFlow library.

VexTab API

If you want to do more interesting things with VexTab, you can use the API directly.

$ npm install vextab

Basic usage jsfiddle

import {VexTab, Artist, Vex} from 'vextab';

const Renderer = Vex.Flow.Renderer;

// Create VexFlow Renderer from canvas element with id #boo
const renderer = new Renderer($('#boo')[0], Renderer.Backends.SVG);

// Initialize VexTab artist and parser.
const artist = new Artist(10, 10, 600, { scale: 0.8 });
const tab = new VexTab(artist);

try {
    tab.parse('tabstave').val());
    artist.render(renderer);
} catch (e) {
    console.error(e);
}

See tests/playground.js for a working example of the VexTab API in use.

Developers

Clone this repository. Then run the following commands to setup a basic build and run tests:

$ npm install
$ npm start

If you have the grunt-cli NPM package installed, you can manually run the various build steps:

Browse to http://localhost:9005 to run tests.

Publishing new packages

Update vexflow dependency if necessary.

$ npm install -g grunt-cli
$ npm upgrade vexflow
$ grunt (lint|build|publish)

Before sending in a pull request, make sure that the tests pass a visual inspection. Open http://localhost:9005 in your browser and verify that the notation examples at the bottom of the page render correctly. Also open http://localhost:9005/playground.html and verify that your new feature/bug fix, etc. works correctly.

Please add new tests for whatever you're working on. Don't send PRs without tests. Thanks!

Working with a local VexFlow installation

$ git clone vexflow_repo
$ cd vexflow
$ npm link
$ cd ~/git/vextab
$ npm link vexflow

You may have to run npm link vexflow everytime you install or upgrade an npm package.

Other Dependencies

This rewrite of VexTab has three key dependencies:

  • CoffeeScript - A nicer JavaScript.
  • Jison - An LALR(1) parser modeled on Bison.
  • lodash - A utility-belt library for JavaScript.

For the audio player feature, you need:

  • MIDI.js - A soundfont renderer for the web.
  • Soundfonts for various instruments - See MIDI.js for more information.

Help

Questions? Ask the VexFlow Google Group.

License

VexTab is an open specification and the reference implementation (this repository) is open source. It is freely available complete and uncrippled for non-commercial use.

If you would like to use this code on commercial websites, products, blogs, plugins, or tools, please get in touch with me. (I'm very reasonable.)

Copyright (c) 2012 Mohit Muthanna Cheppudira

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

The above copyright notice shall be included in all copies or substantial portions of the Software.

Note: The underlying library, VexFlow, is completely open source and distributed under the MIT license. See the VexFlow GitHub Page for details.

Links

vextab's People

Contributors

0xfe avatar dependabot[bot] avatar grahack avatar jilljenn avatar jzohrab avatar krisajenkins avatar pasho avatar paulgiletich avatar tails avatar tcyrus avatar timaschew avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vextab's Issues

Ties at the end of the bar

How do you create ties at the last note of the stave, to the note on a new line stave? I can create one on the new line tying back, but not from the last note tying to the new line.

Hiding accidentals when they are in the key signature

Is there any way to hide accidentals when they are already in the key signature? For instance, if I am in the Key of D, then all C's and F's should be played sharp. So if I set the key signature to the Key of D, and then type:

notes :q C#-E-F#/4

The sharps on the C and the F shouldn't actually appear in the tabliture automatically. Maybe there should be a setting for accidentals. "True" would mean that it always shows accidentals, and "False" means that it only shows accidentals if they are not already in the key signature.

No half note after eight note

Consider this vextab

vextab
options width=400
tabstave notation=true tablature=false
notes :qd X/5 :8 X/5 :h sX/5

The last note is not a half note but a quarter note...

image

accidentals - choose b or #

OK, this is minor, but ... I'd like to be able to specify that the notation use b or # in the options section. I find it jarring to see 3/3 rendered as A# rather than Bb. I know I could write B@, but I can't see how to do it in tab. So something like

options accidentals=flats

Thanks!

ER: Lyrics hyphenation

Hi, it would be great to have hyphenation in lyrics between syllables – to be able to enter one word over multiple notes (e.g. mul–ti–ple). Thank you, zomp

Text on bottom

Hi there, I've read extensively about getting text underneath a bar of music as opposed to on top, and have used several methods (e.g. ++) but none seem to be working. I'll paste the mark up here:

tabstave notation=true tablature=false time=C key=F
notes :q F/4 | :8 F-G/4 :q A/4 :8 D-E/4 :q F/4 | F-E-F-A/4 | A-A-A/4 :8 A-G/4 | :hd F/4
text :q, ++, O,|,Haupt,voll,Blut,und,|,Wun,den,voll,|,Schemrz,und,vol,ler,|,Hohn!

Misplaced sharps/flats

In the following, I'm seeing the # applied to the wrong note (if I move the sharp to C then it shows as though applying to F).

tabstave notation=true tablature=false clef=bass
notes (F#/3.C/3)

Starting 2nd bar with quaver rest blanks the staff - type error

This works:
tabstave notation=true key=Gm time=4/4 tablature=false
notes :8 D/5-D/5 :q ## ## ## | :8 C/5 C/5 C/5 B/4 :q C/5 D/5|

But replacing the first quaver of the 2nd bar with a rest doesn't:

tabstave notation=true key=Gm time=4/4 tablature=false
notes :8 D/5-D/5 :q ## ## ## | :8 ## C/5 C/5 B/4 :q C/5 D/5|

The whole line disappears... javascript uncaught type error undefined is not a function. But I only have the min.js code loaded which isn't much help to you...

Problem with tied notes

Hi, i have some vextab text:
tabstave notation=true time=4/4 key=C
notes :8 (2/5.4/4) (2/5.T4/4)

if you try to draw it, you will see that vex flow make tie between wrong notes
it should be between 4/4-4/4, but vexflow draw it between 2/5-2/5

Is there some mistake in text of it is bug ?

Piano support

The multiple-voice support is very nice for guitar, but, it would be nice of you could write multiple voices for piano. Meaning: two staffs (bass and treble cleff) where the barlines are aligned etc.

Migrate VexTab to Grunt

Goals:

  • Keep build system consistent with VexFlow
  • Get rid of Rake workflow which is problematic for many users
  • Add support for source maps (which comes for free with grunt-contrib-uglify)

How about pre-bends?

Just to be precise, I'm referring to a situation in which one fingers a note, bends it, strikes the note, then releases the bend. Since "p" is already taken by pulloff, I don't have a great suggestion for a letter so i'll just use "z":

         7z8z7/3

would indicate fretting the 7th fret, bending up 1/2 note, striking, then releasing the bend.

If you want to be very fancy, you could allow 7z9z8z7 to indicate a bend up 1 note, then releasing 1/2 note, then releasing one more half note. That may be overkill though.

Adding support for TabStave num_lines options

Hi there,

I'd like to add support for parsing 'lines' as a tabstave option in the vextab artist.
e.g.

tabstave lines=5

I've added an additional key to the opts object (although, do note that these are properties of Staves rather than TabStaves).

890   addStave: (options) ->
891     opts =
892       tuning: "standard"
893       clef: "treble"
894       key: "C"
895       notation: "false"
896       tablature: "true"
897       lines: 6

I confirmed in the playground that passing options to the TabStave constructor like so does work (but would pass opts.lines in practice):

918     if opts.tablature is "true"
919       tab_stave = new Vex.Flow.TabStave(@x, @last_y, @customizations.width -20, num_lines: 5)

I'm having a bit of trouble understanding how to add the grammar for this however. Does there need to be a change to the jison grammar to accommodate this? Adding a lines option to tabstave results in:

Sucky VexTab: Invalid option 'lines' in line 1 column 9

I'll persist with trying to figure it out, but if you could point me in the right direction I'd appreciate it! 😄

ER: Breath mark

Hi 0xfe, could you add breath mark support, please? I suppose it would be easy to implement and it would improve phrasing a lot. Best, zomp

Google Docs: "undefined is not a function"

I don't get an error from having an empty code window, but as soon as I've finished typing tabstave, I see the error message in the subject in red.

I closed all chrome processes, and then tried this in a completely new document in case the first one had been corrupted. This results in a new window with tabstave notation=true, also displaying this error message.

Thanks!

Namespace attributes with data-* prefix

Open to a pull request changing the tabdiv to expect HTML5-reserved data-*-prefixed attributes (e.g., <div data-editor_height="..." instead of <div editor_height="") for namespacing?

javascript error when loading page

i believe i have accidentally broken the vextab parser in my vexflow. i'm now unable to view or edit my article as the following javascript exception keeps being thrown when trying to load the page:

Uncaught TypeError: Object #<t> has no method 'getLineForRest' 

i'm not entirely sure what caused the problem. i was fooling around with voices. that might have something to do with it.

update

probably should have put this issue in vexflow now that i think about it.

tutorial, tab with stems, triplet

I noticed that the very last example in the vextab tutorial - demonstrating tab with stems - should have an opening triplet: notes :8 5/5 5/4 5/3 ^3^ which doesn't show.
adding notation=true to the tabstave options renders the triplet correctly.

Tied Notes, Missing Accidentals

Experimenting, I created a simple melody in My Vexflow and uncovered a few VexTab problems. The article is:

http://my.vexflow.com/articles/287?source=enabled

  1. All tied notes are playing as if there was no tie.
  2. In the second measure, the first D on the 2nd string should have a natural sign. After a new barline, all accidentals from the previous measure are canceled.
  3. The strokes at the bottom of the song should cover all notes in both voices. The problem is there is no way of specifying the stroke end note in the second voice.

My VexFlow - 3 over 2

vextab_parser is not defined

When checking out the repository, running rake and opening up the build/src/playground.html I then the error that

vextab_parser is not defined

which is caused by this line.

ER: Responsive music notation

Hi, this is quite complicated enhancement request, but attractive: Make the staves responsive. It would be very nice to have reasonably wide staves on desktops and mobile devices at once. Thanks, zomp

eight note rest gets appended to prior eight notes, would expect it standing alone

Hi there,

I found that an eight note rest gets appended/prepended to surrounding eight notes instead of standing alone. See my minimal example, with the relevant code

:8 C/4 ##

that produces
minimal-example

Is this by design (e.g. to support multiple voices in a single stave with each its own rests)? If so, is there a way to create an output like (without the bar |)

expected

Thanks in advance (and pretty neat project, btw!),
Dominik

Transport

It would be interesting to allow transport without being necessary to rewrite all the notes in the new key.

for instance:
Transport=+1
Transport=-4

switch from rake to cake or something like that

First of all: this project is really amazing! thanks for it 🙏

I want so ask you if you really need ruby for building the project, because you need node since you writting it in coffee.
And npm has also modules for uglifying and watching the source. These are the libs which you used in ruby, right?

I could do a pull request, if you agree that it makes sense 😉

Commas in lyrics

There doesn't seem to be a way to place commas or special characters in lyrics. Maybe entities of some sort?

Slides to|from nowhere

This would be sliding in from an indeterminate fret, or starting a slide at a specific fret without specifying the endpoint.

To make the parsing easier, maybe it's better not to mess with the current use of "s", and instead use "S" for a slide towards the bridge, and "D" for slide towards the nut:

S9/3 means slide into the 9th from from anywhere higher than the 9th fret
9S/3 means start at the 9th fret and slide towards the bridge
D9/3 means slide up into the 9th fret from anywhere between the bridge and 9th fret
9D/3 means start at the 9th fret and slide towards the nut

Just thinking out loud here ....

Ties missing when preceded by a triplet

Hi there!

It seems there's a subtle bug, or maybe I'm doing something wrong. If a tie is preceded by a triplet, then the tie doesn't illustrate in the clef (just in the tabstave).

Here's an example of the vextab I'm using, with the triplet (and no ties to the B in stave 3 and 4)

    options stave-distance=30 space=10 player=true
    tabstave notation=true
             key=E
             time=3/8
      voice
        notes :8 (7/1.9/2) (7/1.9/2) (7/1.9/2) | (7/1.9/2) (7/1.9/2) (7/1.9/2) | (7/1.9/2) (7/1.9/2) (7/1.9/2) | (7/1.9/2) (7/1.9/2) (7/1.9/2) =:|
      voice
        notes :qd (0/6.9/4.9/3) | :16 ## 8/3 6/3 9/4 6/3 8/3 | 6h8p6/3 ^3^ :8 9/4 T9/4 | :qd T9/4

And here's the rendered output:

Triplet, no tie

Here's one without the triplet, the tie renders correctly (but the bars don't, because the count is wrong, as expected)

    options stave-distance=30 space=10 player=true
    tabstave notation=true
             key=E
             time=3/8
      voice
        notes :8 (7/1.9/2) (7/1.9/2) (7/1.9/2) | (7/1.9/2) (7/1.9/2) (7/1.9/2) | (7/1.9/2) (7/1.9/2) (7/1.9/2) | (7/1.9/2) (7/1.9/2) (7/1.9/2) =:|
      voice
        notes :qd (0/6.9/4.9/3) | :16 ## 8/3 6/3 9/4 6/3 8/3 | 6h8p6/3 :8 9/4 T9/4 | :qd T9/4

And the rendered output:

No triplet, ties

Triplet beaming bug

You can reproduce this bug in playground (http://my.vexflow.com/playground.html):

tabstave notation=true tablature=false clef=treble key=C time=4/4
notes :q C/4 :q C/4 :q D/4 ^3,3^ :8 C/4 :8 E/4 :8 G/4 ^3,3^ :16 C/4 :16 F/4 :16 G/4 :16 F/4 |

also this one:
tabstave notation=true tablature=false clef=treble key=C time=4/4
notes :qd G/4 :8 B/4 :16 D/4 :16 D/4 :16 E/4 :16 F/4 :16 ## :16 ## :16 D/4 :16 F/4 |

The api should take beats into consideration when auto-beaming the notes.

Dotted slash notation is not supported

Try this vextab for instance:

tabstave notation=true tablature=false
notes :8dS B/4 :2S B/4

It generates an error:

Sucky VexTab: Parse error on line 2:
...ture=falsenotes :8dS B/4 :2S B/4
----------------------^
Expecting 'EOF', 'OPTIONS', 'TABSTAVE', 'VOICE', 'TEXT', 'NOTES', '=', '[',

While without the slash, it works:

tabstave notation=true tablature=false
notes :8d B/4 :2S B/4

image

File Missing

Downloaded vextab-master to give it a try locally.
tabdiv-min.js is missing
I tried using tabdiv2.js instead but it gave me the error:
Uncaught TypeError: undefined is not a function
for line:
this.artist = new Vex.Flow.Artist(10, 0, this.width, {scale: this.scale});

Bugs in Bars and Bends

Bug 1

notes 8b9/5 |

Does not ghost bent note.

tabstave notation=true
notes 5b6/5

Same issue. Looks like closeBeam needs to be called with a parameter.

Bug 2

notes | 4/4

Error: Cannot read property 'x' of null

tabstave notation=true tablature=false
notes | 4/4

This works... so it's tab related.

Bug 3

notes |

Does not render bar.

Slash notation does not line up with text above

The following example the C/A should line up with the 2nd note but it doesnt and the offset remains throughout the rest of the tab:

tabstave notation=true tablature=false
text :qd,G/A,:h,C/A,:8, ,:w,Fmaj7
notes :qSd X/5 :8S X/5 :hS sX/5 | :w X/5

This only happens in Slash notation, not in normal note notation!

image

Multi Voice Capability

VexTab2 is a very nice update. Is there any plans to update it to enable multiple voices if possible? It currently is an excellent tool for single voice guitar, but can't be used for fingerstyle where two voices is a must.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.