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 the setup.

Usage

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

In addition of the markup expected by initABCScore, a .controls element is needed:


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

A Player instance is needed in order to playback the score content:


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

Output:

Tempo120

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 { playerFactory } from "@music-ui/core";
import { initABCScoreWithPlayer } from "@music-ui/abc";
import "@music-ui/abc/styles.css";
 
const player = playerFactory();
 
initABCScoreWithPlayer({ player });

Output:

Tempo120

Check the complete initABCScoreWithPlayer API reference for more details.

Dataset options

The initABCScoreWithPlayer function reads the parameters passed in the data attributes of the wrapper element:


<div
  data-abc-score
  data-show-tempo="false"
  data-highlight-bars
  data-show-piano
>
  <div class="content">
    L:1/4
    CDEF | GABc |
  </div>
  <div class="staff"></div>
  <div class="controls"></div>
</div>

Setup code:


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

Output:

Tempo120

The following data attributes are supported:

Attribute	Type	Default Value	Description
`data-show-tempo`	`boolean`	`true`	Shows the tempo indication
`data-show-time-signature`	`boolean`	`true`	Shows the time signature
`data-highlight-bars`	`boolean`	`false`	Highlights the current played bar
`data-show-piano`	`boolean`	`false`	Displays the played notes on a piano
`data-show-tempo-controls`	`boolean`	`false`	Shows the tempo controls