https://github.com/dy/piano-keyboard
:musical_keyboard: Piano readable stream/component
https://github.com/dy/piano-keyboard
piano piano-keyboard
Last synced: 30 days ago
JSON representation
:musical_keyboard: Piano readable stream/component
- Host: GitHub
- URL: https://github.com/dy/piano-keyboard
- Owner: dy
- Created: 2015-07-03T12:41:31.000Z (over 10 years ago)
- Default Branch: master
- Last Pushed: 2015-08-29T02:18:42.000Z (about 10 years ago)
- Last Synced: 2025-08-09T13:30:13.059Z (2 months ago)
- Topics: piano, piano-keyboard
- Language: JavaScript
- Homepage: http://audio-lab.github.io/piano-keyboard
- Size: 245 KB
- Stars: 10
- Watchers: 4
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
Visualize piano in DOM. [Demo](http://dfcreative.github.io/piano-keyboard).
[](https://nodei.co/npm/piano-keyboard/)
```js
var Keyboard = require('piano-keyboard');
//options
var keyboad = new Keyboard({
element: document.querySelector('.my-piano'), //if omitted, element is created
range: ['c4', 'c#6'], //notes range, numbers or names
a11y: false //focusable & keyboard interactions
});
//events
keyboard
.on('noteOn', function ({which, volume, target}) {})
.on('noteOff', function ({which, volume, target}) {});
//API
keyboard.noteOn(['a4', 'c2', 'c3'], [127, 80, 80]);
keyboard.activeNotes; // Set <49, 16, 28>
keyboard.noteOff(['a4', 'c2']);
//pipe to midi
keyboard.pipe(require('web-midi')('Launchpad'));
//pipe from midi
var midiIn = require('midi-qwerty-keys')({
mode: 'piano',
offset: keyboard.range[0]
});
midiIn.pipe(keyboard);
//pipe to simple synthesizer WIP
keyboard.pipe(require('synthesizer'));
//change orientation to vertical
keyboard.element.classList.add('piano-keyboard-vertical');
keyboard.element.classList.remove('piano-keyboard-vertical');
//call on changing orientation, resize etc
keyboard.update();
```
## Analogs
* [qwerty-hancock](https://github.com/stuartmemo/qwerty-hancock)