Integrating with VexFlow

[dgrmunch]

Hey, @grimmdude!

I have been checking the browser library and I couldn't make it work.

Code:

function createMidi(){
    console.log('---------- CreateMidi ----------');

    var MidiWriter = require('MidiWriter');

    var track = MidiWriter.VexFlow.trackFromVoice(voice); 
    var writer = new MidiWriter.Writer([track]);
    console.log(writer.dataUri());

 [...]
}  

Error:

TypeError: MidiWriter.VexFlow.trackFromVoice is not a function.

You can check it up here:

https://github.com/SciArtLab/sciart-vextab-to-midi-composer

Thanks so much!

[grimmdude]

Hey @dgrmunch,

I think you'll need to instantiate the VexFlow class first. Try this:

function createMidi(){
    console.log('---------- CreateMidi ----------');

    var MidiWriter = require('MidiWriter');
    var Vex = new MidiWriter.VexFlow;
    var track = Vex.trackFromVoice(voice); 
    var writer = new MidiWriter.Writer([track]);
    console.log(writer.dataUri());

 [...]
}  

[dgrmunch]

Thanks @grimmdude,

Unfortunatelly that change leads to this error:

Uncaught ReferenceError: notes is not defined at http://127.0.0.1:53319/js/vendor/index.js:2741:6 at Array.forEach (native) at VexFlow.trackFromVoice (http://127.0.0.1:53319/js/vendor/index.js:2737:20)

The same issue that I reported in https://github.com/grimmdude/MidiWriterJS/issues/19. By the way, I will close that thread to continue the conversation here.

[grimmdude]

Hi @dgrmunch ,

Good point, obviously that notes var is not defined. My guess is it was defined in the voice object in VexFlow. It's been a little since I last worked on this featured, but when I inspect that VexFlow voice object now I don't see a notes property.

Like I mentioned in the thread over on the VexFlow repo, I don't believe the current VexFlow integration approach is the right one. This functionality would be awesome though, and your interest is inspiring me to try again. If you have any ideas on how to best do this please feel free to send them along, and as always pull requests are welcomed. I will work on this myself as well and let you know if I make any progress.

-Garrett

[dgrmunch]

@grimmdude, thanks again.

Let's see if we find the solution. I am glad this is inspiring you to try again :-) I have been doing some reverse engineering and trial&error but with no results yet.

According to what you said, probably the Voice object obtained from the VexTab plain-text doesn't have the expected attributes. I got it with the statement artist.getPlayerData().voices[0][0], following what @0xfe told me in https://github.com/0xfe/vexflow/issues/351#issuecomment-283724211.

function renderTab(){
    console.log('---------- RenderTab ----------');

    window.renderer = new Renderer($('#tabCanvas')[0], Renderer.Backends.CANVAS);
    window.artist = new window.Artist(10, 10, 600, {scale: 0.8});
    window.vextab = new window.VexTab(artist);

    $("#plainText").keyup(_.throttle(window.render, 250));
    render();

    window.voice = window.artist.getPlayerData().voices[0][0];

}

function render() {
    try {
      window.vextab.reset();
      window.artist.reset();
      window.vextab.parse($("#plainText").val());
      window.artist.render(renderer);
      $("#error").text("");
    } catch (e) {
      console.log(e);
      $("#error").html(e.message.replace(/[\n]/g, '<br/>'));
    }
}

Source: https://github.com/SciArtLab/sciart-vextab-to-midi-composer

[SalahAdDin]

:+1:

[gciluffo]

Appreciate the work grimmdude. Any updates on getting trackFromVoice() function working properly with voice? Just eye-balling this, but looking at the Voice object in VexFlow and the trackFromVoice(), it looks like theres just a few small changes to that function to get it working.

[grimmdude]

Hi @gciluffo ,

Unfortunately I haven't had the time recently to tackle this again. It's still on my list though, I haven't given up. PRs welcome!

-Garrett

[gciluffo]

31