The `ABCSCore` class

If you need more control over the score rendering, you can use the underlying ABCSCore class.

Installation


pnpm add @music-ui/abc


npm install @music-ui/abc


yarn add @music-ui/abc

Usage

Here you find and overview of the class methods and some relative examples.

Check the complete ABCScore API reference for more details.

Constructor parameters

The ABCSCore constructor accepts the following parameters:

Property	Type	Default	Description
`element`	`string` \| `HTMLElement`	`[data-abc-score]`	The container element or a valid CSS selector
`content`	`string`	""	The abc notation to be rendered
`showCursor`	`boolean`	true	Shows or hides the position cursor
`showTempo`	`boolean`	true	Shows or hides the tempo
`showTimeSignature`	`boolean`	true	Shows or hides the time signature

You can use it like:


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

Setup code:


import { ABCScore } from "@music-ui/abc";
import "@music-ui/abc/styles.css";
 
const wrapper = document.querySelector("[data-abc-score]");
 
const score = new ABCScore({
  element: wrapper.querySelector(".staff"),
  content: wrapper.querySelector(".content").textContent.trim(),
  showTempo: false,
  abcOptions: {
    foregroundColor: "orange",
  },
});
 
// don't forget to render the score!
score.render();

Updating the score position

You can pass the new position to ABCScore.updatePosition to update the cursor and highlight the corresponding note.


import { ABCScore } from "@music-ui/abc";
import "@music-ui/abc/styles.css";
 
const wrapper = document.querySelector("[data-abc-score]");
 
const score = new ABCScore({
  element: wrapper.querySelector(".staff"),
  content: wrapper.querySelector(".content").textContent.trim(),
});
 
score.render();
score.updatePosition("0:1:0");

Highlight the current bar

You can pass a new position to ABCScore.highlightBar to highlight the corresponding bar:


import { ABCScore } from "@music-ui/abc";
import "@music-ui/abc/styles.css";
 
const wrapper = document.querySelector("[data-abc-score]");
 
const score = new ABCScore({
  element: wrapper.querySelector(".staff"),
  content: wrapper.querySelector(".content").textContent.trim(),
});
 
score.render();
score.highlightBar("0:1:0");

The ABCSCore class