Skip to content

A free tool to show chords and notes being played using a MIDI keyboard.

License

Notifications You must be signed in to change notification settings

la-jarre-a-son/chord-display

 
 

Repository files navigation

Chord Display

A free tool to show chords and notes being played using a MIDI keyboard.

Where ?

You can use this tool online at https://chord-display.rednet.io or Download ZIP and open the file dist/index.html directly.

Why ?

I was searching for a VST or any software that can show me the chords while I (or anybody jamming with me) play on a screen. And I was unable to find any good solution, so I created this free tool. It is very simple and very customizable, since it's based on the Web MIDI API now supported by all modern browsers.

You can use it for streaming on Twitch by including it as a BrowserSource in OBS (Open Broadcast Software), Streamlabs OBS or for your Youtube videos. Do not hesitate to mention it in your channel and video description.

Customize

You can customize Chord Display without knowing much about programming.

via CSS

OBS BrowserSource let you inject any CSS in the page, so you can add any style to existing layout, like:

Remove detected Chord:

#chord { display: none; }

Remove Bass Note / Slash chord / Compound chord notation:

.bassnote { display: none; }

Remove played Notes:

#notes { display: none; }

Remove keyboard:

#keyboard { display: none; }

Change Keyboard colors:

.note.white.active .piano-key {
  fill: #ecb2ab;
}

.note.black.active .piano-key {
  fill: #bf3a2b;
}

Remove tonic dots:

.piano-tonic { display: none; }

Add a background to the keyboard:

#keyboard { 
  padding: 32px;
  background: url('http://cdn.backgroundhost.com/backgrounds/subtlepatterns/bo_play_pattern.png') repeat;
}

Change display order:

#keyboard { order: 1; }
#chordContainer { order: 2; }
#notes { order: 3; }

Change Text Color:

body { color: #fff; }

Change Note Highlight Colors:

.note.white { color: #ff4444; }
.note.black { color: #ff0000; }

Change chord size and placement:

#chordContainer {
  align-items: flex-end;
  justify-content: flex-end;
  padding: 2vh;
}

#chord {
  font-size: 10vh;
}

#notes { display: none; }

via Settings in Query Params

Settings are passed throught URL query params (urlencoded), and let you customize some features that might need programmatical changes. When using Chord Display with a standard web browser, on mouse over, the settings sections appears. Any changes to settings are reflected in URL, and will be kept on refresh.

To persist those settings, favorite the page, or copy/paste it in OBS BrowserSource to use the same settings.

With settings you can:

Setting Name Description
midiIn Select the midi input (by name)
noteStart First note of keyboard
noteEnd Last note of keyboard
latinNotationEnabled Display notes and chords with latin (french) notation
pitchWheelEnabled Display the pitch wheel
modWheelEnabled display the mod wheel
colorNote Base color of hightlight notes
colorPitchWheelDown Color when pitch wheel goes down
colorPitchWheelUp Color when pitch wheel goes up
colorModWheel Mod wheel color
hideKeyboard Hide the keyboard
hideNotes Hide the played notes names
hideChord Hide the guessed chord
hideBassNote Hide the bass note of played chord
hideKeyName Hide name of notes on keys
hideTonic Hide tonic dot on keys

What then ?

Build

This project is built with Parcel.

npm install

npm start
 -or-
npm build

Planned features / Ideas

  • Change keyboard size / octaves
  • Settings via URL (keyboard size, MIDI Input, French notation, style without CSS, ...)
  • Pitch Wheel / ModWheel
  • Sustain pedal ?
  • Better chord notations and alternative notations (provided by tonal)
  • Scale detection and display (provided by tonal)

Contribute / Bugs

This project is fully open to contribution and it would be appreciated have some feedbacks and new ideas. Please feel free to open an issue or open a Merge request.

For any UI or UX bug, please Open an issue.

If you discover unexpected Chord detection, please see tonaljs/tonal issues and contribute to make it work perfectly.

Credits

Chord Display is entirely based on the amazing tonaljs/tonal which is still under development.

About

A free tool to show chords and notes being played using a MIDI keyboard.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • JavaScript 79.3%
  • HTML 12.0%
  • CSS 8.7%