ABCScoreWithPlayer

The <ABCScoreWithPlayer> React component renders ABC notation on screen with playback support.

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 score with the passed notes and the playback buttons:

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


import { playerFactory } from "@music-ui/core";
import { ABCScoreWithPlayer, PlayerProvider } from "@music-ui/react";
import "@music-ui/abc/styles.css";
 
const player = playerFactory();
 
function App() {
  return (
    <PlayerProvider player={player}>
      <main>
        <h1>My App</h1>
        {/* rest of your app */}
        <ABCScoreWithPlayer>
          CDEF GABc|
        </ABCScoreWithPlayer>
      </main>
    </PlayerProvider>
  );
}

Output:

Tempo120

With free tempo:


import { playerFactory } from "@music-ui/core";
import { ABCScoreWithPlayer, PlayerProvider } from "@music-ui/react";
import "@music-ui/abc/styles.css";
 
const player = playerFactory();
 
function App() {
  return (
    <PlayerProvider player={player}>
      <main>
        <h1>My App</h1>
        {/* rest of your app */}
        <ABCScoreWithPlayer>
          M: 1/1
          L: 1/1
          Q: 200
          C D E F G A B c || c d e f g a b c' |
        </ABCScoreWithPlayer>
      </main>
    </PlayerProvider>
  );
}

Tempo200

Component props

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

Name	Type	Default Value	Description
`showPiano`	`boolean`	`false`	Displays or hides the piano view
`pianoOptions`	`object`	`DEFAULT_PIANO_OPTIONS`	Props expected by the `Piano` renderer
`showTempoControls`	`boolean`	`true`	Displays or hides the tempo controls
`highlightBars`	`boolean`	`false`	Highlights the current played bar

Props showcase

A showcase of the component props:


import { playerFactory } from "@music-ui/core";
import { ABCScoreWithPlayer, PlayerProvider } from "@music-ui/react";
import "@music-ui/abc/styles.css";
import "@music-ui/piano/styles.css";
 
const player = playerFactory();
 
function App() {
  return (
    <PlayerProvider player={player}>
      <ABCScoreWithPlayer highlightBars>
        CDEF GABc|cBAGFEDC|
      </ABCScoreWithPlayer>
      <ABCScoreWithPlayer showTempoControls={false}>
        CDEF GABc|
      </ABCScoreWithPlayer>
      <ABCScoreWithPlayer showPiano pianoOptions={{ showOctaves: true, octaves: 3 }}>
        CDEF GABc|
      </ABCScoreWithPlayer>
    </PlayerProvider>
  );
}

`highlightBars`

Tempo120

`showTempoControls`

`showPiano`

Tempo180