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
`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 ChordWithPlayer component reference for more details.