HTML5 Music Notation Editor Update

[Cyril]

Hey guys, thought I'd drop by an update on the editor that I worked on last year. I took a really long break from working on it, but have recently been working on it again.

Highlights include improved playback, basic MusicXML import/export, more robust part objects (can handle multi-stave parts and multi-voice parts). In the top left corner of the page there is a dropdown where you can select a sample MusicXML score. Use the mouse wheel to scroll through the score. You can also try and import your own  MusicXML file using the form.

A lot of functionality isn't exposed (editing parts, editing properties of existing notes, etc) but this gives you a good idea of the complexity it can handle. I highly encourage you to check out the sample scores. Although, playing some of them on high quality may cause your browser to hate itself. It's highly unoptimized at the moment, and scores with lots of notes will cause a large performance decrease.

I made a blog post that gives a little more detail here: http://www.cyrilsilverman.com/html5-music-notation-editor-update/

Here is the demo:

http://cyrilsilverman.com/wip/editor

[Timotée Neullas]

Hey,

Really cool demo.
How are you doing the sound ?
Audiolet for midi/like and midi.js with nice soundfont for high quality ?
I am experiencing some lag in the player when the music is fast.
I love the undo/redo.

[Cyril]

Thank you!

That is exactly right Audiolet for low, Midi.js for high. Playback is highly un-optimized at the moment and needs a lot of work to be actually usable for more cases.

[Cyril]

Minor update if anyone is interested. I implemented some auto-formatting for measures/systems. If you choose a sample score, you'll see that the staffs extend the width of the page. Ultimately I hope to have a "responsive" score that will accommodate all screen sizes. 

In addition, you can scale the score by using [shift + scroll up/down].

[Cyril]

Another minor update. I've been fiddling with more complex mouse interaction, specifically, mouse dragging. And since quite a few of you have expressed interest in such interaction I thought I'd show it off.

I've implemented the following in the demo 

left-click+drag up/down on a Note: move a note up/down pitch

right-click+drag left/right on a Note: change a note's duration

double clicking on a note deletes note

Demo here (only tested in Chrome): http://cyrilsilverman.com/wip/editor - Go into edit mode using the top toolbar and clicking the "mode" dropdown

In addition to the dragging functionality, I totally revamped my engine's mouse event functionality. Currently the Score now has the ability listen to all types of standard mouse events and will correctly associate it with a target object in the score. So I can create mouse event listeners for objects on the score just like on DOM elements. Ultimately, I hope this will open up the notation engine to be used in more ways than a simple editor, but an extendable engine that could facilitate all sorts of content requiring interactive notation.

[Mohit Muthanna Cheppudira]

Great progress!

--
--
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 the Google Groups "vexflow" group.
To unsubscribe from this group and stop receiving emails from it, send an email to vexflow+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

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

[Alexander Dorsk]

Cool!

The dragging feels quite smooth on chrome. 

It's interesting to compare with NoteFlight's dragging interaction (A "drag race"?), in which the duration/pitch change is all in the left click when you first place a note.

I like how in your editor you can change the duration of an already placed note via dragging.

-Alex

On Sat, Jan 4, 2014 at 1:43 AM, Cyril <silver...@gmail.com> wrote:

--

--
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 the Google Groups "vexflow" group.
To unsubscribe from this group and stop receiving emails from it, send an email to vexflow+u...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

--

---

Want to learn music? We're building an online musical dojo:

http://musikata.com

http://facebook.com/musikata

http://twitter.com/zen4music

---

[Cyril]

Another update!  Here's what's new:

• Tied Notes
• Example: A score that contains a cross-measure tie, and a tie contained within a measure.
• http://www.cyrilsilverman.com/wip/editor/#chopin
• Not exposed by the UI yet, not sure how I want the experience to work
• Tab
• Example: http://www.cyrilsilverman.com/wip/editor/#anatole
• Tab/Standard notation can be mixed together
• Simple tab input interaction with the keyboard is loosely modeled after Guitar pro
• Responsive Systems - Auto formatting to fit to the container
• If you re-size your window or re-scale the score (shift + mousewheel up/down) the score will reformat to fit
• Cross-measure ties will break accordingly

I have a couple blog posts that go into slightly more detail. But this mainly covers it. Slowly but surely this is starting to come together.

[Nikos M.]

Hello Cyrill,

the demo looks good so far,

