jazz-soft / jzz-input-kbd Goto Github PK

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

hello sema! I am looking for a way to use the pitch bend, with the pc keys in real time, my idea is that the path is divided into ten ascii keys

I understand you can disable touch and pointer events using the code below.

piano.getKey('60').setStyle({ "pointer-events": "none" })

But I wish to enable and disable individual keyboard events from JZZ.input.ASCII as well. For example like so:

piano.getKey('60').asciiActive(false)
// do something
piano.getKey('60').asciiActive(true)

It would be useful to disable certain keys to showcase different scales and allow the user to only play those notes using their keyboard.

I tried the example keyboard on https://jazz-soft.net/demo/PianoStyle.html, but I can't hear any sound on Chromium based browsers. Firefox and Webkit works fine.

Hi, I am trying to change the velocity of notes using JZZ.widget() but the notes are still being played at 127 when I click on the piano.

I have tried doing this:

import { JZZ } from 'jzz'
import { Tiny } from 'jzz-synth-tiny'
import { Kbd } from 'jzz-input-kbd'
Tiny(JZZ)
Kbd(JZZ)

const synth = JZZ.synth.Tiny()

const newVelocity = 60

const widget = JZZ.Widget({
  _receive: function (msg: any) {
    msg[2] = newVelocity
    this._emit(msg)
  }
})

JZZ.input.Kbd(...).connect(widget).connect(synth)