uke-chord-renderer

Ukulele chord renderer.

Outputs ukulele chord images to svg and js files.

Output horizontal:

Or vertical:

Usage

Output the image with the following commands.

Setup

# git clone
git clone https://github.com/pushback/uke-chord-renderer.git

# setup & build once
cd ./uke-chord-renderer
yarn
npm build

Run

# Output all chord image to under ./dist folder
# *.svg, chord.js, preview.html
npm all

# Or output all chord vertical image
npm all:vertical

# Or output single chord image to svg string
npm run single Cm > ./dist/Cm.svg

# Or output single chord vertical image
npm run single:vertical Cm > ./dist/Cm.svg

Example

HTML

Use svg file with img element

<img src="Cm.svg" />

Use chord.js with img element

<div id="chord"></div>
<script src="chord.js"></script>
<script>
  let svgStr = CHORD_LISTS.find((e) => e.chord === "Cm").svg;
  document.getElementById("chord").innerHTML =
    '<img src="data:image/svg+xml;base64,' + window.btoa(svgStr) + '">';
</script>

Rendering results of both

Preview chord image

Open ./dist/preview.html to see all chord image.

Inside chord data format

See ./src/chordLists/*.ts.

Definition

  {
    // name of chord
    name: 'Cm',
    // Fret numbers for the 1st through 4th strings.
    // In the case of barre(ceja), multiple pressed strings are listed in an array
    frets: [3, 3, 3, [3, 5]],
    // Finger numbers for the 1st through 4th strings.
    // In the case of ballet(Ceja), multiple pressed strings are listed in an array
    fingers: [1, 1, 1, [1, 3]]
  },

Rendering results

References

• ウクレレコード一覧表｜楽器.me
• Ukulele Chords Diagrams & Ukulele Fretboard • UkuTabs
• starenka/chordata: A dummy chordbook for mandolin, ukulele and guitar