guitar-chords-viewer

0.1.5 • Public • Published

Guitar-Chords overview

This piece of work is for all guitar-players and learners.

Music makes the world to a better place. All people should be enabled to play music. Everybody is invited to improve oneself, so this is free (MIT license). Use it, grab it, share it, improve it!

Try out live example and / or include into your website. npm i guitar-chords-viewer

A simple collection of all main-chords for guitarists. You can see chords...

  • as notes on a scale
  • as tab on a sterilized guitar neck.

guitar-chord-viewer

and you can play chords

  • Stacked or spread chord-notes:

chord-notes

The frequenz of the notes is calculated based on a settable chamber note. Default is set to 440 Hz.

Left-handed view

You can also change/mirror the view of the guitar-neck. Normally the views are made for right-handed guitars. Changing the view might be more easy for left-handed learners to transport the image to the guitar neck.

  • L/R view for left-handed users.
  • notes, fingerings, strings, tuning are mirrored.

left-handed-view

Technical

Chord-viewer for https://api.uberchord.com chords. E.g. "C":

{
  strings: 'X 3 5 5 4 3',
  fingering: 'X 1 3 4 2 1',
  chordName: 'C,m,,',
  enharmonicChordName: 'C,m,,',
  voicingID: '9223372036959802495',
  tones: 'C,Eb,G'
}

By now there is a set of the main-chords build in. This JSON generates all aspects of the guitar-chords-viewer. Use the parameter chordto inject a chord.

export let chord = {
 strings: 'X 3 5 5 4 3',
 fingering: 'X 1 3 4 2 1',
 chordName: 'C,m,,',
 enharmonicChordName: 'C,m,,',
 voicingID: '9223372036959802495',
 tones: 'C,Eb,G'
}

<GuitarChords {chord} />

Made with Svelte.

Usage as:

  • Web-component: <guitar-chords></guitar-chords>
<head>
    ...
    <script defer src='https://ivosdc.github.io/guitar-chords/dist/build/guitar-chords.js'></script>
</head>
<body>
<guitar-chords></guitar-chords>
  • or as svelte-component <GuitarChords />
<script>
import GuitarChords from 'guitar-chords-viewer/src/GuitarChords.svelte';
</script>

<GuitarChords />

Parameter

  • chord; A chord-json; The chord to display.
  • show_chord_selector; default = true; Display the chord-buttons or hide.
  • chamber_tone; default = 440; The chamber tone for sound generation.

Dependents (0)

Package Sidebar

Install

npm i guitar-chords-viewer

Weekly Downloads

53

Version

0.1.5

License

MIT

Unpacked Size

2.32 MB

Total Files

15

Last publish

Collaborators

  • nologin