Understanding the abcjs configuration options

This app is a companion to abcjs. It is intended to help the programmer who plans to incorporate abcjs into their website understand the large number of options available.

All of the public entry points and parameters that abcjs provides are represented in one of the pages of this app.

There are different configuration options for the standard music engraver, the MIDI generator, and the interactive textarea version. In addition, there is some limited animation available that is not part of the audio playback. The sheet music is rendered as an SVG and is marked up with certain classes to give the programmer more control, after the music is generated, to manipulate it. There are also some convenience functions that break apart a multi-tune ABC string.

The examples depend on some input text in ABC format. You may enter the text you wish to test below, or just use the sample tunebook that is already entered.

Loading the Library

The library can be loaded in two ways: with npm package manager or by directly including a script in your file.

Package Manager (small, no MIDI)

npm install --save-dev abcjs import abcjs from 'abcjs';

Package Manager (with MIDI)

npm install --save-dev abcjs
npm install --save-dev font-awesome

import 'font-awesome/css/font-awesome.min.css';
import 'abcjs/abcjs-midi.css';
import abcjs from 'abcjs/midi';

Script Tag (small, no MIDI)

<script src="/abcjs_basic_-min.js" type="text/javascript"></script>

Script Tag (with MIDI)

<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="../abcjs-midi.css">
<script src="/abcjs_midi_-min.js" type="text/javascript"></script>

Version

The version of the loaded abcjs library can be obtained like this:

import abcjs from 'abcjs/midi';
console.log(abcjs.signature); // prints --> ""