PianoWithPlayer

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

Installation


pnpm add @music-ui/core @music-ui/react


npm install @music-ui/core @music-ui/react


yarn add @music-ui/core @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.
See the Player page to know about the setup.


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

Output:

You can render multiple pianos, each with independent playback feature:


import { playerFactory } from "@music-ui/core";
import { PianoWithPlayer, PlayerProvider } from "@music-ui/react";
import "@music-ui/piano/styles.css";
 
const player = playerFactory();
 
function App() {
  return (
    <PlayerProvider player={player}>
      <PianoWithPlayer
        notes="C4 E4 G4 B4"
        noteLabels="1 3 5 7"
        octaves={4}
        description="Cmaj7"
      />
      <PianoWithPlayer
        notes="D4 F4 A4 C5"
        noteLabels="1 3 5 7"
        octaves={4}
        description="Dm7"
      />
    </PlayerProvider>
  );
}

Cmaj7

Dm7

Component props

In addition to the Piano component props, the component accepts the following props:

Name	Type	Default Value	Description
`description`	`string`		A description label
`playLabel`	`string`	Play	The playback button label
`arpeggioLabel`	`string`	Arpeggio	The arpeggio playback button label
`arpeggioSpeed`	`number`	120	The arpeggio playback tempo

Check the complete PianoWithPlayer component reference for more details.