Norwegian Puffin Movies

    bb-chord-symbol
    TypeScript icon, indicating that this package has built-in type declarations

    1.0.10 • Public • Published

    Preview

    Bb-chord-symbol

    HTML5's canvas' chord symbol rendering library.

    Very important part

    The "bb" in bb-chord-symbol is pronounced "B flat"

    Install

    npm i bb-format

    Usage

    import

    import { BbFormat } from 'bb-format';

    Basic usage

    // Get a context to use for rendering
    const canvas = document.getElementById("myCanvas") as HTMLCanvasElement;
    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
     
    // Create the renderer instance
    const renderer = new BbFormat(ctx);
     
    // Render your chord
    formatter.fillChordSymbol('Bb7#9#5/D', 100, 100);

    A rendered chord using font Petaluma Script

    Advanced usage

    1: tweaking the config

    // Get a context to use for rendering
    const canvas = document.getElementById("myCanvas") as HTMLCanvasElement;
    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
     
    // Create the renderer/formatter instance
    const formatter = new BbFormat(singleCtx);
     
    // Modify the formatter's config
    const options = new BbChordSymbolOptions();
    options.parentheses.type = '[]';
    options.useMinusSignForMinorChords = false;
    options.descriptor.verticalOffset = 0;
    options.separator.angle = Math.PI * 20 / 360;
     
    formatter.chordSymbolOptions = options;
     
    // tweak the chord's pre-layout renderer's config
    const renderConfig: RendererConfiguration = {
        useShortNamings: false,
        harmonizeAccidentals: true,
        transposeValue: 2, // transpose a whole tone above
    }
    formatter.rendererOptions = renderConfig;
     
     
    // Render
    formatter.fillChordSymbol('Ab7#9#5/D', 100, 100);

    A rendered chord using font Petaluma Script

    2: Post layout processing

    // Get a context to use for rendering
    const canvas = document.getElementById("myCanvas") as HTMLCanvasElement;
    const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
     
    // Create the renderer/formatter instance
    const formatter = new BbFormat(singleCtx);
     
    // Get a laid out chord
    const laidOutChord: BbText = formatter.layoutChordSymbol('Gb7#5b9/E');
    if (!laidOutChord) {
        // You should handle here what happens if the chord could not be parsed.
        // This happens when it is not valid.
        return; // Probably, if you are inside a function.
    }
     
    // rotate the all extensions
    // all extensions start with either a sharp or a flat
    laidOutChord.fragments.filter((v: BbTextFragment) => {
        return v.text.startsWith("\u266F") || v.text.startsWith("\u266D"); // Unicode flat and sharp
    }).forEach((v: BbTextFragment) => {
        v.angle = -Math.PI * 40 / 360; // Rotate 40 degrees anti-clockwise
    });
     
    // render
    formatter.fillText(laidOutChord, 100, 100);

    A rendered chord using font Petaluma Script

    Well that's awesome!

    bb-chord-symbol is licensed under the MIT License. That means you may do whatever you wish with it. However, developing such libraries takes considerable time and effort, so if you find it valuable, please consider supporting me with a donation via paypal.

    License

    MIT

    Giant steps

    Install

    npm i bb-chord-symbol

    DownloadsWeekly Downloads

    2

    Version

    1.0.10

    License

    MIT

    Unpacked Size

    64.8 kB

    Total Files

    32

    Last publish

    Collaborators

    • marr11317