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にてピアノの音源を配布しています。

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