Skip to content

todo.md

Latest commit

 

History

History
278 lines (234 loc) · 8.49 KB

todo.md

File metadata and controls

278 lines (234 loc) · 8.49 KB

Chord Finder

Pure React chord name output from virtual piano keys. With a focus on ui ux display across multiple devices, Specifically mobile

V2

  • Features:

    • Piano GUI:

    • Do active notes

    • markup css

    • 12 Note input

    • [] Remove cursor from key its annoying

    • Black note

    • White note

    • friendly note name in class not C#

    • Piano Component Controls:

      • Note click handler
        • key down long press state (useEffect ?)
        • key up
        • Max Keys
        • Key layout x2 (octaves)
        • Fix key press logic on and off
        • Reset feature
        • Error Boundries
        • interval name

    • ChordName Components

      • Jest Test and config for all chord types
      • Handle no chord in jsx

    • UX

      • Longpress to hold down note / touch
      • Repeat play
        • Maby do this one level up ?

    • UI

      • Create a card component
      • keyboard for all screens
      • Redo wireframe grid in bootstrap
        • Currently too much padding
      • [] Rotate keyboard
      • [] Name Keys overlay
      • Add responsive keyboard

    • Context:

      • Add note to noteInput
      • Remove note from noteInput
      • Restructure notes data to include octave
      • Could be a threat as it will require a lot of refactoring
      • Sort notes by pitch
      • Object mutation for notesReducer

    • Harmony HOC:

      • Harmony

        • Simple Chords

        • Output root

        • Major min 7th dims etc

        • Inversions

          • any simple chords can be inverted
          • library js theory plugin
          • Decide on whether to keep 0 - 7 Tone logic or Stacked Interval logic
          • normlize naming convention

        • Advanced chords

        • Look for alts to derive note id the "flat" Eb prblem.

        • ~~ [] Change this to functional component ?? ~~

        • Needs extra octave

        • simplify switch getChord? make recursive

        • Do stacked intervals

        • Recheck no chordname found output

        • Add inversion logic

          • Logic on when to apply inversion to chord name
          • Hide undefined output
          • Dont show first inversion
          • Fix inversions order/degree output
          • Run Jest test cases
          • Where to handle inversion ?
          • Potentially now we will have multiple chord names
          • up to now we dont have a way to derive a chord from a scale

        • Compromise either reducer complexity or getChord complexity

        • Pass notes to context like this "A4" the current data structure is too complex [x] This is a nice output for info F7 7th Dominant 7th, Major Minor 7th F, A, C, D♯ 1, 3, 5, ♭7 View

          • Formula using diatonic scale 1 3 5
          • Detect scale
          • Return notes of scale
          • Test cases
          • major
          • minor
          • augmented
          • diminished
          • BUG: 11th 13th chords
          • [x]: Fix Playback
          • Sort Notes
          • []
          • 8 types of 7th
            • ([x]7, maj7, m7, m(maj7), [x]dim7, [x] 7b5, [x]7#5, [x]m7b5)
          • ninth (major/minor)
          • eleventh (major/minor)
          • 13th (major/minor)
          • sixth (major/minor)
          • sus2
          • Over 2 octave test

          -[x] Write Amin chord for two octave test

          • Logic for counting up to notes on next octave (+12)
          • sus4
          • 2
          • Write test case for an inversion
            • Add logic accordingly
              • invert the input 2 times run getChord
              • Check if a chord has been found or not
              • Output inversion with the lowest degree
          • [] Format these notes
          • [] Rename react chord finder to something different

    • when or if you need to check length of input etc do it here in constuctor params notesInput

    • Reproduce audio:

ALLBUGS:

  • Configure esbuild to use new jsx transformation: Missing Dependancy react plugin

  • 8 Key press crashes

  • Simplify array handling from constants

  • Fix piano padding layout

  • Decide on Component Structure & naming

  • Install Bootstrap

  • Install classnames

  • UI Color (make this more highlighted on black key)

  • Fix padding default issue @normalize using import and priority swith

  • Chord name needs to run every time a note is added or removed

  • Keyup doesnt retrigger chord name

  • ol, ul { /* padding-left: 2rem; */} layout issue

  • Migrate to React Vite

    • Investigate react-app to vite

  • Setup proper Tests for chord names

  • [] Fix redundant code in css .black:active {

  • Output no chord found

  • [] Jest not running

  • Deployment

    • Build for prod

  • Config:

    • Re do config and reinstall

Component Tree:

    App.js
     -> Instrument
        -> Piano
            -> Keys
                onClick handlers
                state setNotes
                -> Key

Analysis:

  • Can getChord imporved ?

    • Recursion

  • Where to handle chord name ? In context ? or directly in component

    • Directly in component to levarage state updates

  • How we can we optimize events and state updates

    • The sort on notes could cause issues when coming to do inversions

  • How to handle inversion ?

  • Env variables ?

  • Classes = dna

  • Utilize tonal.js ?

  • ()[https://www.npmjs.com/package/soundfont-player]

  • Treats:

    • When adding an extra octave will need to add a new note object in context
    • Smells like useEffect and useRef could be levaraged to get around this setState issue
    • interface HarmonyProps { ?

Audio Player Integration

A project to better understand audio player integration and its implementation in react

How to map the laptop keys to piano notes. Map the audio with key press. How to render the piano keyboard in react.

Takeaways

utils folder with single functions for export not a class add start scripts to vite for npm start

V3

Requirements:

  • Chord name to key output
  • Scale display
  • [] chord progression component
  • Changeable active color
  • Optimization
  • [] Handle inversion
  • [] Docs / Diagram
  • Typescript ?