Usage with Player

Here you can find the instructions to add playback support to your rendered abc music notation .

Installation


pnpm add @music-ui/core @music-ui/abc


npm install @music-ui/core @music-ui/abc


yarn add @music-ui/core @music-ui/abc

See the Player page to know about playback setup.

Usage

The @music-ui/abc exports an initABCScoreWithPlayer function.

It expects the same markup of initABCScore:


<div data-abc-score>
  <div class="content">
    CDEF GABc|
  </div>
  <div class="staff"></div>
  <div class="controls"></div>
</div>

In addition to the initABCScore parameters, it needs a Player instance in order to playback the score content:


import { initABCScoreWithPlayer } from "@music-ui/abc";
import { Player } from "@music-ui/player";
import "@music-ui/abc/styles.css";
 
const player = new Player();
 
initABCScoreWithPlayer({ player });

Output:

Like initABCScore, initABCScoreWithPlayer can deal with multiple scores at once:


<div data-abc-score>
  <div class="content">
    CDEF GABc|
  </div>
  <div class="staff"></div>
  <div class="controls"></div>
</div>
<div data-abc-score data-show-tempo="false">
  <div class="content">
    K: G
    GABc defg|
  </div>
  <div class="staff"></div>
  <div class="controls"></div>
</div>

Setup code:


import { initABCScoreWithPlayer } from "@music-ui/abc";
import { Player } from "@music-ui/player";
import "@music-ui/abc/styles.css";
 
const player = new Player
 
initABCScoreWithPlayer({ player });

Output:

Check initABCScore for a list of allowed dataset options.

Check the complete initABCScoreWithPlayer API reference for more details.