ChordWithPlayer

The <ChordWithPlayer> React component adds playback functionality to the <Chord> 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 chord with the passed input 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 { ChordWithPlayer, PlayerProvider } from "@music-ui/react";
 
const player = playerFactory();
 
function App() {
  return (
    <PlayerProvider player={player}>
      <main>
        <h1>My App</h1>
        {/* rest of your app */}
        <ChordWithPlayer input="x32010" includeOpenStrings />
      </main>
    </PlayerProvider>
  );
}

You can read more about the input shorthand format here.

Output:

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


import { playerFactory } from "@music-ui/core";
import { ChordWithPlayer, PlayerProvider } from "@music-ui/react";
 
const player = playerFactory();
 
function App() {
  return (
    <PlayerProvider player={player}>
      <ChordWithPlayer input="x32010" textProperty="note" includeOpenStrings />
      <ChordWithPlayer
        input="133111"
        chordName="F minor"
        textProperty="note"
        barres="1"
      />
    </PlayerProvider>
  );
}

Component props

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

Name	Type	Default Value	Description
`playedNoteColor`	`string`	`#ff636c`	The played note color
`instrument`	`string`	`acoustic_guitar_nylon`	The playback instrument
`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 ChordWithPlayer 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 { ChordWithPlayer, PlayerProvider } from "@music-ui/react";
 
// you can use any icon source
import { IoPlay, IoMusicalNotes } from "react-icons/io5";
 
const player = playerFactory();
 
function App() {
  return (
    <PlayerProvider player={player}>
      <ChordWithPlayer
        input="x32010"
        includeOpenStrings
        playButtonContent={
          <>
            <IoPlay /> Play
          </>
        }
        arpeggioButtonContent={
          <>
            <IoMusicalNotes /> Arpeggio
          </>
        }
      />
    </PlayerProvider>
  );
}