this was also a project of mine to create an interactive music editor using (parts of) vexflow api
(there was a post on this group about 1-2 years ago) but other things had priority.

Is this open-source, somewhere it can be downloaded?
If not it is ok.

Thanks,
Nikos

[Cyril]

It's closed source for now. I may eventually open it up but that will be much farther down the line, after I'm satisfied with the codebase and the engine's core features.

[john saylor]

On 1/29/14, 24:10 , Cyril wrote:
> It's closed source for now. I may eventually open it up but that will be
> much farther down the line, after I'm satisfied with the codebase and
> the engine's core features.

as the developer, you are certainly entitled to do with the code as you
like. and i understand how you may not want to throw your "dirty
laundry" up on the network.

btw, i do not mean to say anything about your code or it's functionality
or it's implementation- i'm speaking more abstractly.

but i would contend that opening it up will only increase the chances
that the codebase will get to a "satisfactory" state. also, it is
possible that someone else will be able to help. maybe unlikely, but
possible.

anyway, good luck however you choose to proceed.

--
\js [http://or8.net/~johns/] : i am alive

[YusufSalahAdDin]

Hi Cyrill, what's about this? I want do something like it, but i don't know how begin, i don't know how to do a toolbar with accidentals, times, etc. Can you help me?

[André Bakker]

Hi Guys,

Some (a loong) time ago, I started developing an music notation editor, and had to stop because my job was consuming all my time.

If you guys want, I can put my code on github. There's still much to be done, but it's better than nothing.

Let me know if you want! =)

[Luuk de Waal Malefijt]

Hi Andre,

Im definitely interested! :)

Op 1 apr. 2016 16:49 schreef "André Bakker" <arbp...@gmail.com>:

--

--
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 the Google Groups "vexflow" group.
To unsubscribe from this group and stop receiving emails from it, send an email to vexflow+u...@googlegroups.com.

For more options, visit https://groups.google.com/d/optout.

[André Bakker]

Ok! Let me just make some minor adjustments, prepare a readme and I'll soon post a link to github!

=)

[André Bakker]

Hello guys!!

I finished the details I wanted, and pushed to github.

The github page:

http://andrebakker.github.io/VexUI/

This page contains a simple demo if anyone likes to see its current state (but there's still much work to be done!).

The github repo:

https://github.com/andrebakker/VexUI

Well, that's it. I hope you guys like it and are able to contribute.

=)

[Michael Scott Cuthbert]

Wonderful work!  Congrats.

I wonder if it might make sense to separate out the playback functionality into a separate project (willing to help with that), since it’s something that any VexFlow project can benefit from, regardless of whether it uses the editor here or not.

Thanks for putting this up!

Best,

Myke

[André Bakker]

Thank you Michael! =)

About separating playback funcionality, I think it makes total sense. I just didn't think at the time because I thought other VexFlow players would already be on github and opensource, and I would just switch into using one of them.

If i recall, the playback is mostly on Player.js, which is called by Handler.js (in its "play" function), and uses the "getPlayEvents" functions on VexFlowExtension.js.

Hopefully it won't be too hard (unless I'm missing something, its been so long). As soon as I have some time, I'll try to do it!

Regards!

[Dani]

Hi to all,

we have also been working in an editor. In our case is focused on lead sheets (monophonic melodies and chord sequence). We have implemented midi and audio players as well as an audio visualizer. Also there are editing funcitonalities for notes, chord symbols and structure, and export to png and pdf functionality among other features. All information is in this link  http://lsdb.flow-machines.com/leadsheetJS

Best,

[Mohit Muthanna Cheppudira]

Hi Dani, Is there any way to try a demo without having to register?

[Dani]

ups sorry, now it should work.

Best

[Mohit Muthanna Cheppudira]

Very nice! Thanks for sharing. Were there any particular pieces that you had trouble rendering?

[Dani]

Well yes, the more complex pieces like pieces with many n-tuples, and also those with structure changes. For more information we also published a paper on this library: http://www.csl.sony.fr/bibdetails.php?reference=dani:15a

best

[Dani]

...but off course, I'll be happy to answer to any question you make.

best

[André Bakker]

Hello Dani!

I really really liked your library! Congrats!!!! It is so much better than mine, lol ;)

Good job =)

[Dani]

Well, it is in a more advanced developement stage. VexUI looks nice. What I miss most is being able to remove notes.

By the way we have added a commenting feature lsdb.flow-machines.com/leadsheetJS/example_comments