Skip to content

Chord and Chord Progression Suggestion Tool made in React w Sharp11 and Tonal music theory node packages

Notifications You must be signed in to change notification settings

JorPan/musicly-frontend

Repository files navigation

Musicly's Mode.ify Frontend

Musicly's Mode.ify is a web app designed for musicians to write complex chords and progressions, making their music more interesting, and invoke more emotion.

The main feature is a piano that maps to your computer keyboard, with a chord builder and chord progression builder, and several suggestion modes that suggest more complex chords, or chords that fit within the key you're in. This now utilizes local storage so you can save chords and chord progressions locally and access them later.

Demo Video

Musicly - Mode.ify Demo Video

Inspiration

Music theory is HARD. There are over 4,000 recognized chords before we even get into voicings. There are 168 scales to choose from. This leads to a nearly infinite number of possibilities, yet we tend to hear a lot of the same chord progressions again and again. Mode-ify helps musicians break out of the norm by offering more complex chords, and chord suggestions to go along with other selected chords. Have fun, and explore!

Technologies

💻React.js
💻JavaScript / HTML / CSS
💻Node.js
💻Express.js
💻Tonal.js
💻Sharp11
💻PostgreSQL

Setup

Frontend

  • Clone the front end repo off git hub at the link provided above.
  • Run npm install to get all dependencies.
  • Run npm start to start the server, and press 'y' if prompted to use a different port.
  • This will automatically open the app in your browser.
  • You don't need to utilize the back end to use this app locally!

Instructions

Once opening the app, users will see several options - click on Mode-ify. This is the name of the chord & progression builder application.

Users will be instantly met by a piano keyboard that maps to their computer keyboard. There is a sound drop down with more than 120 sounds available to play, I recommend sticking with piano for chords.

As keys are pressed, the note will play, and be shown both on the piano as well as in the Current Notes section at the top. You can pause the current notes by pressing the "pause chord" button, or pressing the SHIFT key which will play back the last note to confirm it is paused.

As any of the 4,000+ recognized chords are played, it will show up in green at the top, and users can enter Magic Mode by clicking "Pause Chord" and then "Make Magic" OR by simply pressing the ENTER key.

Once in Magic Mode users will be shown the key, current chord, and exploration options like Current Chord Extensions, as well as Major and Minor Suggestions.

Any chord can be added to or removed from the progression builder to see how selected chords work together.

The scale drop down is filtered to show ONLY scales that contain ALL of the notes in the selected chord, so users can browse scale options, and get even more chord suggestions based on the scale they select.

HAVE FUN!

Mode-ify in action

Status

This app is still under construction, but can be used locally, and will be deployed for use soon!

Contact

Linkedin Jordan Panasewicz

About

Chord and Chord Progression Suggestion Tool made in React w Sharp11 and Tonal music theory node packages

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published