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 abcjsimport abcjs from 'abcjs';
Package Manager (with MIDI)
npm install --save-dev abcjs npm install --save-dev font-awesomeimport '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>

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

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