martijnversluis / chordsheetjs Goto Github PK

In a application I'm developing, I wanted to style certain parts of the chord sheet with addinional css. For example, if I'm writing:
Verse 1:
I wanted to recognize this as a class of section (in this example with a bold text property).

Resulting in this parsed sheet:

Verse 1:
This is my lyrics for verse one.

I'm using the table formatter, so for now I have this regex checking for words ending in colon, or colon followed by any number of whitespaces in html_table_formatter.js:

key: 'cell',
    value: function cell(cssClass, value) {
      // If word ends with colon (with or without whitespaces), add section class to td:
      const regex = /:\s*$/;
      if (regex.test(value)) {
        return '<td class="section">' + (0, _html_entities_encode2.default)(value) + '</td>';
      }
      // Else return original string value
      return '<td class="' + cssClass + '">' + (0, _html_entities_encode2.default)(value) + '</td>';
    }

Downside of this, is of course if any part of the lyrics itself contains colon and printing this as bold. You may have a better solution.

I also thought of checking for specific words like intro, verse, chorus, bridge, etc - but it would be a long list of possible section names.

Any inputs on this, or maybe it could be offered as a feature?

Any plans to include the start_of_tabs and end_of_tabs directives?
I am making an opensource app with this lib and would be really usefull if the Song class already supported this directive.
Currently I need it just for a better formating of tabs on screen.
This is the source code: https://github.com/artutra/OpenChord

Parse the following tags and attach as meta data to paragraphs:

• textfont
• textsize
• textcolour
• chordfont
• chordsize
• chordcolour

See: https://web.archive.org/web/20181114160238/http://www.chordpro.org/chordpro/ChordPro-Directives.html#fonts-sizes-and-colours

See #178

This will make CSS formatting easier, and not interfered from the outside.

A suggested CSS is

  .chord-sheet {
    .row {
      display: flex;
      flex-direction: row;
    }

    .column {
      display: flex;
      flex-direction: column;
      height: 100%;
    }

    .chord, .lyrics {
      flex-grow: 1;

      &::before {
        content: '\200b';
      }

      * + & {
        margin-left: 0.5em;
      }
    }
  }

I'm interested in a feature that is in your master, but unreleased on NPM (namely, divs wrapping chorus paragraphs in the HTML table formatter). Are you planning to release a new version with those changes?

Mark support for:

• start_of_chorus
• end_of_chorus
• start_of_verse
• end_of_verse

as included.

The lyric and chord position is not matched in chinese character, please check

I'd like to volunteer to submit a TypeScript .d.ts file for your project to DefinitelyTyped.

I am building a song library using gatsby. In my project, I have used a combination of ChordJs and ChordsheetJs. I am writing all the lyrics with chords in a Markdown file. Until now the output of a ChordPro sheet was as defined in the docs, but since last week I am experiencing a bug on adding a new lyrics MD file to the project.

To parse the file I use:
const [song] = useState(new ChordSheetJS.ChordProParser().parse(post.internal.content))

and to render the html output:
const htmlChordSheet = new ChordSheetJS.HtmlDivFormatter().format(song)

while using the HtmlDivFormatter() the HTML on the webpage now looks like this

I tried replacing HtmlDivFormatter() with HtmlTableFormatter(), this solved the issue but raised another one. The spacing between paragraphs was no longer there.
The highlited area shows the end of a paragraph.

There is also issue with the regular chord sheet. On the webpage, chords move forward from their defined postion.

Expected output

output on webpage

What about a inline chord notation? Like:

Intro: [[C]] [[Am]]
[C]Som[G]e random lyrics

So it will be rendered this way:

Intro: C Am
C G
Some random lyrics

When chordProParser parser this:

C                G              F  C/E Dm          C
Whisper words of wisdom, let it be

It is ignoring the whitespaces after the Dm chord and formating like this:

[C]Whisper words of [G]wisdom, let it [F]be [C/E] [Dm] [C]

Shouldn't it format like this?

[C]Whisper words of [G]wisdom, let it [F]be [C/E] [Dm]          [C]

How about adding a configuration to transpose all chords of the music?
This method should do the trick for each chord:

function transposeChord(chord, amount) {
    var scale = [["C"],
                 ["C#","Db"],
                 ["D"],
                 ["D#","Eb"],
                 ["E"],
                 ["F"],
                 ["F#","Gb"],
                 ["G"],
                 ["G#","Ab"],
                 ["A"],
                 ["A#","Bb"],
                 ["B"]];
    return chord.replace(/[CDEFGAB](#|b)?/g, function(match) {
        for (var i = scale.length - 1; i >= 0; i--) {
            if(scale[i].indexOf(match) != -1){
                var j = (i+amount) % scale.length;
                return scale[ j < 0 ? j + scale.length : j ][0];
            }
        }
    });
}

Hi, Great package! Thanks for it.

I have a use-case which is saving the parsed song to a db in JSON format so that I can index on meta data, eg. title, capo etc instead of saving in chordpro, parsing on the server and extracting out meta data into separate db fields.

I don't see a public method to do this. Am I missing something? It would be easy enough to serialize/deserialize just the static properties, but of course the methods would be problematic without some tinkering and/or using a third-party library. Thoughts? I'm happy to issue PRs if needed.

