Options
General Params
Explanation of "Quarter Notes Per Minute"
This overrides a Q: line in the ABC string and sets the number of quarter notes per minute. This is always measured in quarter notes, even in time signatures like 6/8.
Explanation of "Instrument number (program)"
This is the standard MIDI program number (i.e. 0=grand piano, etc.). This may be overridden in the ABC string if there are %%MIDI commands.
Explanation of "Half-steps to transpose"
The number of half-steps to transpose. This can be a positive or negative number.
Explanation of "Index of the Tune"
If there are multiple tunes in the input string, then this chooses which tune to display. For control over what is displayed, use with the "Number of Tunes" parameter. This is zero-based. If this is greater than the number of tunes in the input string, then nothing is displayed.
Explanation of "Sound Font Location"
This is the public URL for the sound font files. By default, the sound fonts are here: https://gleitz.github.io/midi-js-soundfonts/FluidR3_GM/ and you probably won't need to modify this, but if you want to host them on your own server, or you want different sounding instruments, you can override it here.
Important!
This is only used before the first call to the audio is made, so set this before you start playing a tune!
Important!
This is only used before the first call to the audio is made, so set this before you start playing a tune!
Download Params
check_box_outline_blank
Explanation of "Downloadable MIDI?"
Do you want to generate a MIDI file? The user can click on a generated link to download that file.
Explanation of "Download Link Label (%T=title)"
If the download option is chosen, this specifies The text in the link. You may use the special pattern "%T" to indicate that the title of the piece should be used.
Explanation of "Pre-Download Text"
This is to specify some optional text just before the download link.
Explanation of "Post-Download Text"
This is to specify some optional text just after the download link.
Explanation of "Download Class"
This adds the specified classes to the download link. (To see a visual change in this demo, use the class "colorful").
Inline Params
check_box_outline_blank
Explanation of "Large Audio Control?"
Double the size of the audio control so that it is easier to use on a touch device.
check_box_outline_blank
Explanation of "Inline MIDI?"
Do you want to create an audio control so the user can interact with the audio in a familiar way? (Note that if you want to programmatically interact with the audio but not let the user have control, you should choose this option, but then hide the generated control.) The control has the class "abcjs-inline-midi".
check_box_outline_blank
Explanation of "Show Loop Toggle?"
Should the audio control contain a "loop" icon? This is a toggle. When set by the user, the audio will play repeatedly.
check_box_outline_blank
Explanation of "Standard Controls?"
Should the audio control contain the "restart", "start/pause", "progress", and "clock" elements? See the audio control on this page to see how they work.
check_box_outline_blank
Explanation of "Tempo Control?"
Should the audio control contain an element that allows the user to change the speed of the playback?
check_box_outline_blank
Explanation of "Hide?"
Should the audio control be hidden from the page? It can still be interacted with programmatically with the abcjs.midi.startPlaying() and abcjs.midi.stopPlaying() functions.
check_box_outline_blank
Explanation of "Auto Play?"
Should the music auto play as soon as it is ready? Combining this with "hide" and "animate" is a nice effect.
check_box_outline_blank
Explanation of "No Melody?"
When playing audio, play the metronome track and the accompaniment track, but don't play the melody. The animation over the melody line works normally. This is useful to create a "music-minus-one" effect.
check_box_outline_blank
Explanation of "No Chords?"
When playing audio, do not play the chords track.
Explanation of "Pre-Inline Text (%T=title)"
This is to specify some optional text on the left side of the audio control. You may use the special pattern "%T" to indicate that the title of the piece should be used.
Explanation of "Post-Inline Text (%T=title)"
This is to specify some optional text on the right side of the audio control. You may use the special pattern "%T" to indicate that the title of the piece should be used.
Explanation of "Loop Tooltip"
This is the title, or tooltip, that appears over the loop icon when it is hovered with the mouse.
Explanation of "Reset Tooltip"
This is the title, or tooltip, that appears over the reset icon when it is hovered with the mouse.
Explanation of "Play Tooltip"
This is the title, or tooltip, that appears over the play/pause icon when it is hovered with the mouse.
Explanation of "Progress Tooltip"
This is the title, or tooltip, that appears over the sliding bar when it is hovered with the mouse.
Explanation of "Tempo Tooltip"
This is the title, or tooltip, that appears over the tempo widget icon when it is hovered with the mouse.
Callback Params
check_box_outline_blank
Explanation of "Listener?"
Pass a callback function here to receive a notification at regular intervals when time has passed. (That is, whether a note has started or stopped.) The function receives three parameters: the audio control element, a status object containing the fields: { currentTime, duration, newBeat, progress }, and whatever value is in the "context" parameter. The purpose of the "context" is to differentiate between multiple audio controls on a page. WARNING: Do not do any long processing in this function. It needs to return before the next MIDI event happens.
check_box_outline_blank
Explanation of "Animate?"
Pass a callback function here to receive a notification whenever a MIDI event has passed. (That is, whether a note has started or stopped.) The function receives three parameters: lastRange, currentRange, and whatever value is in the "context" parameter. The purpose of the "context" is to differentiate between multiple audio controls on a page. The ranges are arrays of elements that can be manipulated however you like. WARNING: Do not do any long processing in this function. It needs to return before the next MIDI event happens. The following is an example where the currently played notes are colored blue:
colorRange(range, color) {
if (range && range.elements) {
range.elements.forEach(function (set) {
set.forEach(function (item) {
item.attr({fill: color});
});
});
}
},
animateCallback(lastRange, currentRange, context) {
this.colorRange(lastRange, "#000000");
this.colorRange(currentRange, "#3D9AFC");
},
colorRange(range, color) {
if (range && range.elements) {
range.elements.forEach(function (set) {
set.forEach(function (item) {
item.attr({fill: color});
});
});
}
},
animateCallback(lastRange, currentRange, context) {
this.colorRange(lastRange, "#000000");
this.colorRange(currentRange, "#3D9AFC");
},
Explanation of "Callback Context"
This is an arbitrary variable that is passed back in the callback functions. This can be anything and is useful if you have more than one audio control on the page.
Metronome Params
Explanation of "Drum String"
This is the drum pattern as specified in the ABC standard. See that documentation for complete details.
The following table shows some reasonable values for different time signatures.
The following table shows some reasonable values for different time signatures.
| Time Sig | Drum String | Num Bars | Bars of Intro |
|---|---|---|---|
| 2/4 | dd 76 77 60 30 | 1 | 2 |
| 3/4 | ddd 76 77 77 60 30 30 | 1 | 1 |
| 4/4 | dddd 76 77 77 77 60 30 30 30 | 1 | 1 |
| 5/4 | ddddd 76 77 77 76 77 60 30 30 60 30 | 1 | 1 |
| Cut Time | dd 76 77 60 30 | 1 | 2 |
| 6/8 | dd 76 77 60 30 | 1 | 2 |
| 9/8 | ddd 76 77 77 60 30 30 | 1 | 1 |
| 9/8 | dddd 76 77 77 77 60 30 30 30 | 1 | 1 |
| 4/4 | d2dd2ddz 76 77 76 77 77 60 30 60 30 30 | 2 | 4 |
Explanation of "Number of Bars"
This is how many bars the specified drum pattern is defined for.
Explanation of "Number Of Intro Bars"
This plays a number of measures of the drum pattern before the music starts.
Commands
Explanation of "Play/Pause"
This has the same effect as clicking the play button on the audio control. If you wish to supply your own mechanism for playing audio, then you can hide the standard audio control, and start the playback with this.
Explanation of "Stop"
This has the same effect as clicking stop button on the audio control. If you wish to supply your own mechanism for playing audio, then you can hide the standard audio control, and start the playback with this.
Explanation of "Restart"
This has the same effect as clicking the restart button on the audio control. If you wish to supply your own mechanism for playing audio, then you can hide the standard audio control, and restart the playback with this.
Explanation of "Loop"
This has the same effect as clicking the loop button on the audio control. If you wish to supply your own mechanism for playing audio, then you can hide the standard audio control, and change the loop with this. (This requires that "Show Loop Toggle" is checked.)
Explanation of "Random"
Move the progress to whatever percent complete you want.
Output
JavaScript
import 'font-awesome/css/font-awesome.min.css';
import 'abcjs/abcjs-midi.css';
import abcjs from 'abcjs/midi;