Musical keyboard component written in React.
25'ten fazla konu seçemezsiniz Konular bir harf veya rakamla başlamalı, kısa çizgiler ('-') içerebilir ve en fazla 35 karakter uzunluğunda olabilir.
 
 
 
 
TheoryOfNekomata 1ab5104bc4 Add demo, fix keyboard event handling 4 yıl önce
.storybook Add keyboard map 4 yıl önce
docs Add demo, fix keyboard event handling 4 yıl önce
example Add demo, fix keyboard event handling 4 yıl önce
src Add demo, fix keyboard event handling 4 yıl önce
.editorconfig Initial commit 4 yıl önce
.gitignore Fix metrics, SSR support 4 yıl önce
.npmignore Update dependency list 4 yıl önce
.prettierrc Initial commit 4 yıl önce
LICENSE Initial commit 4 yıl önce
README.md Bump version and updated publish script 4 yıl önce
package.json Add demo, fix keyboard event handling 4 yıl önce
publish.sh Bump version and updated publish script 4 yıl önce
tsconfig.json Make accidentals more prominent 4 yıl önce
yarn.lock Remove extraneous dependency 4 yıl önce

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.