search

paulrosen / abcjs

javascript for rendering abc music notation
Other
1.89k stars 281 forks source link

Visual editor based on abcjs #320

Closed rualark closed 4 years ago

rualark commented 4 years ago

Thanks for beautiful abcjs library!

I finished working on the first version of visual notation editor based on abcjs.

Current features:

https://artinfuser.com/harmony

https://github.com/rualark/AiHarmony

The next step is playback improvement and developing real-time harmonic exercise analysis based on this editor. I am also open to suggestions.

paulrosen commented 4 years ago

Yea! I'm looking forward to playing with it.

I'm slowly working on the issues - I only have about one day a week to work on this at the moment, but I'm hoping to get through most of them by the end of the weekend.

rualark commented 4 years ago

Hi! I deployed a new version of visual editor and added new features: https://artinfuser.com/harmony

These things seem most beneficial for visual editor with analysis:

eltomjan commented 4 years ago

@rualark - also thinking about adjusting visual editting - made small demo here @htmlpasta.com (IE only) or @htmlpasta.com (less reliable, but works in Chrome)- idea is to enter notes by clicking on staff in background to have visual check. At the moment works by click on top left, bottom right line, 5 red lines are painted over background and then every click in or near this staff will create green note near click place (X rounded to 6px) and store it, after clicking save it is added to textarea and you can still edit text or drag note(s) in standard abc / draggable editor. Is it good idea or is there anything similar yet ? Or should be your editor a better start point ? Would tell it is next to impossible to generate staff exactly same as some scan, so it should be easier to add notes on a scan and have 1:1 visual check. Source is also in my github fork (editor-visual.htm). Btw found some text escapes, etc. I am using in EasyABC do not work on web (but not sure if they are standard).

rualark commented 4 years ago

@rualark - also thinking about adjusting visual editting - made small demo here @htmlpasta.com (IE only) or @htmlpasta.com (less reliable, but works in Chrome)- idea is to enter notes by clicking on staff in background to have visual check. At the moment works by click on top left, bottom right line, 5 red lines are painted over background and then every click in or near this staff will create green note near click place (X rounded to 6px) and store it, after clicking save it is added to textarea and you can still edit text or drag note(s) in standard abc / draggable editor. Is it good idea or is there anything similar yet ? Or should be your editor a better start point ? Would tell it is next to impossible to generate staff exactly same as some scan, so it should be easier to add notes on a scan and have 1:1 visual check. Source is also in my github fork (editor-visual.htm). Btw found some text escapes, etc. I am using in EasyABC do not work on web (but not sure if they are standard).

Hi. It looks like this here: https://i.imgur.com/QH9VIU0.png

Cannot see mouse when it is below image. I did not get the usecase: do you want to edit image? Why is this needed?

I personally try to take ideas from notation software like Finale, Sibelius and MuseScore. I am always interested in alternative approaches, if they allow to achieve features, that cannot be achieved with usual approaches. Could you please tell what are the advantages of this approach?

Sorry, that I could not understand your idea well.

eltomjan commented 4 years ago

Ok, let's use a picture - same staff line, but each one show one step - maybe better than animated gif - there is more time to see steps. https://pasteboard.co/IZDRnch.png Goal is enter notes simply and have visual check - when you retype them by hand, it is easy to lost position, line, etc. Abc notation is easy to enter, but way harder to read, find position of a note or text or get oriented when most features used. You know - best would be a OMR (optical music recognition), but it is even more complex and can have much more errors having bad scan source.

rualark commented 4 years ago

Ok, let's use a picture - same staff line, but each one show one step - maybe better than animated gif - there is more time to see steps. https://pasteboard.co/IZDRnch.png Goal is enter notes simply and have visual check - when you retype them by hand, it is easy to lost position, line, etc. Abc notation is easy to enter, but way harder to read, find position of a note or text or get oriented when most features used. You know - best would be a OMR (optical music recognition), but it is even more complex and can have much more errors having bad scan source.

What do you mean by "ABC notation is harder to read"? If ABC notation is rendered to image, it seems easy to read? Can you tell exactly what is hard to read or show example?

Before doing something it seems to me that it is important to understand what advantages we are trying to achieve. What are the advantages of your approach compared to traditional notation software and new trends like flat.io and abcjs visual editor?

Please understand, for me it is difficult to help you until I understand what is the goal of this. "enter notes simply and have visual check" - seems to be already fulfilled by the software that I described above.

eltomjan commented 4 years ago

I am not good musician, so writting sheets takes a long time and generate a lot of errors, for example - not sure if something like this can be written in ABC at all Hledam_vas.pdf - different ligatures in each voice, etc. and in case you want to for example split rows different, etc. as text and notes are not much related, you end-up having complete mess soon. And in case you are not sure you did not make any error, ho to check this ? Comparing note by note ? Not easy at all. And when there are multiple voices... You can create nice vector output, but way to get it is sometimes very slow and complex. Would tell it should be even easier to write by hand comparing writting in some notation SW sometimes. And I want to confirm best way to do changes before starting to. For example EasyABC can do a bit more, but it is not written in common language, so longer learning curve to be able to adjust it to my needs... In theory, if you would have 2 same sheet outputs, you can make 1 transparent and show it over another to see if they are same, but there is no way to generate any sheet exactly same as random one from unknown source. Another option is to create a copy while entering and see 1 on another right away.

