paulrosen / abcjs

javascript for rendering abc music notation
Other
1.95k stars 287 forks source link

Is it possible to add completely new symbols to abcjs? #466

Closed ehsansh closed 3 years ago

ehsansh commented 4 years ago

Hi,

Thanks for making abcjs.

I have some questions.

1 - I want to know whether it is possible to add some music symbols that are used in folk music to abcjs? If it is possible how could I do that?

2 - I downloaded this repo https://github.com/paulrosen/vue-abcjs-callback-demo to see how the click event works. It is perfect but it does not work on elements that have abcjs-ending class and also there is no way to click and choose only a grace note not the note after the grace note.

3 - I did not find a way to add a grace note after for example black note. Is it possible to do such a thing?

paulrosen commented 4 years ago
  1. I'm not sure what you mean. Sharps and flats are already supported. a sharp is the character ^ and a flat is the character _. If you are talking about other characters then it depends. If you want to replace an existing character with your own see the example change-glyphs.html. If you want to add something completely new it is more involved. You have to figure out how to represent it in the ABC string, then add it to the parser and the renderer.

  2. There has been some recent work on the click event in the latest beta that is not yet reflected in that demo. But the ending class is now supported. True you can't split the pieces of the note apart. There have been other requests so it is on my list to do.

  3. Do you mean this?

    X:1
    T: Grace note after note
    M:none
    %%staffwidth 300
    K:C
    | (F3{E})y |
ehsansh commented 4 years ago

Thanks a lot for your answer.

  1. I saw chane-glyphs.html that is great.

I want to add half circle line to the bottom of the music note head and also I want to add some numbers to the top of the note. Do you have these? If these are completely new how could I add them to the parser, renderer? Where are these parser, renderer functions? Would you please show me some code for this purpose?

  1. Thanks.

  2. That is exactly what I needed.

paulrosen commented 4 years ago

The numbers can be done with an annotation. That looks like the chord but can be placed. If you want to put numbers above the note use "^1\n2\n3"G. The \n means go to a new line so that would stack 1, 2, 3 on top of each other.

I'm not sure about the half circle line. If it is the same for all note heads then you can use the change-glyphs method. If it depends on the pitch, for instance (like you are making a tablature) then you have to add it yourself after the SVG is produced.

ehsansh commented 4 years ago

Thanks. In fact I want to make a visual editor so half circle line does not depend on pitch it depends on the composer who decides to add it to one note. So could I use the change-glyphs method? For example I use annotation to write special character or word then write this code: ABCJS.setGlyph('annotation.halfcircleline',MySvgForHalfCircle); Is it the correct way of adding new symbol? Or should I replace my svg with another object?

paulrosen commented 4 years ago

I think I would post-process this. Be sure to use the { add_classes: true } parameter to the renderAbc call. Then right after the call find the element you want with querySelector and add your own svg.

ehsansh commented 4 years ago

Thanks a lot Paul.