introducing MusicPaste - a vextab editor to share and embed in your

537 views
Skip to first unread message

Leo Rocha

unread,
Aug 11, 2014, 1:06:13 PM8/11/14
to vex...@googlegroups.com
Hi all!

First, THANX for VexFlow and VexTab! They are two amazing libraries!

I just uploaded a REALLY simple site that allows to share and embed sheets and TABs created with vextab:

musicpaste.com

It also uses MIDI.js to play, and no account is needed to use it.

I was looking to embed VexTab with my (in progress to be set up) music blog, and I just found easier to create a free tool for everybody to use.
I will be adding Fretboard and Chords support too.

I had to make some modifications to VexTab library ( https://github.com/leomrocha/vextab ) to make it happen.

Can you give me your feedback please?

Best!

Leo

Scott Mitchell

unread,
Aug 11, 2014, 2:42:29 PM8/11/14
to vex...@googlegroups.com
Hi Leo, neat site!

I am having a hard time finding tutorials/demos online that show how to integrate Vexflow and MIDI.js.

Can you share your code for integrating the two or point me to any articles or other online resources that would be helpful?

Thanks

Leo Rocha

unread,
Aug 12, 2014, 3:37:22 AM8/12/14
to vex...@googlegroups.com
Hi,

Hi Leo, neat site!

Thanx Scott!
Can you tell me what would be useful for you?

 

I am having a hard time finding tutorials/demos online that show how to integrate Vexflow and MIDI.js.

You're right there is not too much, but basically I was guided with MIDI.js and VexTab source code to make it happen.
 

Can you share your code for integrating the two or point me to any articles or other online resources that would be helpful?

I don't have the code in front of me now, so I'll try to guide you with the code here:
https://github.com/leomrocha/vextab/blob/master/src/player.coffee

Basically there are 4 things to do:

1 - Load MIDI, check lines 245-252
2 - Change instrument to the one you selected, line 231, if it doesn't work, tell me and I'll try to check when I am in front of my computer
3 - Load the instrument
4 - play the sounds, for this check lines 197-199 for obtaining the note midi equivalent from vexflow and then you need to tell midi note-on or note-off

Hope it helps

Best,

Leo

Nikos M.

unread,
Aug 12, 2014, 9:22:31 AM8/12/14
to vex...@googlegroups.com
Hello Leo,  this seems great , thanx a lot!!


Nikos

Scott Mitchell

unread,
Aug 13, 2014, 11:01:31 AM8/13/14
to vex...@googlegroups.com
Leo, I saw the player.coffee file in the source code bundle, but am not familiar with CoffeeScript. Are you using that .coffee file and one of the CoffeeScript-to-JavaScript plugins, or did you translate the .coffee file into equivalent JavaScript? (Or something else?)

Leo Rocha

unread,
Aug 13, 2014, 12:19:59 PM8/13/14
to vex...@googlegroups.com


On Tuesday, 12 August 2014 15:22:31 UTC+2, Nikos M. wrote:
Hello Leo,  this seems great , thanx a lot!!



Thanx!

Hope it is useful! and if something is missing, please let me know I'll try to do my best.


Leo

Gerco Grandia

unread,
Aug 25, 2014, 11:18:27 AM8/25/14
to vex...@googlegroups.com
Hi Leo,

Looks very cool!

Re. enhancements: It would be very good if you could save your tabs in, for instance, google drive.

Regards,
Gerco

Cameron Roe

unread,
Aug 25, 2014, 12:10:30 PM8/25/14
to vex...@googlegroups.com
This is awesome! Would there be a way to convert this to midi?

Scott Mitchell

unread,
Aug 25, 2014, 12:23:00 PM8/25/14
to vex...@googlegroups.com
Leo, I'm also working on a site that allows the user to select their tempo - see http://scottonwriting.net/BachMachine/Compose.aspx?InstrumentId=0&bpm=90&Measures=264535362142 as an example - and I've found that the tempo doesn't align with reality when playing the score through MIDI.js (unless I'm misunderstanding something, which may be true, as I'm not a musician in the least).

For instance, on your site if I go to http://musicpaste.com/musicapp/edit_score/ and choose a tempo of 80 bpm that means each quarter note should be played for 0.75 seconds, correct? (60/80 = 0.75) That means the first 14 notes should take 10.5 seconds to play. But if I time the first 14 notes it takes under 8 seconds to play.

Is this a misunderstanding on my part of how tempo and time works, or is this a shortcoming of our code or how MIDI.js works or how accurate the JavaScript clock is or something else?

Thanks



On Monday, August 11, 2014 10:06:13 AM UTC-7, Leo Rocha wrote:

Leonardo M. Rocha

unread,
Aug 25, 2014, 2:03:35 PM8/25/14
to vex...@googlegroups.com
Hi Gerco,

Thank you!

You can actually save the tabs created, just click in save & share. You receive by email the links of the things you create, and in the display mode you can see the code, so you always have access to the things you've created.

For the enhancement proposal,  I've just checked about adding google drive and the changes I should do are really deep in the application architecture. For the moment I don't have time.

Thinking more about it; Can  you tell me more about how would you want to use it? So I will get a better idea and see how I can improve it.

Best!

Leo

--
--
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 a topic in the Google Groups "vexflow" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/vexflow/FgqJtMO3tGU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to vexflow+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

Leonardo M. Rocha

unread,
Aug 25, 2014, 2:16:58 PM8/25/14
to vex...@googlegroups.com
Hi Scott,

On Mon, Aug 25, 2014 at 6:23 PM, Scott Mitchell <scott.k....@gmail.com> wrote:
Leo, I'm also working on a site that allows the user to select their tempo - see http://scottonwriting.net/BachMachine/Compose.aspx?InstrumentId=0&bpm=90&Measures=264535362142 as an example - and I've found that the tempo doesn't align with reality when playing the score through MIDI.js (unless I'm misunderstanding something, which may be true, as I'm not a musician in the least).
 
I've seen your site and it's awesome!

I really love the automatic-composing!

Also, I see you do the MIDI and then transform to vexflow. Do you have something to transform vextab to midi and/or the other way?
It'll be amazingly useful for the community!

 
For instance, on your site if I go to http://musicpaste.com/musicapp/edit_score/ and choose a tempo of 80 bpm that means each quarter note should be played for 0.75 seconds, correct? (60/80 = 0.75) That means the first 14 notes should take 10.5 seconds to play. But if I time the first 14 notes it takes under 8 seconds to play.

In my browser (chromium and firefox) works fine enough.
Notice that the sound engines and the tempo calculations that MIDI.js does are completely dependent on the javascript engine and not on the library (that does it's best job). Tempo with MIDI.js is not perfect, just "good enough" in most cases.

After checking different browsers (and reading a bit about them) I've found that the best one is Chrome (and Chromium), then Firefox, then Opera and so on and don't even dream about doing not-even-nearly-good things with sound under Internet Explorer.

One way to listen that there are problems with the tempo, go to this: http://mudcu.be/piano/ application and start playing different many songs, you'll notice a problem in every browser, the one with less problems is Chrome.

I think that for more details on MIDI problems we should go to a MIDI.js list, because here we are starting to pollute this list.

 
Is this a misunderstanding on my part of how tempo and time works, or is this a shortcoming of our code or how MIDI.js works or how accurate the JavaScript clock is or something else?

 

Best,

Leo

Leonardo M. Rocha

unread,
Aug 25, 2014, 2:18:32 PM8/25/14
to vex...@googlegroups.com
Hi Cameron!

Thank you!

I wanted to do it but I didn't find a library that does the conversion from vextab to midi. I don't have the time to start writing the library to do the transformation, but if anybody finds a way, I'll gladly add it!

Best,

Leo



--
--
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 a topic in the Google Groups "vexflow" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/vexflow/FgqJtMO3tGU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to vexflow+u...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.



--

Scott Mitchell

unread,
Aug 25, 2014, 2:30:47 PM8/25/14
to vex...@googlegroups.com
On Monday, August 25, 2014 11:16:58 AM UTC-7, Leo Rocha wrote:
On Mon, Aug 25, 2014 at 6:23 PM, Scott Mitchell <scott.k....@gmail.com> wrote:
Leo, I'm also working on a site that allows the user to select their tempo - see http://scottonwriting.net/BachMachine/Compose.aspx?InstrumentId=0&bpm=90&Measures=264535362142 as an example - and I've found that the tempo doesn't align with reality when playing the score through MIDI.js (unless I'm misunderstanding something, which may be true, as I'm not a musician in the least).
 
Also, I see you do the MIDI and then transform to vexflow. Do you have something to transform vextab to midi and/or the other way?
It'll be amazingly useful for the community!

Leo, I don't think I understand your question. I don't generate MIDI and then the score off of that, rather I do each separately. In short, the set of all possible measures is stored in a big JavaScript array. The querystring parameters are examined to determine which measures to use and then it gets those measures and translates those into VexFlow commands to "draw" the score on screen.

The MIDI playback in the browser is done via MIDI.js by using that same big array of all possible measures.

You can download and save a MIDI file. That is done server-side with a C# MIDI library.

 
 For instance, on your site if I go to http://musicpaste.com/musicapp/edit_score/ and choose a tempo of 80 bpm that means each quarter note should be played for 0.75 seconds, correct? (60/80 = 0.75) That means the first 14 notes should take 10.5 seconds to play. But if I time the first 14 notes it takes under 8 seconds to play.

In my browser (chromium and firefox) works fine enough.
Notice that the sound engines and the tempo calculations that MIDI.js does are completely dependent on the javascript engine and not on the library (that does it's best job). Tempo with MIDI.js is not perfect, just "good enough" in most cases.

When you listen to the first 14 notes is it taking 10.5 seconds? I seem to always have it play faster than it should, and I use Chrome primarily, but I've noticed the same in other browsers, as well.

Thanks

Leonardo M. Rocha

unread,
Aug 25, 2014, 2:38:11 PM8/25/14
to vex...@googlegroups.com
Also, I see you do the MIDI and then transform to vexflow. Do you have something to transform vextab to midi and/or the other way?
It'll be amazingly useful for the community!

Leo, I don't think I understand your question. I don't generate MIDI and then the score off of that, rather I do each separately. In short, the set of all possible measures is stored in a big JavaScript array. The querystring parameters are examined to determine which measures to use and then it gets those measures and translates those into VexFlow commands to "draw" the score on screen.

The MIDI playback in the browser is done via MIDI.js by using that same big array of all possible measures.

You can download and save a MIDI file. That is done server-side with a C# MIDI library.

Thanx, this answers the question.
 
 
 For instance, on your site if I go to http://musicpaste.com/musicapp/edit_score/ and choose a tempo of 80 bpm that means each quarter note should be played for 0.75 seconds, correct? (60/80 = 0.75) That means the first 14 notes should take 10.5 seconds to play. But if I time the first 14 notes it takes under 8 seconds to play.

In my browser (chromium and firefox) works fine enough.
Notice that the sound engines and the tempo calculations that MIDI.js does are completely dependent on the javascript engine and not on the library (that does it's best job). Tempo with MIDI.js is not perfect, just "good enough" in most cases.

When you listen to the first 14 notes is it taking 10.5 seconds? I seem to always have it play faster than it should, and I use Chrome primarily, but I've noticed the same in other browsers, as well.


I've just tried it again with BPM=60 to be able to measure it better, and goes all right, 20 seconds, 20 black notes. Sorry I can't see anything more there

Best

--
Ing. Leonardo Manuel Rocha
www.annotatit.com

Gerco Grandia

unread,
Aug 26, 2014, 6:49:09 AM8/26/14
to vex...@googlegroups.com
Hi Leo,

Well, the nice thing about Vexflow/vextab is that it promises to be a generic way of defining tablature, and if this really takes off I'm expecting quite a few tools being able to deal with it. So that also explains why it would be nice to have you tabs stored in a place that can be accessed by multiple apps/services, and as an example I named Google Drive.

But I fully understand that this might have quite some impact and already appreciate the effort you're putting into it, so consider this more as a wishlist :-)

Regards,
Gerco
Groet,
Gerco
Reply all
Reply to author
Forward
0 new messages