vextab

vextab copied to clipboard

It would be great to have tests that show the MIDI player functionality.

Hi, VexTab does not support MIDI.

Sorry for not being clear: I meant the VexTab audio player, which you mention here: http://0xfe.blogspot.ca/2014/02/vexflow-goodies.html

@infojunkie you mean to include some examples where the audio player is used?

I'm also interested in that. Currently the player file is not included into the generated minified file. I add it, but it's not engough, MIDI.js need to be included and some other things.

@0xfe would be nice if you update the readme how to enable the player :thumbsup:

@0xfe please can you provide a build script to built vextab (or/and vexflow) with the new player feature and midi.js dependency

Yes, this is on my list. I'll try to get to it soon.

I got it working :) If you want to see how I did it, I can show you the code and maybe I can provide a readme block for this.

I want to see it please! :-)

Okay give me some time to prepare it and make it clean ;-)

That would be great. I'll accept documentation.

On Fri, May 2, 2014 at 4:51 PM, Anton Wilhelm [email protected]:

Okay give me some time to prepare it and make it clean ;-)

— Reply to this email directly or view it on GitHubhttps://github.com/0xfe/vextab/issues/32#issuecomment-42077696 .

Mohit Muthanna [mohit (at) muthanna (uhuh) com]

voilà https://github.com/timaschew/vextab/tree/master/contrib/docpad :smiley_cat:

I did some customizations to the tabdiv2.js file, but that was really necessary.

add initial steps in the readme: git clone & change directory feedback is welcome ;)

Thanks Anton! I had to edit demo-player.html and demo-simple.html to change the line: <script src="bower_components/jQuery/jquery.min.js"></script> to lowercase: <script src="bower_components/jquery/jquery.min.js"></script> - but other than that, works great.

oh, thanks! OS X is not case sensitive :stuck_out_tongue_winking_eye:

I fixed it.

@0xfe so what you think?

@timaschew I'm curious about this as well. Trying to get player running locally myself. Do you remember what steps you took?

As of right now I've:

• modified player.coffee to module.export itself
• modified artist.coffee to require player.coffee and instantiate a new player when @customizations.player = "true"
• Adding paper.js dependency was a little funky. ( I had to uninstall all my installed node packages, install paper via npm then reinstall all my dependencies, but I got it running fine and it generates the play+stop buttons)
• now I've added midi as a dependency using npm install mudcube/MIDI.js --save and I'm trying to require 'midi' in player.coffee but it's not finding it

Is this the right track? I'd love to know how you approached this

npm install mudcube/MIDI.js --save

This doesn't work, this part of midisjs is really shitty, see https://github.com/mudcube/MIDI.js/issues/24#issuecomment-131570903

I'm not sure anymore and I deleted the branch because I switched to another library. I'm also using vexflow and not vextab now.

But I remember MIDI.js was the issue because it's not a valid CommonJS module. You need load all the files (dependencies of MIDI.js) by hand.

Here is the most simple example with midisjs, you should see what files you need: https://github.com/mudcube/MIDI.js/blob/master/examples/Basic.html you can also run this example with rawgit: https://rawgit.com/mudcube/MIDI.js/master/examples/Basic.html

Ah bummer,

npm install mudcube/MIDI.js would be really nice :(

Thanks for the response

I'll see what I can do based on the Basic.html example

Ok I got player in playground working by modifying a few things I'll go ahead and detail my steps to getting it working for posterity

1. To run paper.js you'll need to have cairo installed. On osx brew install cairo should handle this
2. Add paper.js to the node dependencies and install it with npm install paper --save
3. Make sure player.coffee has access to paper by adding the line paper = require 'paper' next to the other require statements
4. Make player.coffee available by adding the line module.exports = Vex.Flow.Player somewhere in the file
5. Make the main.coffee module export the Player by adding Player = require './player.coffee' to the requires and adding Player: Player to the module.exports list.
6. Because MIDI.js is required but is not packaged for npm functionality, it's easiest to just include the necessary files in your html. To know which ones to include look at the Basic.html example
7. Grab a pre-rendered soundfont from gleitz and store it in a soundfont/ directory wherever player.coffee's options.soundfont_url points
8. Instantiate your player in tests/playground.js by adding Player = vextab.Player; right after Renderer = ... and player = new Player(artist); right after artist = new Artist(...
9. Before you test run npm start to make sure you still pass all the tests then build build/playground.js with grunt playground
10. You're gonna need to run a server using something like python -m SimpleHTTPServer to avoid cross-site scripting errors that will be thrown when trying to access the soundfont. You can then access playground via localhost:8000/tests/playground.html

@timaschew @0xfe let me know what you think

Thanks for these instructions. Do you mind adding them to the VexTab wiki?

On Thu, Jan 21, 2016 at 2:13 PM, Spencer Hitchcock <[email protected]

wrote:

Ok I got player in playground working by modifying a few things I'll go ahead and detail my steps to getting it working for posterity

1. To run paper.js you'll need to have cairo installed. On osx brew install cairo should handle this
2. Add paper.js to the node dependencies and install it with npm install paper --save
3. Make sure player.coffee has access to paper by adding the line paper = require 'paper' next to the other require statements
4. Make player.coffee available by adding the line module.exports = Vex.Flow.Player somewhere in the file
5. Make the main.coffee module export the Player by adding Player = require './player.coffee' to the requires and adding Player: Player to the module.exports list.
6. Because MIDI.js https://github.com/mudcube/MIDI.js is required but is not packaged for npm functionality, it's easiest to just include the necessary files in your html. To know which ones to include look at the Basic.html https://github.com/mudcube/MIDI.js/blob/master/examples/Basic.html example
7. Grab a pre-rendered soundfont from gleitz https://github.com/gleitz/midi-js-soundfonts and store it in a soundfont/ directory wherever player.coffee's options.soundfont_url points
8. Instantiate your player in tests/playground.js by adding Player = vextab.Player; right after Renderer = ... and player = new Player(artist); right after artist = new Artist(...
9. Before you test run npm start to make sure you still pass all the tests then build build/playground.js with grunt playground
10. You're gonna need to run a server using something like python -m SimpleHTTPServer to avoid cross-site scripting errors that will be thrown when trying to access the soundfont. You can then access playground via localhost:8000/tests/playground.html

— Reply to this email directly or view it on GitHub https://github.com/0xfe/vextab/issues/32#issuecomment-173677963.

Mohit Muthanna [mohit (at) muthanna (uhuh) com]

Do you want me to add it to the Vextab Wiki, which is currently empty, or do you mean the readme or the vexflow wiki?

Okay, I didn't realize that the VexTab wiki was empty. I'll go ahead and set it up.

On Thu, Jan 21, 2016 at 6:24 PM, Spencer Hitchcock <[email protected]

wrote:

Do you want me to add it to the Vextab Wiki, which is currently empty, or do you mean the readme or the vexflow wiki?

— Reply to this email directly or view it on GitHub https://github.com/0xfe/vextab/issues/32#issuecomment-173748133.

Mohit Muthanna [mohit (at) muthanna (uhuh) com]

Can i get working repo? Too many changes...

it's freezing on "Loading instruments..." i can make a repo of my example but i think it's bug in new version of vextab, http://my.vexflow.com/articles/40 here, it's the same issue here

Warning: Unsorted keys in note will be sorted. See https://github.com/0xfe/vexflow/issues/104 for details. Error