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

props 名	型	説明
keyboardWidth	必須 number	鍵盤全体の幅を指定してください。
classKeyboard	必須 string	鍵盤全体のclassNameを指定してください。
classWhiteKeys	必須 string	白鍵全体のclassNameを指定してください。
classWhiteKey	必須 string	白鍵一つ一つのclassNameを指定してください。
classBlackKeys	必須 string	黒鍵全体のclassNameを指定してください。
classBlackKey	必須 string	黒鍵一つ一つのclassNameを指定してください。
noteSounds	必須 { [keyName: string]: HTMLAudioElement }	キーのクリック時に再生するHTMLAudioElementを指定してください。
classActiveKey	任意 string	強調したいキーがある場合、そのclassNameを指定してください。
activeKeys	任意 string[]	強調したいキーがある場合、keyNameを指定してください。(C3, A6, Eb2, etc...)
keyScale	任意 number	鍵盤のスケールを指定してください。初期値は0です。

keyName

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

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

音源について

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

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