PianoWithPlayer

The <PianoWithPlayer> component adds playback functionality to the <Piano> component.

Installation


pnpm add @music-ui/react


npm install @music-ui/react


yarn add @music-ui/react

Usage

The following code renders a piano with the passed notes and the playback buttons:

Wrap your app in a <PlayerProvider> if you want to use playback features.


import { PianoWithPlayer, PlayerProvider } from "@music-ui/react";
import "@music-ui/piano/styles.css";
 
function App() {
  return (
    <PlayerProvider>
      <main>
        <h1>My App</h1>
        {/* rest of your app */}
        <PianoWithPlayer notes="C4 E4 G4 B4" noteLabels="1 3 5 7" octaves={4} />
      </main>
    </PlayerProvider>
  );
}