Chord Rendering #660

thecodeinventor · 2024-08-20T17:28:13Z

thecodeinventor
Aug 20, 2024

This is an awesome library! I started using it a while ago and it's just a pleasure to use. Great work! ... and please, keep up the good work! :)

I'm planning on using this library a lot so, if it's helpful, I can provide some user feedback. Here are some things that came up so far:

I was wondering if there is some possibility to define how some chords should be parsed?
ex: "CMA7" will be rendered as "CM7" but I would like it to be "Cmaj7" (it's about familiar visual cues)
Repeating chords will cause the ChordLine not to render if chords are subdivision of a measure.
ex: these will not render:

A. A. C. NC.
[A A] E. F. A.
[NC NC A] E. F. A.

The following example will not render the square brackets next to "D B"
2/4
A. [E C] [D B] G.
*I noticed that in "key Gm" F# will be rendered as Gb. Is there for the user to control this? (asking for a friend)

Thank you!

no-chris · 2024-08-22T06:55:21Z

no-chris
Aug 22, 2024
Maintainer

Hello!

Thanks for the comments 👍🏻

absolutely, you can define a custom chord renderer based on the chord-symbol library (https://github.com/no-chris/chord-symbol). You can take inspiration from here: https://github.com/no-chris/chord-mark/tree/master/packages/chord-mark-converters#to-ultimate-guitar-format
This is by design, is there any specific reason you prefer to write
A. A. C. NC.
rather than
A.. C. NC.
?
duh, that's a nice bug! Will try to look into it asap
Not at the moment, the choice of flat/sharp is based on the key itself, and as Gm is using flats then the chords are normalized as flats. You can force the rendering to use sharp using the accidentalsType option if that works for you (

chord-mark/packages/chord-mark/src/renderer/components/renderSong.js

Line 28 in 3479393

* @param {('auto'|'flat'|'sharp')} options.accidentalsType

)
I'm thinking anyway that there should be a way to opt out chord normalization as it might be too opinionated to be useful for everyone.

0 replies

thecodeinventor · 2024-08-22T20:33:25Z

thecodeinventor
Aug 22, 2024
Author

This was very helpful, thank you. I'm using "chordSymbolRenderer: chordRendererFactory(options)" and by default this is causing some unpleasant renderings: m->mi, sus2->(add9,omit3). Do I need to handle these manually in a customFilter or can this be done easier? If manually, is there a full list of how the chords will be rendered so I can handle them in a customFilter?
There were some instances where such a notation (repeating a chord or NC) could have suggested rhythm better.
Thank you!
Opting out of chord normalization would keep the #/b of the note regardless of the key? This could be a simple solution especially for keys where we can encounter the use of both types of accidentals.

0 replies

no-chris · 2024-08-22T21:06:44Z

no-chris
Aug 22, 2024
Maintainer

you are probably looking for the useShortNamings option
https://github.com/no-chris/chord-symbol/blob/master/packages/chord-symbol/API.md#rendererconfiguration--object
https://github.com/no-chris/chord-symbol/tree/master/packages/chord-symbol#rendering-and-normalization
interesting, I'll keep that in mind 👍🏻
And it would also solve issue number 1. Cannot commit to any timeframe but this is something I had in mind for a long time

0 replies

thecodeinventor · 2024-08-23T11:49:41Z

thecodeinventor
Aug 23, 2024
Author

yes, that was it.
Note: when using the chordRendererFactory and forcing accidentals type, it's important to know that chord-mark uses accidentalsType = ('auto' | 'flat' | 'sharp)' and chord-symbol uses accidental : ('original' | 'flat' | 'sharp')

so far, so good!

0 replies

no-chris · 2024-08-24T12:09:22Z

no-chris
Aug 24, 2024
Maintainer

fixed in force chordBeatId to be a string to ensure unicity accross bars #663

0 replies

thecodeinventor · 2024-08-26T10:46:23Z

thecodeinventor
Aug 26, 2024
Author

I am successfully rendering a chart with all the options, including using a chordSymbolRenderer = chordSymbol.chordRendererFactory(). Works great: transposing, setting accidental type and even using customFilters.
The issue is that in this configuration automatic transposition fails and it seems to do so only while using a chordSymbolRenderer .

ex:
key D
#v
Dm7 G7 Cmaj7 %
The first verse is in the key of C

key G
#v
And the second one in the key of G!

In this case, the second key declaration key: G is rendered inside the <div class="cmSection cmSection-Verse"> of the first key and is basically in line with the lyrics of Verse 1. The automatic transposition between the two verses does not work (both verses have same chords) but general transposition for the song works (everything else works fine too: customFilters, etc.). If not using a chordSymbolRenderer, the automatic transposition of verse 2 works fine but the rendering is still the same as above.

Am I not handling it correctly or bug?

2 replies

no-chris Aug 28, 2024
Maintainer

Hello
Can you please share a code sample?
Thanks

thecodeinventor Aug 28, 2024
Author

Sure!

function CustomChords() {
    return function (chord) {
        chord.formatted.symbol = chord.formatted.symbol
            .replace('M7', 'maj7')
            .replace('M9', 'maj9');
        return chord;
    };
};

function generateRenderOptions(transposeValue, accidentalsType){
    let options = {};
    let rendererFactoryOptions = { // init
        customFilters: [
            CustomChords()
        ],       
        useShortNamings: true,
        simplify : 'none', 
        transposeValue : 0, 
        accidental : 'original',
        symbolType : 'chord',
        printer : "text"
    };

    // configure rendererFactory options
    rendererFactoryOptions.transposeValue = transposeValue;
    rendererFactoryOptions.accidental = accidentalsType == 'auto' ? 'original' : accidentalsType;
    
    // define chordSymbol renderer
    options.chordSymbolRenderer = chordSymbol.chordRendererFactory(rendererFactoryOptions);
    
    // set general options 
    options.transposeValue = transposeValue;
    options.accidentalsType = accidentalsType ? accidentalsType : "auto";
   
    return options
}

function renderSongChart(songChartCode, options){    
    const parsed = chordMark.parseSong(songChartCode);    
    const rendered = chordMark.renderSong(parsed, options);  
    return rendered;
}

calling renderSongChart(songChartCode, generateRenderOptions(0, "auto")); produces the following rendering of the chord-mark code from my previous post: (rendering issue + chords are not automatically transposed between the two verses)

<div class="cmSong">
   <p class="cmLine"><span class="cmKeyDeclaration">key: D</span></p>
   <div class="cmSection cmSection-Verse">
      <p class="cmLine"><span class="cmSectionLabel">Verse 1</span></p>
      <p class="cmLine"><span class="cmChordLine"><span class="cmBarSeparator">|</span><span class="cmChordSymbol">Dm7</span>     <span class="cmBarSeparator">|</span><span class="cmChordSymbol">G7</span>     <span class="cmBarSeparator">|</span><span class="cmChordSymbol">Cmaj7</span>     <span class="cmBarSeparator">|</span><span class="cmChordSymbol">%</span>     <span class="cmBarSeparator">|</span></span></p>
      <p class="cmLine"><span class="cmLyricLine">The first verse is in the key of C</span></p>
      <p class="cmLine"><span class="cmEmptyLine">&nbsp;</span></p>
      <p class="cmLine"><span class="cmKeyDeclaration">key: G</span></p>    <!-- rendering issue?: should be outside of <div> -->
   </div>
   <div class="cmSection cmSection-Verse">
      <p class="cmLine"><span class="cmSectionLabel">Verse 2</span></p>
      <p class="cmLine cmLine--isFromAutoRepeatChords"><span class="cmChordLine"><span class="cmBarSeparator">|</span><span class="cmChordSymbol">Dm7</span>     <span class="cmBarSeparator">|</span><span class="cmChordSymbol">G7</span>     <span class="cmBarSeparator">|</span><span class="cmChordSymbol">Cmaj7</span>     <span class="cmBarSeparator">|</span><span class="cmChordSymbol">%</span>     <span class="cmBarSeparator">|</span></span></p>
      <p class="cmLine"><span class="cmLyricLine">And the second one in the key of G!</span></p>
   </div>
</div>

if we comment out the line: // options.chordSymbolRenderer = chordSymbol.chordRendererFactory(rendererFactoryOptions); then this is the rendered result: (same rendering issue, but chords are transposed between the two verses)


<div class="cmSong">
   <p class="cmLine"><span class="cmKeyDeclaration">key: D</span></p>
   <div class="cmSection cmSection-Verse">
      <p class="cmLine"><span class="cmSectionLabel">Verse 1</span></p>
      <p class="cmLine"><span class="cmChordLine"><span class="cmBarSeparator">|</span><span class="cmChordSymbol">Dm7</span>     <span class="cmBarSeparator">|</span><span class="cmChordSymbol">G7</span>     <span class="cmBarSeparator">|</span><span class="cmChordSymbol">CM7</span>     <span class="cmBarSeparator">|</span><span class="cmChordSymbol">%</span>     <span class="cmBarSeparator">|</span></span></p>
      <p class="cmLine"><span class="cmLyricLine">The first verse is in the key of C</span></p>
      <p class="cmLine"><span class="cmEmptyLine">&nbsp;</span></p>
      <p class="cmLine"><span class="cmKeyDeclaration">key: G</span></p>    <!-- rendering issue? -->
   </div>
   <div class="cmSection cmSection-Verse">
      <p class="cmLine"><span class="cmSectionLabel">Verse 2</span></p>
      <p class="cmLine cmLine--isFromAutoRepeatChords"><span class="cmChordLine"><span class="cmBarSeparator">|</span><span class="cmChordSymbol">Gm7</span>     <span class="cmBarSeparator">|</span><span class="cmChordSymbol">C7</span>     <span class="cmBarSeparator">|</span><span class="cmChordSymbol">FM7</span>     <span class="cmBarSeparator">|</span><span class="cmChordSymbol">%</span>     <span class="cmBarSeparator">|</span></span></p>
      <p class="cmLine"><span class="cmLyricLine">And the second one in the key of G!</span></p>
   </div>
</div>

thecodeinventor · 2024-09-02T05:59:14Z

thecodeinventor
Sep 2, 2024
Author

Is it that bad?

4 replies

no-chris Sep 4, 2024
Maintainer

Sorry for taking too long to respond

There is a fundamental flaw in the logic here:

chord-mark/packages/chord-mark/src/renderer/helpers/renderAllChords.js

Line 76 in d2ed1c3

function getChordSymbolRenderer(transposeOffSet) {

If a custom renderer is given, then it is returned as it is
if not, then a renderer is created and only this one gets the proper transpose/accidentals parameters that are set later in the function

This is bad indeed, I need to think this through in the next few days as I don't see a quick and easy fix

I will create an issue to track this, many thanks for finding the issue and bringing it up 🙌🏻

thecodeinventor Sep 5, 2024
Author

It's my pleasure to work with this library and provide feedback. Thank you for maintaining it!

Did you look into the rendering issue with the second key declaration too?
key: G 

no-chris Sep 5, 2024
Maintainer

This is not a rendering issue per se, basically anything that is not a section declaration goes into the section's div
I agree it's not the most elegant from a markup point of view but I think it works well enough like that, unless it prevents you to achieve some use case?

thecodeinventor Sep 6, 2024
Author

The only concern about this is styling. By default, the first key declaration looks different than the following key declarations (ex: the first key declaration is not indented but the verses do have an indent which is inherited by the second key declaration). It will just take some extra CSS to style. No problem...
I only mentioned this aspect because I compared my rendering visually to the "chord-chart-studio" rendering and thought it would be of some use to point this out.

no-chris · 2024-09-05T19:28:16Z

no-chris
Sep 5, 2024
Maintainer

I'm thinking of 2 approaches to fix the issues:

first is to change (or extend) the chord-symbol API to allow changing the renderer parameters dynamically. But that would be kind of moving away from the functional approach to maybe a more object oriented model with a renderer maintaining a mutable state. Not a big fan, but that's a possibility
the other approach is more radical and would get rid of custom filters completely in Chord Symbol. Because whichever logic you put in there can be probably be achieved by wrapping the current renderer in a custom function that would post process the output of the Chord Symbol renderer. And those custom filters may seems like a nice idea but they create a lot of dependencies to the chord-symbol internals as they expose too much. REgarding ChordMark, it could take as parameter a chordPostProcessor function instead of the chordSymbolRenderer that would allow achieving the same results

Leaning more towards 2 but will give it a few more days to think about it... if you have any comments/ideas, feel free to share as well

2 replies

thecodeinventor Sep 6, 2024
Author

If I understand correctly, then what you are describing sounds pretty exciting because:

If this would allow access to the Chord Symbol Chord as an object right before returning it as a text, one could:

make changes to the chord (ex: M7 -> maj7, M9 -> maj9, etc)
insert HTML in the chord for extra styling (ex: Cmaj7/E -> wrap C in a , wrap maj7 in a , wrap / in a , wrap E in a ). Using those clases, the chords could look more stylish and easier to read
implement exceptions/corrections (ex: in key Gm, Gb -> F#, etc)
use special fonts (ex: there is a font somewhere that uses special chars to render chords: something like "[" is "#", "]" is "b", but if the chord also has a "# 5" then that "#" would be "^" and would be rendered as superscript. The end result is a cool rendering of the chord. And yes, this would probably mess up spacing, but when rendering only chords and bars, it would look awesome)
generate a list of all the unique chords in the song and associate them with instrument renderings of those chords. (ex: guitar shapes, piano shapes, etc.)

All this would be possible because Chord Symbol isolates each component of a Chord.

This is functional: it will allow for simple post processing of the final text form of the Chord. I guess some of the above could also be also done here, but not as easy as above.

Is this wishful thinking or pretty doable? 😁

no-chris Sep 8, 2024
Maintainer

Very interesting!
I think we can make all this work regardless of the approach but yes, it might make more sense to maintain custom filters and to use the raw object in ChordMark. Will try to dedicate some cycles to this later this month

thecodeinventor · 2024-09-08T21:41:06Z

thecodeinventor
Sep 8, 2024
Author

Rendering side quests: (inspired by "...if you have any comments/ideas, feel free to share as well" )

Pickup measures. A way to define a measure that is an exception to the time signature. These need to be distinguishable so that the player will not count a full measure.

Notes:

in this measure, the beat count does not have to add up to the time signature - one just has to mark somehow the measure starts and where it ends.
if no "_" are present, this pickup measure should render as short as possible every time, even if there is enough space available
the pickup measure should not align with other measures, or it should align on the outside)

    | C..                         F.   G.   |C             |
|G  | C..                         F.   G.   |C             |

Would it be difficult to implement some rule to allow measures to be broken up between chord rows?
Sure, this could be resolved by moving the lyrics in the same line, but that would mess up the lyrics layout (phrasing) for the singer.

ex: in following sequence the "G" chord needs to be on the next chord line (on "Con"), but it won't render because a measure needs to add up to 4 beats in the same row.

|A                  |D...    G.  | 
_ Lorem ipsum dolor _sit amet, 
     |A             |
_Con _sectetur adipiscing elit

Expected result: (this rendering should be possible if the source code would contain an "\" (or some other character) after the "D..." chord)

|A                  |D...  
_ Lorem ipsum dolor _sit amet, 
G.   |A             |
_Con _sectetur adipiscing elit

Please let me know what you think of these ideas. We can discuss them in more detail if necessary... or not. I don't want to impose.
Anyway, these ideas (and others) will become more clear and useful the more I use this library.

1 reply

no-chris Sep 9, 2024
Maintainer

Thanks for all those suggestions!

Sorry to ask but what is a pickup measure, can you give an example in a well known song?
Yes, this has bothered me as well in the past for many transcriptions. I'm thinking that this could be a rendering thing, e.g. the writing of the chord chart could be with the lyrics layout "broken" but the "correct" bar structure, with a symbol denoting where the new line should actually start, eg:

A D...    G. 
_ Lorem ipsum dolor _sit amet, \_Con
A
_sectetur adipiscing elit

Here I'm using the backslash, and the rendering could be as you suggested or almost:

|A                |D...  
Lorem ipsum dolor sit amet, 
G.  |A                       |
Con sectetur adipiscing elit

Or it could only apply to the "lyrics only" rendering, if the target user is really the singer

Lorem ipsum dolor sit amet, 
Con sectetur adipiscing elit

Actually this is very close to what you are suggesting

thecodeinventor · 2024-09-10T08:43:29Z

thecodeinventor
Sep 10, 2024
Author

A pickup measure (formal name: anacrusis) is a partial measure of notes that precedes the downbeat (strong beat) of the first, full measure. It is sometimes also called an “incomplete measure” or an “upbeat”. The notes of the pickup measure are referred to as “pickup notes”. Because a pickup measure is “incomplete”, it must always be completed at the end of a music piece/section by another partial measure, so that the result is one complete measure. Source

ex: Amazing Grace, Happy Birthday, What A Wonderful World, etc.

Pickup measures are used when composers do not want to start a piece of music on a strong (down) beat. Pickup measures can contain only melody notes (No Chord) or can have Chords that either build up to the first down beat of the song, or create some kind of tension (ex: a 7 Chord). Anyway, right now, in a 4/4 song, there is no way to render a measure shorter than 4 beats.

Yeah, that is exactly what I was saying! Of course, I suppose your approach might be easier to implement technically (because you understand the existing code). I would write out the lyrics in their final form, and then use the "" symbol to mark on the Chord line where a measure should be split up (seems more natural to me this way).

|A                  |D...    \ 
_ Lorem ipsum dolor _sit amet,
G.   |A             |
_Con _sectetur adipiscing elit

In the end, the same result is accomplished. The only remaining "mystery" is how the measure bars will align? (ex: when displaying only chords)

|A                  |D...    G.   |
|A                  |

or like this:

|A                  |D...   
 G.   |A            |

7 replies

no-chris Sep 10, 2024
Maintainer

That's an easy fix yes

no-chris Sep 18, 2024
Maintainer

Should splitting a chordline be allowed inside a sub-beat group?

A D.. [E \ 
_ Lorem ipsum dolor _sit amet, 
A] G
_Con _sectetur adipiscing elit

This is probably edge case enough to be considered at a later stage wdyt?

no-chris Sep 18, 2024
Maintainer

This is the way I've been trying to handle such situations; it doesn't always work because "2/4" is the smallest measure acceptable but it's longer than the pick-up measure (which are typically 1 beat).

This will be fixed in the next release #666

thecodeinventor Sep 19, 2024
Author

Should splitting a chordline be allowed inside a sub-beat group?

It would be nice to have (especially because it would not generate a special case where splitting is not permitted) but I think such cases are rare too (Tried to think of an example of such a use case, but can't find one). I know functionality comes at the cost of effort. So, if it's easy enough then there's no time like the present to implement; else: implement later :) (P.S. I will be sure to let you know if I encounter examples where this is absolutely necessary)

This will be fixed in the next release #666

Awesome! Looking forward for it! 💯
I assume 1/4 will work just like any other time signature, but just to be sure: will subdivisions be possible in a 1/4 measure? ex: 1/4 [NC A] 4/4 E

no-chris Sep 20, 2024
Maintainer

I assume 1/4 will work just like any other time signature, but just to be sure: will subdivisions be possible in a 1/4 measure? ex: 1/4 [NC A] 4/4 E

works, added a test case for it acc576e

thecodeinventor · 2024-09-26T17:48:01Z

thecodeinventor
Sep 26, 2024
Author

Once again, great job with this library! 🥇 Can't wait for the next update!

I have some more feedback for you:
in 6/8 time, rendering is weird:
6/8
C. F. G. C. F. G. ---> |C F |G C|F G |
C.. F.. G.. C.. ---> |C |F |G |C |
C. F. ---> |C F |
C. F. G. ---> error
how do you write 3 chords in a 6/8 measure?

3 replies

no-chris Sep 26, 2024
Maintainer

You make me doubt
I always considered 6/8 as 2 beats with three 8th notes each
so with that definition ChordMark's rendering is I think consistent

It's also consistent with Wikipedia? https://en.wikipedia.org/wiki/Time_signature

thecodeinventor Sep 29, 2024
Author

I think you are right. I'm sorry I said it was "weird". My bad.

no-chris Oct 1, 2024
Maintainer

No worries 😉

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Chord Rendering #660

{{title}}

Replies: 11 comments 19 replies

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Chord Rendering #660

thecodeinventor Aug 20, 2024

Replies: 11 comments · 19 replies

no-chris Aug 22, 2024 Maintainer

thecodeinventor Aug 22, 2024 Author

no-chris Aug 22, 2024 Maintainer

thecodeinventor Aug 23, 2024 Author

no-chris Aug 24, 2024 Maintainer

thecodeinventor Aug 26, 2024 Author

no-chris Aug 28, 2024 Maintainer

thecodeinventor Aug 28, 2024 Author

thecodeinventor Sep 2, 2024 Author

no-chris Sep 4, 2024 Maintainer

thecodeinventor Sep 5, 2024 Author

no-chris Sep 5, 2024 Maintainer

thecodeinventor Sep 6, 2024 Author

no-chris Sep 5, 2024 Maintainer

thecodeinventor Sep 6, 2024 Author

no-chris Sep 8, 2024 Maintainer

thecodeinventor Sep 8, 2024 Author

no-chris Sep 9, 2024 Maintainer

thecodeinventor Sep 10, 2024 Author

no-chris Sep 10, 2024 Maintainer

no-chris Sep 18, 2024 Maintainer

no-chris Sep 18, 2024 Maintainer

thecodeinventor Sep 19, 2024 Author

no-chris Sep 20, 2024 Maintainer

thecodeinventor Sep 26, 2024 Author

no-chris Sep 26, 2024 Maintainer

thecodeinventor Sep 29, 2024 Author

no-chris Oct 1, 2024 Maintainer

thecodeinventor
Aug 20, 2024

Replies: 11 comments 19 replies

no-chris
Aug 22, 2024
Maintainer

thecodeinventor
Aug 22, 2024
Author

no-chris
Aug 22, 2024
Maintainer

thecodeinventor
Aug 23, 2024
Author

no-chris
Aug 24, 2024
Maintainer

thecodeinventor
Aug 26, 2024
Author

no-chris Aug 28, 2024
Maintainer

thecodeinventor Aug 28, 2024
Author

thecodeinventor
Sep 2, 2024
Author

no-chris Sep 4, 2024
Maintainer

thecodeinventor Sep 5, 2024
Author

no-chris Sep 5, 2024
Maintainer

thecodeinventor Sep 6, 2024
Author

no-chris
Sep 5, 2024
Maintainer

thecodeinventor Sep 6, 2024
Author

no-chris Sep 8, 2024
Maintainer

thecodeinventor
Sep 8, 2024
Author

no-chris Sep 9, 2024
Maintainer

thecodeinventor
Sep 10, 2024
Author

no-chris Sep 10, 2024
Maintainer

no-chris Sep 18, 2024
Maintainer

no-chris Sep 18, 2024
Maintainer

thecodeinventor Sep 19, 2024
Author

no-chris Sep 20, 2024
Maintainer

thecodeinventor
Sep 26, 2024
Author

no-chris Sep 26, 2024
Maintainer

thecodeinventor Sep 29, 2024
Author

no-chris Oct 1, 2024
Maintainer