abcjs

In the abcjs engraving model, musical notation is composed of two types of objects that work together:

• Absolute Element: A visual piece of music that moves as a single unit (e.g., a key signature containing multiple sharp symbols). It has an X and Y position in the SVG and contains an array of Relative Elements.
• Relative Element: Glyphs that are attached to an Absolute Element. They use relative positioning to stay attached to their parent (e.g., a trill, a flat sign, a stem, or a dot attached to a note head).

The abcjs engraver takes the output from the parser and processes it through three main stages to transform musical data into a visual, interactive SVG:

1. Element Creation: The parser's output structure is traversed to create musical elements.
2. Layout: The engine runs separate algorithms for horizontal and vertical positioning once element sizes are known.
3. Drawing: The engine traverses the structure one final time to render each element into the SVG based on the calculated layout.

Starting from version 6.0.0-beta.26, midi.js is no longer a direct dependency but a peerDependency. If you are using the old style of sound generation that requires midi.js, you must include it in your package.json:

"midi": "https://github.com/paulrosen/MIDI.js.git#abcjs"

Note: This requirement does not apply if you are using the minified version of the library via a <script> tag.

In version 6.6.0 and later, you can use the chordGrid option within the renderAbc parameters to display chords in a layout similar to traditional jazz lead sheets.

Available options:

• chordGrid: "noMusic": Displays only the chords.
• chordGrid: "withMusic": Prints the chords above the standard music notation.

abcjs uses a default soundfont for audio playback. If you need to use a specific soundfont (for example, to revert to the older FluidR3_GM style), use the soundFontUrl option when calling the synth functions.

To use the older soundfont, set: soundFontUrl: "https://paulrosen.github.io/midi-js-soundfonts/FluidR3_GM/"

You can run the abcjs application using Docker Compose. The setup builds the image from the local directory and maps the local source code and node_modules into the container to allow for development.

Note that the host port for the application is determined by the environment variable $abcjs_docs.

services:
  app:
    image: abcjs
    build: .
    container_name: abcjs
    volumes:
      - .:/srv/app
      - ./node_modules:/srv/app/node_modules
    ports:
      - $abcjs_docs:8080

If you are using abcjs-audio.css and want to hide the CSS warning element when styling the audio control with your own custom CSS, add the following rule:

.abcjs-css-warning {
	display: none;
}

Use the create function to convert an ABC tune object into MIDI data. This function processes the ABC notation, extracts metadata (title, key, meter), and translates musical events (notes, text, instrument programs) into a MIDI format.

Parameters

• abcTune: An object representing the ABC tune, which must implement methods like setUpAudio(options), getKeySignature(), getMeterFraction(), and millisecondsPerMeasure().
• options (optional): An object to configure the MIDI creation process.

Options

• options.pan: An array of panning values (integers) corresponding to each track in the ABC tune. If provided, options.pan[i] sets the pan for track i.

Return Value

Returns the raw MIDI data (typically a Uint8Array or similar buffer) generated from the tune.