Musical keyboard component written in React.
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
 
 
 
 
TheoryOfNekomata 49483d6489 Fix publish script il y a 4 ans
.storybook Add keyboard map il y a 4 ans
src Add keyboard map il y a 4 ans
.editorconfig Initial commit il y a 4 ans
.gitignore Fix metrics, SSR support il y a 4 ans
.npmignore Update dependency list il y a 4 ans
.prettierrc Initial commit il y a 4 ans
LICENSE Initial commit il y a 4 ans
README.md Add publishing il y a 4 ans
package.json Fix publish script il y a 4 ans
publish.sh Fix publish script il y a 4 ans
tsconfig.json Make accidentals more prominent il y a 4 ans
yarn.lock Remove extraneous dependency il y a 4 ans

README.md

Musical Keyboard

Musical keyboard component written in React.

Installation

This component is currently available in:

Once set up, install the package from the registry:

yarn add @theoryofnekomata/react-musical-keyboard

Usage

Basic usage is as follows, rendering the keyboard range of a modern grand piano (88 keys, from A0 to C8):

import * as React from 'react'
import ReactDOM from 'react-dom'
import Keyboard from '@theoryofnekomata/react-musical-keyboard'

const App = () => {
  return (
    <div>
      <Keyboard
        startKey={21}
        endKey={108}
      />
    </div>
  )
}

const container = window.document.createElement('div')

window.document.body.appendChild(container)

ReactDOM.render(<App />, container)

The library also supports keyboard maps for handling mouse, touch, and keyboard events:

import * as React from 'react'
import ReactDOM from 'react-dom'
import Keyboard, { KeyboardMap } from '@theoryofnekomata/react-musical-keyboard'

const App = () => {
  const handleKeysChange = keys => {
    // TODO handle key change: send MIDI events, play audio samples, etc.
  }

  return (
    <div>
      <Keyboard
        startKey={21}
        endKey={108}
      >
        <KeyboardMap
          channel={0}
          onChange={handleKeysChange}
        />
      </Keyboard>
    </div>
  )
}

const container = window.document.createElement('div')

window.document.body.appendChild(container)

ReactDOM.render(<App />, container)

The component is stylable, just supply custom components for the keys:

import * as React from 'react'
import ReactDOM from 'react-dom'
import Keyboard from '@theoryofnekomata/react-musical-keyboard'
import NaturalKey from './my-styled-keys/NaturalKey'
import AccidentalKey from './my-styled-keys/AccidentalKey'

const App = () => {
  return (
    <div>
      <Keyboard
        startKey={21}
        endKey={108}
        keyComponents={{
          natural: NaturalKey,
          accidental: AccidentalKey
        }}
      />
    </div>
  )
}

const container = window.document.createElement('div')

window.document.body.appendChild(container)

ReactDOM.render(<App />, container)

Custom keys should accept a keyChannels prop for active keys. For instance, in the custom key components imported above:

// ./my-styled-keys/NaturalKey.js

import * as React from 'react'
import NOT_PRESSED_KEY from './not-pressed.png'
import PRESSED_KEY_OVERLAY from './pressed-overlay.png'

const NaturalKey = ({
  keyChannels = []
}) => {
  return (
    <div>
      <img src={NOT_PRESSED_KEY} alt="" />
      {keyChannels.map(k => (
        <img key={k.channel} src={PRESSED_KEY_OVERLAY} alt="" />
      ))}
    </div>
  )
}

export default NaturalKey

Take note that pressed keys from multiple channels might overlap, therefore it is advisable to support multiple channels pressing a single key at once.

License

MIT. See License file for details.