feature req: JZZ.input.Kbd(params) accept multiple channels?

[williamjoy]

JZZ.input.Kbd(params); from the doc,

where params - is the object with the following possible keys:

at: the DOM element or the ID of the DOM element to host the keyboard; if omitted, a new <DIV> element will be created in the end of the document.
from: the lowest key; default: 'C4'.
to: the highest key; default: 'E6'.
wl and ww: white key length and width in pixels; default: 150 and 42.
bl and bw: black key length and width in pixels; default: 100 and 24.
pos: position; 'N' (default) - musician is facing North; 'S' (upside-down) - musician is facing South; 'E' and 'W' (vertical) - musician is facing East and West.
rev: reverse; if true, thekeys are arranged in mirror otdrt.
keys: an array of [key, note] pairs, where key is a DOM element (or its ID) to be a piano key, and note is the corresponding note, as MIDI number or readable string name; must be one-to-one correspondence; if keys is specified, all above parameters will be ignored. ([example](https://jazz-soft.net/demo/PianoStyle.html#svg))
chan: MIDI channel; default: 0.
active: if false, the keyboard will not respond to mouse and touch input.
onCreate: the function to run after the keyboard is created; it can be used for additional styling.
numeric values: responsive subparams; these will be used if the screen width is greater or equal to the key value. ([example](https://jazz-soft.net/demo/Responsive.html))

Is it possible to allow multiple channels? The use cases can be like:

• Parsing a MIDI file with multiple channels and send events to midi output, at the same time doing visualize the passing signal. And could also allow customizing different styles for midi event from different channels.
• Midi events from websocket (currently I'm doing experiments for fun), doing some hacks to modify chan 2 to chan 1, wondering if JZZ-input-Kbd can do builtin support with multiple channels

  <script type="text/javascript">
    var webSocket = $.simpleWebSocket({ url: 'ws://local-network-ip:8080/midi' });

    var from_socket = JZZ.Widget();
    from_socket.connect(piano_out);
    // reconnected listening
    webSocket.listen(function(message) {
        var lastTimestamp = message[0].Timestamp;
        for(let i = 0; i <message.length; i++) {
          var event = message[i];
          var diff = event.Timestamp - lastTimestamp;

         // chan 2 note on/off -> chan 1 note on/off, see https://www.midi.org/specifications-old/item/table-2-expanded-messages-list-status-bytes
          if (event.Status === 145 || event.Status === 129) {
            event.Status = event.Status - 1
          }
          var msg = JZZ.MIDI(event.Status, event.Data1, event.Data2);

          if (diff > 0) {
            setTimeout(function() {
            from_socket.emit(msg);
            }, diff);
          } else {
            from_socket.emit(msg);
          }
          lastTimestamp = event.Timestamp;
        }
    });

</script>

The websocket server is connecting to physical MIDI devices with USB cable or with Apple RTP-Midi protocol etc, and broadcasts Midi events to websocket clients

[jazz-soft]

Thanks for a great question! I'm afraid making keyboard multichannel would make the API too complicated. Multichannel MIDI would be better visualized with multiple keyboards as here: https://jazz-soft.net/demo/PlayMidiFile.html You can play with transparency and stack several keyboards on top of one another. I'll try to setup a demo when I have more time...

[williamjoy]

Thanks @jazz-soft , I did play the demos of multiple keyboards (and all demos without jazz plugin needed, nice project!) More specifically I want two channels of piano left hand and right hand channels to be visualized on same keyboard, and different styles for left and right hand. Similar as the Synthesia app :)

I'll try to see if transparency and stack several keyboards on top of one another can do the work

[williamjoy]

Did some experiments of setting top layer piano keyboard to transparent when key is in released state. It works nicely except the top layer piano white key drawing rectangle overlapped with black key. https://github.com/williamjoy/virtual-midi-over-websocket/blob/de967fb9446c1c2e54c0a7302ee703ff054bf21f/index.html#L27-L28

• Blue keys are from midi channel 1, keyboard style with no transparency, sitting on bottom layer. Seem OK
• Green keys are from midi channel 0, keyboard style set to 100% transparent when keys are released not transparent when keys are pressed.

Above screenshot shows the case when black keys not pressed but surrounding white key pressed.
@jazz-soft any suggestions how to better config the keyboard styles?