jazz-soft / jzz-input-kbd Goto Github PK
View Code? Open in Web Editor NEWVirtual piano controls for your MIDI projects
Home Page: https://jazz-soft.net/demo/PianoStyle.html
Virtual piano controls for your MIDI projects
Home Page: https://jazz-soft.net/demo/PianoStyle.html
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.
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)
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 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.
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:
visualize the passing signal
. And could also allow customizing different styles for midi event from different 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
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.