Shimi-wc is a small collection of web components to aid in the creation of powerful MIDI applications with Shimi.
Shimi came out of a desire to easily build new and experimental MIDI instruments out of user input devices, and these components are designed to provide easy support for visualizing/manipulating the MIDI data that you're working with.
The library currently only contains a few components...
-
<clip-editor> - Draws the notes from a clip object, allowing the user to manipulate the notes within the clip.
-
<in-port-picker> - Connects to available MIDI-in ports on your computer, providing a dropdown of ports to pick from.
-
<out-port-picker> - Connects to available MIDI-out ports on your computer, providing a dropdown of ports to pick from.
-
<scale-picker> - Allows users to select the type of scale they want, then the specific root they'd like that scale to have, returning an event with the requested scale object.
Here is a simple example, displaying a clip editor that allows editing of the first 2 bars of 'twinkle twinkle':
<script src="https://unpkg.com/shimi"></script>
<script src="https://unpkg.com/shimi-wc"></script>
<clip-editor id="clipEditor" min-pitch="C3" max-pitch="C5"></clip-editor>
<script>
const clipEditor = document.getElementById('clipEditor');
clipEditor.clip = new shimi.Clip(8)
.addNote([0,1], 1, 'C4', 80)
.addNote([2,3], 1, 'G4', 80)
.addNote([4,5], 1, 'A4', 80)
.addNote(6, 2, 'G4', 80);
</script>
$ npm install shimi-wc
or
<script src="https://unpkg.com/shimi-wc"></script>
All components have been well documented using storybook, with interactive examples available here: https://jamescoyle1989.github.io/shimi-wc/