Options
Editor Parameters
check_box_outline_blank
Explanation of "Inline MIDI"
This creates an audio player in the element that is passed in. That control keeps up with changes to the textarea so the audio is always reflective of the user's input. If you use this, then you must use the "abcjs/midi" version of the library. There is also some CSS that is required. You can use the default in "abcjs-midi.css" or you can use your own.
check_box_outline_blank
Explanation of "Download MIDI"
This creates a link in the element that is passed in that allows the user to download a MIDI file that is generated from the ABC string in the textarea. If you use this, then you must use the "abcjs/midi" version of the library.
check_box_outline_blank
Explanation of "Show Warnings"
This will print all warnings from the parser in the element that is passed in. It is a good idea to supply this because this provides valuable feedback to the end user.
check_box_outline_blank
Explanation of "Callback On Change"
Pass a function in that will be called everytime the user types anything in the textarea. This is particularly useful for knowing when the user has unsaved changes. The parameter that is passed to this function is the instance of the editor. Note that there are many undocumented functions and variables in this -- use them with caution because they could change in a future version of abcjs. The one function that will not change is the isDirty() function. Note that isDirty() will always return false unless you also specify "Use Dirty Flag".
check_box_outline_blank
Explanation of "Use Dirty Flag"
Set this flag if you care about whether the user has changed the contents of the textarea. If you are creating an app that allows the user to create and save ABC strings, you can use this to prompt the user to save their changes. The class "abc_textarea_dirty" is put on the editor. Combined with the "Callback On Change" parameter, you have the tools to create a full editor.
Parser Parameters
check_box_outline_blank
Explanation of "Format For Printing"
Make the size of the SVG appropriate for a letter-sized area.
Engraver Parameters
Explanation of "Scale"
Sets the size of the music. Full size is "1". "2" is twice as large. "0.5" is half as large. Note that this doesn't change the staff width, so it will change the layout. If you just want to make the SVG bigger, use the css transform() functionality. Experiment with this in conjunction with "Staff Width".
Explanation of "Staff Width"
This is the width of the staff line in pixels. This is not the total width, because there are margins.
Explanation of "Padding Left"
The padding numbers are how much padding to put in the SVG around the edges. This differs from CSS padding because it is inside the SVG. Note that the right and bottom padding is ignored if the "Print" option is selected.
check_box_outline_blank
Explanation of "Responsive Sizing"
This changes the styles on both the encompassing element and the SVG element that causes the SVG to grow and shrink in response to changes of the width of the parent element.
check_box_outline_blank
Explanation of "Add Classes"
This adds many classes to the elements in the SVG. That allows the various parts of the music to be found and manipulated after being drawn.
check_box_outline_blank
Explanation of "User Click Listener"
This is a callback whenever the user clicks on an element of the SVG. The parameters passed are "abcElem" and "tuneNumber". The "abcElem" contains many properties that are useful for determining what was clicked on. Those properties are subject to change in a future version of abcjs, though, so use with caution. If there are multiple tunes in the source ABC string, then "tuneNumber" is the tune that was clicked on.
MIDI Parameters
See the audio page: all of the same parameters apply. Put the parameters in the property abcjsParams.
Commands
Explanation of "Set Not Dirty"
If the user saves their work, you can tell the textarea that there is no unsaved data. The class "abc_textarea_dirty" is removed from the textarea, and will not be put back on until the textarea changes. This only has an effect if the flag "indicate_changed" is set.
Explanation of "Set Read Only"
This sets the control to be read only and adds the class "abc_textarea_readonly".
Explanation of "Pause Drawing"
If the drawing is hogging the system's resources, you can call this to stop the instantaneous redrawing of the sheet music. If you call this a second time, the visual sheet music will catch up.
Explanation of "Pause MIDI"
If creating the audio is hogging the system's resources, you can call this to stop the instantaneous recreating of the audio. If you call this a second time, the audio will catch up.
Output
JavaScript