0xfe / vexflow

A JavaScript library for rendering music notation and guitar tablature.
http://www.vexflow.com
Other
3.91k stars 662 forks source link

Best way to create a custom key signature? #1613

Closed Vafa-Andalibi closed 8 months ago

Vafa-Andalibi commented 8 months ago

Hi,

Thank you for the great library. Unless I missed it, the tests related to KeySignature are all building on top of a single key (or keySpec as called in the code).

How can I build a completely custom key signature?

I tried to start with C-Natural key and build on top of that, but altered keys are not reflected on C-Natural (try it live):

<!DOCTYPE html>
<html>
    <body>
        <div id="container"></div> 
        <script src="https://cdn.jsdelivr.net/npm/vexflow@4.2.2/build/cjs/vexflow.js"></script>

        <script>
            var div = document.getElementById("container")
            var renderer = new Vex.Flow.Renderer(div, Vex.Flow.Renderer.Backends.SVG);

            renderer.resize(500, 500);
            var context = renderer.getContext();

            var stave = new Vex.Flow.Stave(10, 0, 300);

            stave.addClef("treble");

            keySig = new Vex.Flow.KeySignature("C");
            keySig.alterKey(["bs", "bs","d"]);
            keySig.padding = 18;
            keySig.addToStave(stave);

            stave.setContext(context).draw();
        </script>
    </body>
</html> 

Changing the KeySignature to C# will actually reflect the altered Keys.

Is this intentional?

AaronDavidNewman commented 8 months ago

No one has taken the initiative to create custom key signature. Several have expressed an interest, so if you have an idea of how to contribute this, it would be welcome. I know for myself, I have been hesitant to take this on because I don't understand all the use cases.

You can get the alt glyphs this way, but you are still limited to symbols built on the traditional western key signatures (e.g. no mixing sharps and flats):

            keySig = new Vex.Flow.KeySignature("Bb");
            keySig.alterKey(["bs", "bs"]);

image

Vafa-Andalibi commented 8 months ago

The main use case for me is Iranian/Persian music. There are many Dastgāhs (and all their transposed scales) that need custom Key Signature (sample scale 1, sample scale 2).. Thanks for the sample, I was trying to use those symbols but the western key signature ordering was the blocker. I'll take a look at the code to possibly contribute to this.