rualark commented 4 years ago

So, what do you want to do? Create a visual music editor? Why do you need another visual music editor if we already have flat.io? Do you want to add more functions?

For example, I can tell you why I created AiHarmony visual music editor. The main idea was to analyse music in real time, then allow student to change music and see changed analysis. This is why I created a relatively simple visual editor.

Sorry, but I do not understand why you are creating visual editor yet. The cause of project is a very important thing: it will shape the whole project and techniques that you are planning to use.

There can be a different purpose of course - for example create a open source project with approximately same functions as existing projects. This is ok too. What is your purpose/cause?

eltomjan commented 4 years ago

Spent 1/2-1 day writting say 5 songs and even then have some bugs inside it is terrible result... And do not know if there is any visual editor, where you may place scan to background to have guidance (tried that also by modifying flat.io page, but it would take some time to adjust size and pos to match with staff being created). Maybe I can print original sheet and make some tick marks or so to remember where I am ;-) Also this editor has a lot of space for improvement - there are missing some codes like backslash space, acords before |, etc. And for example when you want to add next voice to current line, it is terrible work (using text code)... Thinking now about arrows / focus to move note inside scanned staff (time & high) then save a note to text / edit there. Mouse is slow and inaccurate here.

rualark commented 4 years ago

Spent 1/2-1 day writting say 5 songs and even then have some bugs inside it is terrible result... And do not know if there is any visual editor, where you may place scan to background to have guidance (tried that also by modifying flat.io page, but it would take some time to adjust size and pos to match with staff being created). Maybe I can print original sheet and make some tick marks or so to remember where I am ;-) Also this editor has a lot of space for improvement - there are missing some codes like backslash space, acords before |, etc. And for example when you want to add next voice to current line, it is terrible work (using text code)... Thinking now about arrows / focus to move note inside scanned staff (time & high) then save a note to text / edit there. Mouse is slow and inaccurate here.

So, you are talking about visual editor with underlying image? I think this will be very difficult project, because it is not easy to control exact placement of notes. By the way, I have been working with Sibelius a lot and did not have this problem of music corruption. This is a primitive idea, but maybe, practice can help.

Unfortunately, I did not get what "this editor" you are talking about - we discussed several editors already.

paulrosen commented 4 years ago

I'm still here! Just overwhelmed at the moment, sorry. It shouldn't be too long before I get back to abcjs.

Anyway, I've had the same problem you do: when transcribing written music into ABC I can do the first line fairly quickly, but I start to lose my place and have to keep searching, and I'll skip measures and lines, then to proofread it is painstaking.

What I did was write a little program based on the editor that allows me to upload a picture of the music and just show one line at a time. It looks like this:

transcribe

And it made my speed so much faster! I should polish it enough to have it as an example, but I don't have time at the moment.

eltomjan commented 4 years ago

Sure, moving and printing over scan can help even more and in this case it would be nice to have a merge feature too - write each voice separate and then merge them by algo (rhythm should fit 1:1 anyway). In case there would not be much stuff around like brackets, etc. it would not be hard and also system holds runtime objects with positions in text (or transfer edit area to something more object oriented like JSON holding all related together can help too), so it should not be hard to merge example 2 lines to one. Also thinking about lyrics - it would be better to group particular syllabes with their notes before editting "line breaks" and then split that to separate lines again - it would not be valid ABC format, but would be much easier to work with. But you know, it is easy to write some small extension, but a lot harder when you do not know final concept when starting...

paulrosen commented 4 years ago

You can write each part separately already. Like this:

V: violin
c % line 1
c %line 2
c %line 3
V: viola
c % line 1
c %line 2
c %line 3

And if you use the %%score directive it will merge them.

eltomjan commented 4 years ago

Moved a bit - now there is a sub edit field where you can prepare any part while copying notes and by Enter copy to main window. Not complete logic there, but Arrows move note cursor / place where next will be created, space makes small space and place space to editable field and numbers 0-9 are adding note of particular (abc) length. In case you are in staff and have focus on that field, these functions work and some others are passed thru - for example BackSpace delete some char as normal, z or brackets are send to the sub-field also, there is option to use mouse to change position same time as with arrows.

Found also a strange issue - if you put 2 different notes to square brackets, they are printed with same length (longer?) - example 1st 2 [G,4e2] <=> [G,4e4].

@htmlpasta.com/

Btw, maybe we are loosing our time, but run OpenOMR under windows is not easy ;-) Even this answer does not work.

eltomjan commented 4 years ago

Here is very good OMR Audiveris, OCR had some problems with non-english characters, but rest is excellent... And that problem with notes was probably caused by bad base note length.

paulrosen commented 4 years ago

This issue has wandered a bit. If there are specific problems that are not addressed, please open a separate issue for each of them.