An interactive piano keyboard for React. Supports custom sounds, touch/click/keyboard events, and fully configurable styling. Try it out on CodeSandbox.

yarn add react-piano

Alternatively, you can download the UMD build from unpkg.

You can view or fork the CodeSandbox demo to get a live version of the component in action.

Import the component and styles:

import { Piano, KeyboardShortcuts, MidiNumbers } from 'react-piano';
import 'react-piano/dist/styles.css';

Importing CSS requires a CSS loader (if you're using create-react-app, this is already set up for you). If you don't have a CSS loader, you can alternatively copy the CSS file into your project from src/styles.css.

Then to use the component:

function App() {
  const firstNote = MidiNumbers.fromNote('c3');
  const lastNote = MidiNumbers.fromNote('f5');
  const keyboardShortcuts = KeyboardShortcuts.create({
    firstNote: firstNote,
    lastNote: lastNote,
    keyboardConfig: KeyboardShortcuts.HOME_ROW,
  });

  return (
    <Piano
      noteRange={{ first: firstNote, last: lastNote }}
      playNote={(midiNumber) => {
        // Play a given note - see notes below
      }}
      stopNote={(midiNumber) => {
        // Stop playing a given note - see notes below
      }}
      width={1000}
      keyboardShortcuts={keyboardShortcuts}
    />
  );
}

react-piano does not implement audio playback of each note, so you have to implement it with playNote and stopNote props. This gives you the ability to use any sounds you'd like with the rendered piano. The react-piano demo page uses @danigb's excellent soundfont-player to play realistic-sounding soundfont samples. Take a look at the CodeSandbox demo to see how you can implement that yourself.

You can "record" notes that are played on a <Piano> by using onPlayNoteInput or onStopNoteInput, and you can then play back the recording by using activeNotes. See this CodeSandbox which demonstrates how to set that up.

You can customize many aspects of the piano using CSS. In javascript, you can override the base styles by creating your own set of overrides:

import 'react-piano/dist/styles.css';
import './customPianoStyles.css';  // import a set of overrides

In the CSS file you can do things like:

.ReactPiano__Key--active {
  background: #f00;  /* Change the default active key color to bright red */
}

.ReactPiano__Key--accidental {
  background: #000;  /* Change accidental keys to be completely black */
}

See styles.css for more detail on what styles can be customized.

See the CHANGELOG which contains migration guides for instructions on upgrading to each major version.

To support IE, you'll need to provide an Array.find polyfill.

MIT