Giter Site home page Giter Site logo

chordparser's Introduction

#Chord Parser [Live Link] [Live Link]: https://chrome.google.com/webstore/detail/chord-parser/bbpkjlgmmdpkdngmglgpfleidnfhecfi

Chord Parser is the ultimate tool for guitarists who are learning to read chord charts. This extension allows you to see tablature for every chord in the song that you're learning without leaving the chord chart page to find every chord individually.

##Instructions Enter a set of chord names or copy and paste a whole text file with chord names in it. Chord Parser will pull out chord names and return tablature for each chord along with the spelling of each chord.

This extension can take in a series of chords separated by spaces ![tag screenshot](screenshots/Short Input.png)

This extension can also take in a large body of text (such as all the selected text from a webpage) ![tag screenshot](screenshots/Long Input.png)

##Technologies and Technical Features This project uses the following technologies:

  • Vanilla JavaScript and jQuery for handling text parsing logic
  • Tonal for chord logic/formulas
  • Webpack for creating a single point of entry for HTML script declaration

Chord Parsing Logic

This logic was created to take in any user input and only create output if there are valid inputs in the text. Due to the nature of music's limited alphabet, a lot of the work is already cut out for me in terms of filtering out non-musical input.

tag screenshot

In this screenshot, we are filtering the text down to any block of text that begins with a musical alphabet. This shuts out a lot of extraneous input.

tag screenshot

At this point, we have all the words that start with letters A-G. Chord qualities can be broken down to the following conditions shown in the screenshot above. Starting at the 1st index of each name allows us to remove small words such as "At" or "Be". We also have to worry about accidentals in the name (i.e. b and #). As such, if accidentals exist in the name, I can move the checking algorithms to check one letter over for the qualities. At this point, the final chord name is sent to the Tonal library to create the chord spellings for each chord. With the chord spellings, creating tablature for chords becomes trivial.

Tablature Display

Most of the chords that we use in guitar are based off of the drop-2 or barre chord shape. As barre chord shapes typically have the same order of degrees going across the strings (6th string degrees from low to high: 1st, 5th, 1st, 3rd, 5th, 1st), all we need to do is take the chord spelling (1 3 5) and plug it into the the tablature parser.

tag screenshot

To figure out where on a string a note is, I created an array with all of the possible notes and object indicating where in this array each string will start. I then grab the index of the chord tone as it is found in the possible notes array and I add this to the string's start index, keeping the number within a modulo of 12.

tag screenshot

To add the 7th degree, we need to find where in the 6th string chord formula the 7th will go. Unfortunately, since the whole formula is already filled with 1 - 3 - 5 degree, we need to choose which notes to replace. Without going into too much music theory detail, we replace the 5th depending on how far from the root the 7th is. Once we figure out this distance, we can decide how far to move the 5th, resulting in a chord with proper 7ths.

##To-dos/future features In future versions, I will be implementing the following features: - Ability to switch between 5th string and 6th string chord views - Extensions beyond 9th chords - Altered Chords - Key finder - Save functionality

chordparser's People

Watchers

James Cloos avatar Andrew Tae avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.