Skip to Content
JavaScriptMusic NotationBasic Usage

Basic Usage

If you just need to render some abc music notation  on screen, this is the simplest approach.

Installation

pnpm add @music-ui/abc

Usage

The @music-ui/abc package exports an initABCScore function.

By default it selects all the [data-abc-score] elements, and expects them to have the following children:

  • an element containing the abc notation, with the .content class;
  • an element where the music notation will be rendered, with the .staff class.

For more granularity you can use the ABCScore class.

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

The .content element is hidden by default inside @music-ui/abc/styles.css.

Setup code:

import { initABCScore } from "@music-ui/abc";
import "@music-ui/abc/styles.css";
 
initABCScore();

Output:

You can pass a custom selector or collection of elements. In this example we’ll select all .score elements:

<div class="score">
  <div class="content">
    CDEF GABc|
  </div>
  <div class="staff"></div>
</div>
<div class="score">
  <div class="content">
    K:G
    GABc defg|
  </div>
  <div class="staff"></div>
</div>

Setup code:

import { initABCScore } from "@music-ui/abc";
import "@music-ui/abc/styles.css";
 
// via selector string
initABCScore({ selection: ".score"});
 
// via actual DOM selection
initABCScore({ selection: document.querySelectorAll('.score') });

Output:

Check the complete initABCScore API reference for more details.

Dataset options

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

<div
  data-abc-score
  data-show-tempo="false"
  data-show-time-signature="false"
>
  <div class="content">
    CDEF GABc|
  </div>
  <div class="staff"></div>
</div>

Setup code:

import { initABCScore } from "@music-ui/abc";
import "@music-ui/abc/styles.css";
 
initABCScore();

Output:

The following data attributes are supported:

AttributeTypeDescription
data-show-tempobooleanShows or hides the tempo indication
data-show-time-signaturebooleanShows or hides the time signature

Passing abc.js options

You can pass an abcOptions parameter, that will be forwarded to the abc.js renderer.

You can see the available options on the library documentation .

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

Setup code:

import { initABCScore } from "@music-ui/abc";
import "@music-ui/abc/styles.css";
 
initABCScore({
  abcOptions: foregroundColor: "orange"
});

Output:

The passed options will be shared across all selected elements.

If you need more control, you can call initABCScore multiple times with different selections and parameters or create your own widget with the various music-ui classes.

Last updated on
IndexUsage with Player