Skip to Content
ReactMusic NotationABCScoreWithPlayer

ABCScoreWithPlayer

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

Installation

pnpm 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:

120

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>
  );
}
120

Component props

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

NameTypeDefault ValueDescription
showPianobooleanfalseDisplays or hides the piano view
pianoOptionsobjectDEFAULT_PIANO_OPTIONSProps expected by the Piano renderer
showTempoControlsbooleantrueDisplays or hides the tempo controls
highlightBarsbooleanfalseHighlights the current played bar
playButtonLabelstringPlayThe play button aria label
stopButtonLabelstringPauseThe stop button aria label
pauseButtonLabelstringStopThe pause button aria label
resetTempoButtonLabelstringReset TempoThe reset tempo button aria label
playButtonContentReactNodePlayThe play button content
stopButtonContentReactNodePauseThe stop button content
pauseButtonContentReactNodeStopThe pause button content
resetTempoButtonContentReactNodeResetThe reset tempo button content

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

120

showTempoControls

showPiano

120

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}>
      <ABCScoreWithPlayer
        playButtonContent={
          <>
            <IoPlay /> Play
          </>
        }
      >
        CDEF GABc|cBAGFEDC|
      </ABCScoreWithPlayer>
    </PlayerProvider>
  );
}
Last updated on
ABCScorePiano