Use abcjs-vexflow-renderer as conversion script from abc to svg

[ntolazzi]

Hey,
I like the graphical output from this project very much! Thank you for making it public Matthew.

I presume that this might not be the scope of this project, but nevertheless I wonder how an example would look like, that reads an abc file from hard disk, renders it as svg (or perhaps also as png) and saves the result on hard disk. Using this library as an offline conversion tool might not be the idea behind writing things in javascript but maybe it is still possible.

What do you think? Is this possible and could you give me some hook how I could get started?

Best,
Nico

[MatthewDorner]

Hmm, I guess it'd have to run in Node.JS? I built it to run in React Native (which runs a browserless JS engine similar to Node), so it does not require browser APIs.

I used this library in my RN project to generate the SVG: https://github.com/panarch/standalone-vexflow-context.
Their readme has a link to this other library for doing the same thing within Node.JS: https://github.com/panarch/node-vexflow

So if you can use that, it would be pretty simple. Where I do it in the RN app: https://github.com/MatthewDorner/react-native-songbook/blob/master/src/components/VexFlowScore.js, but it's similar to the code in the readme. Just a different way of building the context to pass to AbcjsVexFlowRenderer.drawToContext(context, tuneObject); IDK what you'd do after that point, it would depend on what is provided by that node-vexflow library.

I think ABCJS used to use some browser APIs which required me to fork it and remove those parts of the code before I could use in RN, but those were removed from newer ABCJS so that shouldn't be an issue, either.

[ntolazzi]

Thank you for your answer Matthew. I'll have a look into that. I am closing this ticket for now then.