midi-jar

MIDI Jar logo

MIDI Jar

MIDI Jar is a tool box for musicians, learners, streamers, that want to route MIDI message between devices, and display a piano or monitor chords while playing, and integrate it on a video or on a Twitch stream with OBS.

Releases

Check out the releases on Github: Releases

Unsigned App

Due to code sign certificates being a bit expensive, MIDI Jar is not signed (yet?). If you are willing to help me sign this app, financially, don’t hesitate to contact me.

So to install it on Windows, Windows Defender may block it, and warn you that this could be dangerous. You can still execute it anyway.

On MacOS though, the .dmg or any downloaded unsigned file will be blocked, as if “app is damaged and can’t be opened”.

You will need to unquarantine the file after you downloaded, by executing in a terminal:

xattr -dr com.apple.quarantine <Your Downloaded File Name>

Why this app ?

I needed a way to display a piano and monitor chords when i was playing, but found no solution to do it properly. So I created a previous tool called Chord Display to do it in a Web browser, but due to Windows having exclusive MIDI (only one software can use the same MIDI device at a time), I needed a new solution. Plus, OBS BrowserSource is unable to use MIDI devices, so integrating it in a Twitch stream was not possible.

MIDI Jar fixes all theses issues as a Standalone Desktop Application made with Electron.

Features

MIDI Jar includes:

Routing

MIDI Jar Routing Example

You can route MIDI between devices, or to internal and external modules of MIDI Jar, and MIDI messages will be routed when the application is running.

This can be a simple alternative to replace complex softwares like MIDI-OX if you just want to route messages from a device to another.

NOTE FOR WINDOWS USERS:

Windows Standard MIDI drivers are exclusive, only one software can be connected to a device at the same time.

If you want to use MIDI Jar with other sofwares like your DAW, or a Standalone VST, you should install loopMIDI by Tobias Erichsen.

You will be able to create multiple Virtual MIDI devices (loopbacks) and route MIDI messages to it. Plus, those virtual devices are non-exclusive, so multiple softwares can use them.

Latency

MIDI Jar may introduce latency to MIDI messages. I did my best to keep it as low as possible, in the Routing settings page you can see the latency that is introduced by your config: this is only the latency added to the existing latency, from when MIDI Jar receives a message, and forwarded it to other devices and modules.

Any other latency (due to USB, your device drivers or LoopMidi loopback) is not taken into account.

My tests had an average additional latency < 0.2ms but this can vary a lot with PC configuration, routing, and CPU Usage, and some freezes could occur.

Chord Display

MIDI Jar Chord Display example

Chord Display is a module of MIDI Jar for displaying a piano keyboard and the chords played.

It is based on tonal, but with a custom chord dictionary and a modified chord detection feature that allows omissions of intervals (depending on the dictionary).

To use it, route your MIDI devices to the internal chord-display output.

Music Notation

You can enable displaying the standard music notation in Chord Display.

It is implemented with VexFlow and supports displaying notes in any major Key.

NOTE: Key signature that would have more than 7 alterations will be changed automatically to the equivalent major key (e.g. G# will produce a key signature of Ab).

DISCLAIMER: As i am not really into reading and writing music, Chord Display notation could be wrong… If so, do not hesitate to post an issue.

Customize in Settings

Chord Display rendering is customizable in the Settings:

Customize via CSS

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

Disable Background image:

body { background: none !important; color: white; }

Remove detected Chord:

#chord {
  display: none;
}

Remove Bass Note / Slash chord notation:

.chord-root {
  display: none;
}

Remove played Notes:

#notes {
  display: none;
}

Remove piano keyboard:

#keyboard {
  display: none;
}

Change display order:

#keyboard {
  order: 1;
}
#container {
  order: 2;
}
#notes {
  order: 3;
}
#intervals {
  order: 4;
}

Change Text Color:

body {
  color: #fff;
  background: transparent;
}

Change chord size and placement:

#chordDisplay {
  align-items: flex-end;
  justify-content: flex-end;
  padding: 2vh;
  flex-direction: column-reverse;
}

#container {
  align-items: flex-start;
  justify-content: space-between;
}

#chord {
  flex-grow: 0;
  font-size: 10vh;
}

#notes {
  display: none;
}

#alternativeChords {
  display: none;
}

#intervals {
  font-size: 2vh;
}

#notation {
  color: black;
  width: 300px;
  height: 300px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 32px;
  margin-top: 16px;
}

Chord Dictionary

MIDI Jar Chord Dictionary Example

Chord Dictionary is a module of MIDI Jar for browsing the all the chords available in the software, that is a customized diectionary from tonal.

You can access it from the home view of MIDI Jar, or by clicking a chord name in a chord-display module.

It also allows you to customize how the chords are displayed in all other modules that are using the preferred chord notation:

This module can also be interactive, so you need to route your MIDI devices to the chord-dictionary output to let the dictionary work in two possible modes:

Circle of Fifths

MIDI Jar Circle of Fifths Example

The Circle of Fifths is a music theory tool to help understanding and writing music.

This modules let you choose easily the Key signature you are playing in, and displaying notes.

It will react (in green), at your choosing:

You can customize its rendering by adding/removing sections of the wheel:

NOTE: The Circle of Fifths is usually for displaying notes, not chords. But i found that it was also suited for chords, and particularly visualizing resolutions between degrees. Any chord in a same angular part of the circle will tend to resolve to the first degree in the scale. This module is more a personal vision than a standard representation. Don’t hesitate to disable the sections you don’t need.

HTTP/WS Server - Overlay

It enables integrating modules in an external web browser, or in an OBS Browser Source. For instance, you can integrate MIDI Jar in your Twitch stream, or load it on a different computer or phone for displaying chords while jamming, and even use it as a Desktop Wallpaper using Lively Wallpaper.

All MIDI Jar module can be accessed externally, and you can create as many chord-display modules as you want if, for instance, you want multiple keyboards, or customize their arrangement in OBS.

Currently, updating settings externally is not supported, but this is planned.

Music Notation

Music Notation can be displayed in the Chord Display module and changed through the Circle of Fifths.

You can customize it in the settings, and this will affect all modules (including the overlay)::

Chord Quiz

MIDI Jar Chord Quiz Example

You can train piano by using the Chord Quiz module.

Each round of a game you will be prompted a chord that you must play, and will also see the next chord to play (to anticipate your finger movements).

Your answer will be committed when you release all the keys, and can result to different score for the round:

Any addition, repetition, or inversions of a chord will grant you additional points.

You can choose which mode (algorithm) to play with:

And finally, to adapt your training, you can choose the difficulty, each levels adds new chords to the possible list:

If the game mode is too annoying, you can turn off the scoring, the reactions, and choose to display or not the asked intervals, but have in mind that the gamification is only for fun, there is no persistent scoreboard or high score, it’s only a tool to help exploration.

Hopefully in the future, this module will be able to have an “Intelligent” mode capable of generating random chord progressions with key changes.

MIDI Jar - Chord Quiz example

What then ?

Build

This project is built with Electron & Webpack:

npm install

npm run start
 -or-
npm run package

Planned features / Ideas

Contribute / Bugs

This project is fully open to contribution and it would be appreciated to 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

This site is open source. Improve this page.