Putting a chord in the middle of a word adds an extra space. This should not happen. See example below (wisdom is cut in two).

Add support for:

• artist
• composer
• lyricist
• copyright
• album
• year
• key
• time
• tempo
• duration
• capo
• meta

See: https://www.chordpro.org/chordpro/ChordPro-Directives.html#meta-data-directives

I tried to add other metadata such as key and also to name the verse, but it seems it is not rendered.

Example song

{title: Let it be}
{subtitle: ChordSheetJS example version}
{key: C}

{start_of_verse: Verse 1}
Let it [Am]be, let it [C/G]be, let it [F]be, let it [C]be
{end_of_verse}

{start_of_chorus}
[C]Whisper words of [G]wisdom, let it [F]be [C/E] [Dm] [C]
{end_of_chorus}

To begin with, thank you for this beautiful piece of software.

I was just playing on ChordFiddle here, and I have to encode a song where a single syllable is long enough to be covered by multiple chords.

[A][B][C]Multi[A]ple

I finally handled it this way to make it readable:

[A]Mu [B]--- [C]- lti[A]ple

Is there something that can be done in the library to make this (edge?) case handled ? It seems to me a bit difficult, because it'd be needed to make chordsheetjs kind of syllable-aware...

Use {start_of_verse} and {end_of_verse} to mark the paragraph(s) in between as verse

I'm now getting an error in my code

 ERROR  Failed to compile with 1 errors                                                                               

This dependency was not found:

* chordsheetjs in ./src/pages/index.js

To install it, you can run: npm install --save chordsheetjs                                                                                                

This is after I've installed ChordSheetJS; I can see it in the node_modules folder.

It looks like the /lib folder is missing from the npm package

Use {start_of_chorus} and {end_of_chorus} to mark the paragraph(s) in between as chorus

I try to execute it with a basic typescript file as follows:

1. tsc --init
2. npm install chordsheetjs
3. create a file app.ts with :

var ChordSheetJS = require('chordsheetjs'); const parser = new ChordSheetJS.ChordSheetParser();

4. In order to allow the 'require' function :
   npm install @types/node --save

5. Compile the typescript with success:
   tsc

6)Execute with:
node app.js

ERROR: ChordSheetJS.ChordSheetParser is not a constructor

May you put an example to test your library? Thank you.

Hello,

Please see:

https://songbook.netlify.com/it-s-my-life/

Do you have any CSS tips to avoid the problem with chords that don't have lyrics under them? I'd like all the chords to line up regardless if there are words under them. See attached screenshot.

Additional CSS classes should be added for verses and choruses

Font directives should be converted to the corresponding HTML

Relates to #30. Thanks to @artutra for pointing out

• allow running Eslint locally by adding the necessary modules and scripts to package.json
• add .eslintignore
• re-enable import/prefer-default-export and no-unused-expressions
• remove legacy Hound config files

How can I reset the chord sheet to the original key after performing transpose function several times?

Hi, I would like use your library in Angular:

1. npm install chordsheetjs --save
2. import { ChordSheetJS } from 'chordsheetjs'; //in my component

Error:
Could not find a declaration file for module 'chordsheetjs'.
'd:/xxxx/node_modules/chordsheetjs/lib/chordsheet.js' implicitly has an 'any' type.
Try npm install @types/chordsheetjs if it exists or add a new declaration (.d.ts) file containing `declare module 'chordsheetjs';

Can you give me an idea?

Make Tag class responsible for parsing the content between the curly brackets

How about an option to allow the htmlFormatter to render chord pro
from this:

Some r[C]andom lyrics

to this:

<p>Some r<div class="chord">C</div>andom lyrics</p>

So it would be possible to use css to make a responsive design like this

ps: Ignore the tablature

When using chord pro format, it would be great to handle a custom exception when it is not possible to parse a meta tag.
For example, the user may write (incorrectly) something like:
{ title: Let it be}

(Note the ' ' before title)

See https://www.chordpro.org/chordpro/ChordPro-Directives.html#custom-extensions

See: https://www.chordpro.org/chordpro/ChordPro-Directives.html

In order to perform transformations like modulations there should be a ChordProFormatter to convert a edited song back to ChordPro format.

Not sure if this is something that is ever required but should maybe be handled.
All the best.

https://web.archive.org/web/20181124024446/http://www.chordpro.org:80/chordpro/ChordPro-Configuration-Format-Strings.html

Hello. I use this program to convert ultimate guitar tabs to chordsheets but it gives a weird output for chords.
Example (https://tabs.ultimate-guitar.com/tab/ajj-andrew-jackson-jihad/normalization-blues-chords-2953307):

E
I'm detached and I'm distracted
E
All keyed up and unproductive
E
Vacillating between being all excited and disgusted
A
And then dozing lackadaisically
A                                       E
In this bubble where I've made my mental home
 B7                                 A
Connection's more important now than it ever was
                    E
But I'd rather be alone

Gives

[E]I'm detached and I'm distracted
[E]All keyed up and unproductive
[E]Vacillating between being all excited and disgusted
[A]And then dozing lackadaisically
[A                                      ]In this bubble where I've made my mental[E]home
C[B7                                ]onnection's more important now than[A]it ever was
[                   ]But I'd rather be al[E]one

Notice the spaces in the chord names