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`		The piano description
`playButtonContent`	`ReactNode`	Play	The playback button content
`arpeggioButtonContent`	`ReactNode`	Arpeggio	The arpeggio playback button content
`arpeggioSpeed`	`number`	120	The arpeggio playback tempo

Check the complete PianoWithPlayer component reference for more details.

Customize buttons

The buttons contain plain text labels by default. You can pass custom JSX as in the documentation examples:


import { playerFactory } from "@music-ui/core";
import { PianoWithPlayer, PlayerProvider } from "@music-ui/react";
import "@music-ui/piano/styles.css";
 
// you can use any icon source
import { IoPlay, IoMusicalNotes } from "react-icons/io5";
 
const player = playerFactory();
 
function App() {
  return (
    <PlayerProvider player={player}>
      <PianoWithPlayer
        playButtonContent={
          <>
            <IoPlay /> Play
          </>
        }
        arpeggioButtonContent={
          <>
            <IoMusicalNotes /> Arpeggio
          </>
        }
      />
    </PlayerProvider>
  );
}