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.

    Install

    npm i guitar-chords-viewer

    DownloadsWeekly Downloads

    25

    Version

    0.1.5

    License

    MIT

    Unpacked Size

    2.32 MB

    Total Files

    15

    Last publish

    Collaborators

    • nologin