react-piano-keyboard v2.0.0

react-piano-keyboard

概要

クリックで演奏できる ピアノ鍵盤の React コンポーネントです。

スタイルは全くあたっていないので、ご自身でスタイリングしてください。

使い方

インストール

yarn add react-piano-keyboard

鍵盤を表示する

import Keyboard from 'react-piano-keyboard';

function App() {
  return (
    <Keyboard
      keyboardWidth={400}
      classKeyboard={'classKeyboard'}
      classWhiteKeys={'classWhiteKeys'}
      classWhiteKey={'classWhiteKey'}
      classBlackKeys={'classBlackKeys'}
      classBlackKey={'classBlackKey'}
      noteSounds={soudObjects}
    />
  );
}

キーを強調する

<Keyboard
  keyboardWidth={400}
  classKeyboard={'classKeyboard'}
  classWhiteKeys={'classWhiteKeys'}
  classWhiteKey={'classWhiteKey'}
  classBlackKeys={'classBlackKeys'}
  classBlackKey={'classBlackKey'}
  noteSounds={soudObjects}
  classActiveKey={'classActiveKey'}
  activeKeys={['C0', 'E0', 'G0']}
/>

Props

keyName

#(シャープ)は使えません。代わりにb(フラット)を使ってください。

C# == Db
D# == Eb
F# == Gb
G# == Ab
A# == Bb

音源について

GitHub リポジトリの./src/public/audioにてピアノの音源を配布しています。

ピアノ以外の音源で演奏することも可能です。