ABCScoreWithPlayer

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

Installation


pnpm add @music-ui/react


npm install @music-ui/react


yarn add @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 { ABCScoreWithPlayer, PlayerProvider } from "@music-ui/react";
 
function App() {
  return (
    <PlayerProvider>
      <main>
        <h1>My App</h1>
        {/* rest of your app */}
        <ABCScoreWithPlayer>
          CDEF GABc|
        </ABCScoreWithPlayer>
      </main>
    </PlayerProvider>
  );
}

Without time signature:

With free tempo:

With piano below too!