https://github.com/micahscopes/all-around-keyboard
a web component for piano keyboards
https://github.com/micahscopes/all-around-keyboard
d3 keyboard music piano web-components
Last synced: 1 day ago
JSON representation
a web component for piano keyboards
- Host: GitHub
- URL: https://github.com/micahscopes/all-around-keyboard
- Owner: micahscopes
- License: mit
- Created: 2017-02-08T11:50:19.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2022-06-22T17:17:55.000Z (over 3 years ago)
- Last Synced: 2025-04-06T07:10:04.550Z (6 months ago)
- Topics: d3, keyboard, music, piano, web-components
- Language: JavaScript
- Homepage: https://micahscopes.github.io/all-around-keyboard/
- Size: 1.66 MB
- Stars: 13
- Watchers: 1
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# all-around keyboards
a web component for round pianos
### [demo](http://micahscopes.github.io/all-around-keyboard)
## usage:
```html
```
You can also customize the keyboard with the following attributes:
```html
```
### Pressing and releasing keys
``` javascript
// select the keyboard
let kb = document.querySelector('all-around-keyboard');
kb.keysPress([2,6,9,11,18])
setTimeout(() => { kb.keysRelease([2,6,9,11,18]) }, 4000);
```
### Lighting and dimming keys
``` javascript
kb.keysLight([2,6,9,11,18])
setTimeout(() => { kb.keysDim([2,6,9,11,18]) }, 4000);
```
### Lighting and dimming notes (pitch classes)
``` javascript
kb.notesLight([2,4,6,7,9,11,1])
setTimeout(() => { kb.notesDim([2,4,6,7,9,11,1]) }, 4000);
```
##### *inspired by mbostock's example for d3: https://bl.ocks.org/mbostock/5723d93e4f617b542991*