AaronDavidNewman / Smoosic

A music notation editor written in javascript
Other
95 stars 14 forks source link

How do I use this in my own application? #81

Open ego-lay-atman-bay opened 1 year ago

ego-lay-atman-bay commented 1 year ago

I'm developing a metronome app in javascript, and I'm adding a way that people can create custom rhythms, or a metronome to a song (click track). I would like to use very simple editing. I only need to edit a single line, like drum music. I also don't need the full editor. I just need to be able to have one measure that can be edited. Heck, the only things I really need are the ability to add/delete/edit notes, accents, tempo, and time signature. Can anyone tell me how I can do this? (I'd also create my own ui for it).

AaronDavidNewman commented 1 year ago

Hi. There are 2 demo html pages in the project that should get you started. One has custom key bindings that have basic keyboard commands just to add notes. The other is a very basic application with a few buttons to do the things you say like change tempo/time. The buttons and key bindings can be set in a JSON file. (in the github project, all the demos are in the html directory).

https://codepen.io/aarondavidnewman/pen/GRBWVYy https://codepen.io/aarondavidnewman/pen/WNoRqgg

ego-lay-atman-bay commented 1 year ago

Ok, the question I should've asked is, how do I add Smoosic to my project?

AaronDavidNewman commented 1 year ago

ah now I get it, not from a cdn. I have to admit, I didn't consider it before now. So I haven't tried it. If you do and run into a road block, please let me know.

For the code, you should be able to include smoosic in your package.json if you also include vexflow (https://github.com/AaronDavidNewman/vexflow_smoosic.git is my fork, but you can also use the master https://github.com/0xfe/vexflow.git). They both build with 'grunt' and the output javascript is webpack with esm compatility. I also use jquery, so you'd have to add that if you don't already use it.

One issue might be the samples. They need to load over https or your browser won't play them. You need at least one sample for playback (e.g. a middle 'C' sample with id='samplecn4') There is logic to play native html5 oscillators but I don't think I fall back to that if there are no samples at all. That might be a nice addition (samples perform and sound better so I prefer them, but it shouldn't be required)

You will need the jszip and midi-parse js but that is included with smoosic package so you can just copy them over with the smoosic.js output.

ego-lay-atman-bay commented 1 year ago

Oh I'm already using tone.js, so I don't need the playback with smoosic. I just need a simple sheet music editor for vexflow. Although, if there is a way I can use it with just one js file that I can import, that would be great.

I'll see about what you said.