Upload 337 files

.babelrc

@@ -0,0 +1,5 @@
+{
+  "presets": [
+	"@babel/preset-env"
+  ]
+}

.gitignore

@@ -0,0 +1,11 @@
+.idea/*
+tmp/*
+/node_modules
+/coverage
+to-*.sh
+docs/.vuepress/.cache/*
+docs/.vuepress/.temp/*
+docs/.vuepress/.dist/*
+dist/report.html
+.eslintrc.json
+.DS_Store

.gitmodules

@@ -0,0 +1,3 @@
+[submodule "docs/.vuepress/dist"]
+  path = docs/.vuepress/dist
+  url = https://github.com/paulrosen/abcjs.git

.npmignore

@@ -0,0 +1,20 @@
+.idea/
+dist/*.html
+build-utils/
+docs/
+examples/
+font_generator/
+tests/
+tmp/
+
+.babelrc
+.eslintrc
+.gitmodules
+deploy-docs.sh
+docker-start.sh
+docker-build.sh
+docker-compose.yml
+Dockerfile
+start-version.sh
+webpack.config.js
+to-*.sh

CODE_OF_CONDUCT.md

@@ -0,0 +1,76 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+ advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at blog@paulrosen.net. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq

CONTRIBUTING.md

@@ -0,0 +1 @@
+Information about contributions to abcjs is available here: [Developers](https://paulrosen.github.io/abcjs/developers/pull-requests.html)

Dockerfile

@@ -0,0 +1,9 @@
+FROM node:20.14.0
+
+RUN npm install -g npm@8.19.2
+
+RUN mkdir /srv/app && chown node:node /srv/app
+
+# USER node
+
+WORKDIR /srv/app

LICENSE.md

@@ -0,0 +1,21 @@
+Copyright (c) 2009-2024 Paul Rosen and Gregory Dyke
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+**This text is from: http://opensource.org/licenses/MIT**

README0.md

@@ -0,0 +1,127 @@
+![abcjs](https://paulrosen.github.io/abcjs/img/abcjs_comp_extended_08.svg)
+
+# Javascript library for rendering standard music notation in a browser.
+
+This library makes it easy to incorporate **sheet music** into your **websites**. You can also turn visible **ABC** text into sheet music on websites that you don't own using a greasemonkey script, or change your own website that contains ABC text with no other changes than the addition of one javascript file. You can also generate **MIDI files** or play them directly in your browser.
+
+[List of Examples](https://cdn.rawgit.com/paulrosen/abcjs/main/examples/toc.html)
+
+Full documentation is here: [abcjs documentation](https://paulrosen.github.io/abcjs/)
+
+There is an organization that has a collection of useful projects related to abcjs called [abcjs-music](https://github.com/abcjs-music). See some examples there. If you have a project that you think would be of general interest and would like to add it to that organization, contact me.
+
+## Announcement: version 6.4.0
+
+The method for creating chord accompaniment has changed. Hopefully there aren't any regressions but if you have an example that doesn't match what it used to be, please open an issue.
+
+## Announcement: version 6.3.0
+
+Most users won't see any difference, but there was some changes to the underlying SVG structure for the top (the title, etc.) and bottom (the notes, etc.) text, so if your code depends on particular classes then this might be a breaking change. Hopefully the new structure will be clearer and will allow css to target particular parts easier.
+
+## Announcement: version 6.2.2
+
+There was a major bug in Firefox 112 that causes some lines to disappear. That is supposed to be fixed in Firefox 113 but in the meantime this update will take care of the problem.
+## Announcement: version 6.1.2
+
+There is a little difference in the generated SVG: Now each line is surrounded with a `<g>` element. This probably won't affect your program unless you are doing very specific manipulation of the SVG.
+
+## Announcement: version 6.1.0
+
+There is a brand new transposing feature. This allows you to input an ABC string and get a new ABC back in a different key. See the documentation for details. I'm sure there are ways to expand this - let me know if your use case is missing.
+
+## Announcement: version 6.0.0
+
+After way too long, abcjs 6.0.0 is now out of beta. 
+
+There are only a few bug fixes since the last beta.
+
+The current plan is to continue doing bug fixes and minor features to the 6.x.x branch, but version 7 is already in planning.
+
+There are some minor features that will still be added to the version 6 branch, along with fixing transposition.
+
+## Informal roadmap for version 7.0.0
+
+There will be some architecture changes which will go in a 7.0.0 release:
+
+* Improve the API for controlling the synth. That is, make the parameters less confusing.
+* Create a plugin architecture so that large features that are not widely used can be added without bloating this library.
+* Change the build to use typescript while still maintaining legacy browser capability.
+* Reduce the size of the library by optimizing code.
+* Control the spacing of the elements on the line better: support equal size measures, and support allowing control of the spacing between notes.
+* Improved documentation, particularly for synth.
+* Bug fixes.
+
+I anticipate that for a user that wants the most common functionality, the size of the library might be cut in half.
+
+Thanks, Paul
+
+
+## Major New Feature! 6.0.0-beta.36
+
+String tablature is now available by adding an option to the `renderAbc` parameters. See [tablature documentation](https://paulrosen.github.io/abcjs/visual/tablature.html)
+
+## Fix to audio in octave clefs 6.0.0-beta.31
+
+If you are using an octave clef (for instance `K:C clef=treble-8`) it will now sound an octave different. The octave calculation was happening twice.
+
+## Last version supporting midi.js is 6.0.0-beta.28
+
+The file [abcjs version supporting midi.js](https://github.com/paulrosen/historical-abcjs-versions/blob/main/version-6/abcjs_midi-min.js) is the last version of the old style of sound production that will receive updates.
+
+## Rename the default branch to `main`
+
+The default branch is now named `main`. If you have cloned this repo previously, you can change it with:
+```shell
+git branch -m master main
+git fetch origin
+git branch -u origin/main main
+```
+
+## New css for audio control 6.0.0-beta.27
+
+Be sure to download the latest abcjs-audio.css file if you are using it. If you are styling the audio control with your own css, add the rule:
+```css
+.abcjs-css-warning {
+	display: none;
+}
+```
+
+## Historical abcjs Packages 6.0.0-beta.27
+
+Old versions of abcjs have been removed from this repo. If you are looking for them, you can find them here: [Historical Versions](https://github.com/paulrosen/historical-abcjs-versions)
+
+## Breaking change when using midi.js for 6.0.0-beta.26
+
+The midi.js package is no longer a direct dependency, it is now a peerDependency so it is not included by default. That way, users who aren't using the old style of sound generation won't need to load the package. If you are using the old style that uses midi.js, include this line in your `package.json` file:
+
+```
+"midi": "https://github.com/paulrosen/MIDI.js.git#abcjs"
+```
+Note that if you are using the minified version of the library with a `<script>` tag this does not apply to you.
+
+## Change in wrapping behavior for 6.0.0-beta.25
+
+There have been some tweaks to the way wrapping is calculated. Hopefully this will make your music layout a little better. If you start seeing odd results, let me know.
+
+## Change in output folders for 6.0.0-beta.25
+
+The files in `/bin` are being phased out. You can get the executables from `/dist` and the file names will not have the version number attached.
+
+Many of the old versions that were in `/bin` are no longer kept in the active branches. If you need a particular old version then you can go to the branch with that tag to get it. 
+
+The last version in each major version number is still available in the active branch as well as many recent versions.
+
+## Default soundfont change for 6.0.0-beta.21
+
+In this beta the default soundfont was changed to https://paulrosen.github.io/midi-js-soundfonts/abcjs/ Hopefully you will find that sounds better. If you set the soundfont directly then you won't notice any change. If you prefer the old soundfont, use the `soundFontUrl: "https://paulrosen.github.io/midi-js-soundfonts/FluidR3_GM/"` option when calling the synth functions.
+
+## Issues
+
+Thanks so much for the bug reports and feature requests that are pouring into the issues. I appreciate you taking the time to help improve abcjs. This is not a full time project, though, so I can't promise a quick turn around on the issues. I am going to attempt to be caught up on responding once a week at least.
+
+And I would love some help on this project, including documentation, bug fixes, testing, refactoring, modernizing tools, and adding features. If you are so inclined, please get in touch.
+
+## Supported by BrowserStack
+If you aren't using the same browser and machine that I use, you can thank [BrowserStack](https://browserstack.com/) for their support of this open-source project.
+
+![BrowserStack](https://paulrosen.github.io/abcjs/img/browserstack-logo-600x315.png)

RELEASE.md

@@ -0,0 +1,2770 @@
+# Version 6.4.4
+
+## Bugs
+
+* Fix measure numbering when there are multi-measure rests.
+
+* Fix crash when subtitle is right before setting the bar number.
+
+* Don't allow the measure number to overlap the treble clef.
+
+* Improved trill, mordent, and turn playback rendering.
+
+* Increased measure number offset for wide measure numbers and treble clef.
+
+* Not adding the top position if putting a measure number on the clef.
+
+# Version 6.4.3
+
+## Bugs
+
+* If there is a slur or tie on the top or bottom of a line, make sure there is room for it.
+
+* Fix for crash on malformed @ positioned annotations
+
+* Fix call of getBpm() to use the specified tempo if it isn't supplied.
+
+* Bring bass note in range if transposed out-of-range by a visual transpose
+
+# Version 6.4.2
+
+## Bugs
+
+* Fix crash when there is a decoration on an invisible rest
+
+* Fix crash when the same voice is set on a line
+
+* Fix crash with rests in graces
+
+* Fix crash with decoration on invisible rests
+
+* Fix various crashes when declaring voices inline or after a line continuation
+
+* Fix for */8 rhythm tempos for MIDI export
+
+* Allow a midi volume of zero to mute a voice
+
+* Fix bug in selecting the correct note for chord arpeggios
+
+* Fix stemless chord parsing i.e. `[AB]0`
+
+* Don't put lower decorations too low on beamed notes that are beamed up
+
+## Features
+
+* add power chords
+
+* add patterns for 5/8, 7/8, 10/8 and 11/8
+
+* Add octave= parameter to bassprog and chordprog
+
+* allow an empty gchord to cancel a previously set gchord
+
+# Version 6.4.1
+
+## Bugs
+
+* fix regression when playing a specified sequence instead of using visualObj
+
+* don't inject a bass note when chords change mid-measure if the pattern doesn't start on a bass note.
+
+# Version 6.4.0
+
+## Features
+
+* Support custom rhythm patterns in gChords
+
+* Add swing to the playback
+
+* Allow swing, bassprog, bassvol, chordprog, chordvol, and gchord to be set in the options, and also on the fly.
+
+* Add findSelectableElement and getSelectableArray functions to help with hover.
+
+* Add `drumOff` to the parameters so that the metronome can only be for the prep beats
+
+* Allow an element to be passed into to the EditArea object in addition to an ID
+
+* Add left alignment option ot time-based-layout
+
+* Add timeBasedLayout parameter
+
+* Add "stafftopmargin" directive
+
+* Add tuneMetrics function
+
+## Bugs
+
+* Fix linespacing when using both oneSvgPerLine and scale
+    
+* fix placement of inverted fermata
+
+* Fix end points of slurs when there are beams involved
+
+* Fix bug with cursor not following a tie across a line break.
+
+* Improve spacing on time-based layout when left aligned
+
+* fix line distance when scaling
+
+* fix abcjs-staff class appearing in two places
+
+* fix bug in gchord sound when bass and chord programs are different
+
+* Many small fixes to types
+
+# Version 6.3.0
+
+## Features
+
+### Tablature
+* Add tab feature `hideTabSymbol`
+* Add 5-string tab named "fiveString"
+
+### Synth
+* change the default synth control options for "play" and "progress" to be true
+* expose the MIDI creator function
+
+### Rich Text
+* allow up to 9 custom fonts in `%%setfont`
+* for rich text fields, escape two dollar signs 
+* allow rich text in all non-music fields 
+* give all non-music fields a unique class
+
+### Miscellaneous
+* add abcjs-notehead class to note heads; 
+* add `accentAbove` parameter
+* handle numbered tune names in the reverser
+* support reversing tune names with ", a" and ", an", with a variable amount of whitespace and case-insensitive
+
+## Bugs
+* fix placement of tab staff when there is no label
+* fix font placement bugs
+* remove spurious quotes in font name in svg attribute
+* Fix the name of the `abcjs-tab-number` class
+* Fix tab staff height when there is a label
+* Fix for crash when rendering multiple tab staves
+* Offset breath mark to the right
+* Center text when using `expandToWidest` set true
+
+## Documentation
+* add missing typescript types
+* fix synth control types
+* fixed some typescript types in the TimingCallbacks
+
+# Version 6.2.3
+
+## Features
+
+* Add expandToWidest option
+
+* Added synonyms for glissando: ~( and ~)
+
+* allow passing in soundfont and debug callback when playing an event directly.
+
+* Add a `getIsRunning()` function to enable play/pause
+
+## Bugs
+
+* fix placement of triangle notehead
+
+* Guard against crash when the synth note wasn't loaded.
+
+* fix crash when skipping a staff when creating tablature
+
+* protect against spurious mouse click in selection
+
+* Add paddingleft to the size of the SVG - it was cut off if the padding was larger than the default.
+
+* various typescript fixes
+
+* `afterParsing` now works with line wrapping.
+
+* Put start and end char on slurs so they can be selected.
+
+* fixed type of timing callback: TimingEvent is now NoteTimingEvent
+
+## Documentation
+
+* Add tablature to typescript types
+
+* add missing items to documentation
+
+# Version 6.2.2
+
+## Features
+
+* Make "mandolin" and "fiddle" synonyms for "violin" in tablature.
+
+## Bugs
+
+* Don't draw staff line for tabs twice if there are two voices on it.
+
+* make the staff line the correct width in Firefox.
+
+* Fix bug in Firefox that causes staff lines, bar lines, and stems to be missing.
+
+* Fix bug in Firefox that cuts off the last line of the SVG.
+
+# Version 6.2.1
+
+## Bugs
+
+* don't crash if "capo" is passed in to tablature as a string
+
+* fix possible crash if setTiming is called before engraving
+
+* Fix bug in Firefox 112 that causes lines to be missing.
+
+* Add more debug messages when creating synth
+
+* Fix type of prime return
+
+* Protect against crash when selecting an element if the element selected is somehow outside of the music svg.
+
+# Version 6.2.0
+
+## Features
+
+* implement %%MIDI bassprog, bassvol, chordprog, chordvol
+
+* Add support for `[r: ... ]` remark
+
+* add support for %%voicecolor
+
+* add germanAlphabet option: display chords using German music alphabet
+
+* add lineThickness option: allow tweaking of the size of the lines
+
+* add a public access to the audio buffer through CreateSynth.getAudioBuffer() so that it can be processed outside of abcjs
+
+## Bugs
+
+* fix placement of ties when they extend to a new line
+
+* fix crash with tablature and showDebug are used at the same time.
+
+* fix bug in getting the location of the beat from TimingCallbacks when there are prep beats.
+
+* Change D.C. and D.S. decorations to be right aligned
+
+* fix metronome with changing meter
+
+* don't indent unaligned words
+
+* fix handling of accidentals in tablature
+
+## Documentation
+
+* Improved the typescript types somewhat.
+
+## Refactoring
+
+* Changed the names and moved a number of files in the engraver in anticipation of further refactoring.
+
+* Did some simplification in tablatures.
+
+# Version 6.1.9
+
+## Features
+
+* Add decorations for !D.C.alcoda!, !D.C.alfine!, !D.S.alcoda! and !D.S.alfine!
+
+## Bugs
+
+* keep transposing from crashing when K:none.
+
+* mark the touch events as passive to prevent jank.
+
+* fix crash when the M: line is missing and drum intro is used.
+
+* fix midi output when using percussion voice.
+
+## Documentation
+
+* Improved the typescript types somewhat.
+
+* Upgrade VuePress.
+
+* Fix link for new synth in the docs.
+
+# Version 6.1.8
+
+## Features
+
+* Implement 'octave' modifier for K: and V: fields.
+
+## Bugs
+
+* Handle accidentals in a measure in tablature.
+
+* Fix accidental handling in tablature when there is a key signature.
+
+* Add a little padding when tablature doesn't have a label.
+
+* Fix the css styles applied to tablature.
+
+* Allow percmap to use higher octave pitches.
+
+* Fix cursor movement when playing synth and tablature is visible.
+
+## Documentation
+
+* Add example of getting lyrics out of a tune.
+
+# Version 6.1.7
+
+## Bugs
+
+* don't draw measure numbers before the beginning of the line.
+
+* guard against crash on touch selection
+
+## Testing
+
+* open the browser and run the test-server in parallel
+
+* add a minimal server for serving test pages
+## Documentation
+
+* Add example of getting lyrics out of a tune
+
+# Version 6.1.6
+
+## Bugs
+
+* Fix error when selecting notes
+
+# Version 6.1.5
+
+## Bugs
+
+* Fix error when selecting notes
+
+# Version 6.1.4
+
+## Bugs
+
+* Fix error when selecting notes
+
+# Version 6.1.3
+
+## Bugs
+
+* fix placement of tablature staff when there is extra space used above the staff.
+
+* Fix regression crash when using 'y' spacer
+
+# Version 6.1.2
+
+## Bugs
+
+* fix combining oneSvgPerLine with responsive: "resize"
+
+* fix drawing audio controls when the outer stylesheet changes the button's lineHeight
+# Version 6.1.1
+
+## Bugs
+
+* rewrite oneSvgPerLine; fixes selection and keeping multiline items (like slurs) correctly.
+
+## Features
+
+* added mobile browser TouchEvent support for dragging
+
+## Documentation
+
+* fixed some typescript definitions
+
+# Version 6.1.0
+
+## Bugs
+
+* Fix some bugs in startChar; endChar
+
+## Features
+
+* Add transposing feature
+
+## Documentation
+
+* Document transposing feature
+* Clarify the way testing works
+* Add tablature tests to "all"
+
+# Version 6.0.4
+
+## Bugs
+
+* Fix position of staccato when a note is beamed and its stem is backwards.
+* Write annotations above bar lines.
+* fix placement of rhythm indicator (the R: field) on treble clef when there is nothing else above the staff.
+* fix some broken tests; add test for staccato bug and rhythm word placement.
+* fixed some Typescript warnings and errors
+
+## Features
+
+* Recognize backslash to escape lyrics.
+* Add glissando
+* pass back the start and end char positions with the audio callbacks.
+
+## Documentation
+
+* Add example of adding note names to a tune automatically.
+* Add a mention for the VSCode extension.
+* Add tune book example.
+
+# Version 6.0.3
+
+## Bugs
+
+* Fix unhandled rejection if there is a problem with an input note when creating notes.
+
+* put the height of ties/slurs in the line height calculation
+
+* Measurements that used "px" were reporting a warning.
+
+* Fix bass note in jazz chord when it contains a sharp or flat
+
+## Features
+
+* Quotation mark in a chord can be escaped.
+
+## Documentation
+
+* Add example of reusing created synth buffers.
+
+* Fix example in docs on creating a drum rhythm
+
+# Version 6.0.2
+
+## Bugs
+
+* Fix paper size so that the bottom of a narrow staff is not cut off.
+
+* Fix example generator for synth
+
+* Fix tablature parameter name and tuning examples
+
+* Fix tablature default tuning for guitar (move A down octave)
+
+# Version 6.0.1
+
+## Bugs
+
+* Make the printable example long enough to be on two pages.
+
+* Fix paper size so that the bottom of a narrow staff is not cut off.
+
+* Add a little padding to stems so they aren't cut off.
+
+# Version 6.0.0
+
+## Bugs
+
+* Fix the bar number display when wrapping.
+
+* Don't add extra padding when creating minimal music (like one note)
+
+* Fix selection data for unaligned words
+
+* Pass back actual selectable element when one of its children is clicked.
+
+* Don't put extra classes and data- attributes on compound symbols (like "12/8")
+
+* Fix spacing for triplet number
+
+* Don't add extra space at the bottom if there is no bottom text.
+
+* Allow aria-label to not be set.
+
+* Fix adding class names to dynamics and some other elements.
+
+* Fix regression where the left line of multi-staff music was misplaced if the bottom line is for percussion.
+
+* gracenotes now are processed through %%percmap
+
+# Version 6.0.0-beta.39
+
+## Bugs
+
+* Add some info to the return of the prime() method
+
+* Fix iOS not playing because audioContext doesn't stay running
+
+# Version 6.0.0-beta.38
+
+## Bugs
+
+* Regression: Fix return of CreateSynth.init
+
+* Don't do audio on tablature lines.
+
+* Wait until all notes are loaded before continuing to build audio buffer. (Caused the beginning of the buffer to possibly be arpeggiated if there is a race condition.)
+
+* Don't crash when there is a blank staff on the second line.
+
+* The pan option now works if the actual number of tracks doesn't match the panned tracks.
+
+* Don't add chord track if it is empty.
+
+## Documentation
+
+* Get more detailed with the typescript declarations
+
+# Version 6.0.0-beta.37
+
+* Keep the correct line count when generating one svg per line. (Fixes analysis of the tune for playback and timing)
+
+## Features
+
+* Change the default soundfont to the improved Fluid one; add the anticipations on the abcjs soundfont.
+
+# Version 6.0.0-beta.36
+
+## Bugs
+
+* Fix some typescript definitions.
+
+* When stopping synth, return the position that it stopped at.
+
+* Implement a fix for race conditions during note loading
+
+* Don't call debugger when setting an annotation on an invisible note.
+
+* Put try/catch in editor when creating music so there isn't an unhandled exception if there is an abcjs bug.
+
+* Don't crash when creating audio and there is a suppressed blank line
+
+* When suppressing blank lines, consider a line with only chords as not blank.
+
+* Don't add too much spacing on chord symbols when placing them.
+
+* Don't lose element's scrolling position when rendering music.
+
+* Fix crash when creating timing array and there is a suppressed line because it is empty.
+
+* Allow soundFontVolumeMultiplier to be set to zero.
+
+## Features
+
+* Add string tablature
+
+* Implement %%jazzchord directive
+
+## Documentation
+
+* Add example page using multiple synths with program switcher
+
+* Add jazzchords to example generator
+
+# Version 6.0.0-beta.35
+
+## Bugs
+
+* Fix regression on creating oneSvgPerLine
+   
+* Fix notes that are one step apart from colliding.
+   
+* Fix crash on bad notelength
+   
+* Fix note durations in triplets where p != r
+   
+* Don't crash if a browser doesn't contain AudioContext
+   
+* Don't swallow warning after wrapping.
+   
+* Fix some regressions with placing and styling text.
+   
+* Fix font on relatively positioned annotations.
+   
+* Protect the editor from crashing when synth is attempted and the browser doesn't support AudioContext.
+
+## Features
+
+* Create parameter `jazzchords`
+
+* Add many types to the typescript definitions.
+
+* Add `units` to TimingCallback.start
+
+* Add staccato to midi creation.
+
+* Add classes to dynamics elements.
+
+* Add more info to the click handler
+
+* Limit the size of the warning message if there is a long string.
+
+* Add initialClef option
+ 
+* Keep and pass back current time from the timer callbacks.
+
+## Documentation
+
+* Fix path for favicon in docs
+   
+* Tweak to printing example
+   
+* Move examples to github pages.
+   
+* Add MIDI download example.
+   
+* Fixes to doc building from the vuepress upgrade.
+   
+* Add mention of a CDN to load library from.
+   
+* Add a couple of errors to analysis demo to show the warning data.
+   
+* Option to only render the clef on the first line. 
+
+# Version 6.0.0-beta.33
+
+## Bugs
+
+* Fix crash when there is a missing close bracket on an inline command.
+
+* Fix the startChar position of chords
+
+* Fix overriding the tempo.
+
+* Fix passing qpm in.
+
+* Fix stem direction bug on wrap.
+
+* Fix bug in calculating the endpoint of the audio when there are multiple voices.
+
+## Features
+
+* Add getBarLength() and getTotalTime() to the tune object; 
+
+* Add second parameter to seek() for the units percent, seconds, and beats.
+
+* Add `detuneOctave` parameter
+
+## Documentation
+
+* Example of controlling the tempo.
+
+## Build
+
+* Remove bin folder
+
+# Version 6.0.0-beta.32
+
+## Bugs
+
+* Some fixes to startChar and endChar when there are line continuations
+
+* Error messages now report the absolute line in the file that the error occurs, not the offset from the first music line.
+
+* Fix bug where multiple text lines would duplicate text.
+
+* `a b !+!c` removing the end `!` from the `!+!` will cause the decoration to bleed to the first element in the line.
+
+* Fix audio control buttons on Safari
+
+* Make creating audio more efficient. (was creating buffer twice as long as needed.)
+
+* Fix click-a-note-to-play-it to handle microtones.
+
+* Get rid of audio warning when key changes.
+
+* Fix Safari not making sound when first using playEvent.
+
+* Fix crash when wrapping when using oneSvgPerLine.
+
+## Features
+
+* Change the pitch change variable from "warp" to "cents".
+
+* support microtones in midi output.
+
+## Refactoring
+
+* Improvements to the handling of line continuations
+
+* Remove some midi.js remnants
+
+* Refactoring of the parser
+
+## Build
+
+* update dependencies and fix webpack for v5
+
+## Documentation
+
+* Add microtone demo.
+
+* update docs to vuepress2
+
+# Version 6.0.0-beta.31
+
+## Bugs
+
+* Fix crash when no key signature is passed in.
+
+* Octave clefs were double transposing.
+
+* Made the audio control more robust in dark mode and when the page's css defines basic buttons.
+
+## Features
+
+* Support audio for quarter sharp and quarter flat.
+
+* Allow getMidiFile to accept a tune object as well as a string.
+
+## Build
+
+* Remove more of the midi.js code
+
+* Deliver the /dist folder for npm.
+
+* Add entry points for testing.
+
+* Start of parser refactoring
+
+# Version 6.0.0-beta.30
+
+## Bugs
+
+* Fix npm deployment.
+
+# Version 6.0.0-beta.29
+
+## Bugs
+
+* Fix stem direction on overlay voices.
+
+## Features
+
+* Add support for invisible multi-measure rest "X"
+
+* enhance typescript types
+
+## Build
+
+* Remove build of midi version
+    
+* Simplify the webpack config
+
+* Remove references to "master"
+
+# Version 6.0.0-beta.28
+
+## Bugs
+
+* Fix some problems with the visual synth control getting out of sync with the music.
+
+* Fix stem direction on overlay voices.
+
+* Don't print accidentals on percussion staves.
+
+* Keep dragging notes from jumping around when the svg is scaled (on Chrome & Safari)
+
+* Fix placement of multi-measure rest.
+
+* Fix crash when using the parser twice instead of creating a new one.
+
+* Fix bug in drawing slurs over the end of a line when there is more than one staff.
+
+* Fix bug in counting measures in the element classes.
+
+## Features
+
+* Support dark mode.
+
+* Add support for `%%percmap`, allowing specifying a shape for each sound.
+  
+* Implement the audio for `%%percmap`.
+
+* Add "triangle" as a note head shape.
+
+## Documentation
+
+* Add a "Start here" section to the demo TOC.
+
+* Add demo of tune analysis; fix docs on tune analysis
+
+* Add "zoom to fit" demo.
+
+## Build
+
+* Move SVG to separate files.
+
+# Version 6.0.0-beta.27
+
+## Bugs
+
+* Fix regression bug with setting the tempo when there is no Q: in the ABC string.
+
+* Fix measure class numbering when the line starts with a bar line.
+
+* Fix slur placement over a line break when there is more than one voice.
+
+* Recreate audio when changing the tune in the editor.
+
+* Fix wrapping crash when the first line in the tune is a subtitle.
+
+* Fix synchronization of timing callbacks after changing the tempo.
+
+* Fix regression bug when creating audio buffer in Safari.
+
+* If an audio context is passed in, always use it.
+
+## Documentation
+
+* Add warning if audio CSS is missing.
+
+* Improve the animation demo.
+
+* Add warning if a nonsensical rhythm is encountered.
+
+* Add warning if audio CSS is missing.
+
+* Change default branch to main
+
+* Add links and info for old versions.
+
+* Redo the animation demo.
+
+* Add responsive demo.
+
+* Change alt text for example's logo
+
+* Some tweaks to transposition demo.
+
+# Version 6.0.0-beta.26
+
+## Build
+
+* Added types for TypeScript for `renderAbc` function
+
+* Change midi.js to a peerDependency.
+
+## Accessibility
+
+* Add foregroundColor parameter and set the default to currentColor (for high contrast)
+
+* Add option to set the aria-label; by default aria-label is set to the title.
+
+## Bugs
+
+* Fixed some regressions in changing the audio tempo.
+
+* Fix some timing and crashing issues on synth.
+
+* Fix the currentTrackMilliseconds for meters with eighth note denominators that are not compound.
+
+## Features
+
+* Add support for triple broken rhythm symbols `>>>` and `<<<`
+
+* Add `minPadding` parameter to keep the notes from getting too close together on crowded lines.
+
+* Change the fadeLength default to 200ms
+
+# Version 6.0.0-beta.25
+
+## Bugs
+
+* Fix the way pause/resume is handled in the timing callbacks.
+
+* Fix problems with changing the tempo with "warp"
+
+* Keep key sig changes when wrapping.
+
+* Make wrapping use one less line in some cases.
+
+* Fix crash when wrapping music that has unusual voice mismatches.
+
+* Fix meter display when wrapping.
+
+* Prevent out of memory when wrapping long tune.
+
+* Fix some cases where P: and Q: were not handled correctly.
+
+* Fix changing tempo when there is a repeat.
+
+* Fix audio seek: Seek percent should take the fade length into account.
+
+* Fix crash when a tie is right before a repeat sign.
+
+* Improve error handling when creating audio.
+
+## Features
+
+* Add entry point in synth controller to programmatically seek
+
+* %%stretchlast takes a number parameter
+
+* Deliver the elapsed time in whole notes as well as milliseconds in the timing callbacks.
+
+* Return the position of the notehead in the click listener.
+
+* Add SynthControl.disable() so that the user can't click on the control before the tune is ready.
+
+## Tasks
+
+* Remove many old versions of the minified releases.
+
+* Change the destination folder for the build.
+
+* Refactor wrapping
+
+## Documentation
+
+* Some clarification of the build process in the docs.
+
+* Create the example generator.
+
+* Add FAQ
+
+* Some tweaking to the demos; create demo table of contents.
+
+* Add a little css for the examples
+
+* Improvements to examples/basic-transpose.html
+
+* Disabled spellcheck for ABC input textareas
+
+* Document afterParsing function
+
+* Document synthParamChanged
+
+# Version 6.0.0-beta.24
+
+## Bugs
+
+* If there are pickup notes and a drum track, don't start drum until the first full measure.
+
+* If a dotted slur crosses a line, the slur on the next line should also be dotted.
+
+* Make the audio buffer a little longer so the last note can fade out more naturally.
+
+* Fix abcjs-mmXX class when there are non-music lines present.
+
+* Fix height of bottom text: it was calculating a line too many.
+
+* Fix a couple of crashes when calculating the timing of a tune.
+
+* Fix documentation about how to directly play sound.
+
+## Features
+
+* Add resets to MIDI file; carry forward "pan" option to MIDI file.
+
+* %%titleleft should also affect subtitle.
+
+* Add class for the measure count from the start of the tune.
+
+# Version 6.0.0-beta.23
+
+## Bugs
+
+* Fix calculation of bottom text height when there are blank lines.
+
+* Center chord symbols better.
+
+* Fix crash in the timer when lineEndCallback is not specified.
+
+## Features
+
+* Add the staff Y coordinates to the clickListener.
+
+* Implemented %%titleleft
+
+# Version 6.0.0-beta.22
+
+## Bugs
+
+* Fix crash in audio when there is an odd measure that contains chords.
+
+* Fix definition of some jazz chords, particularly the 13th
+
+* Fix timing on multiple voices when the tempo changes.
+
+* Fix downloading WAV files in stereo.
+
+* Fix the last line in the line end callbacks.
+
+* Simplified and fixed some edge cases when seeking; added return value for eventCallback.
+
+* Fix tempo change in multiple voices
+
+* Fix the reporting of measure numbers in the timing callbacks when there are multiple voices.
+
+* Add more info to the lineEndingCallback so the client can see all of the lines.
+
+* Fix the alignment of %%center text.
+
+* Don't crash if the current beat is later than the last event (can happen when the animation timer is delayed)
+
+* Fix line end callback anticipation handling.
+
+* Fix lower volume of default soundfont to prevent clipping.
+
+* Fix crash when doing audio for tune with subtitle
+
+## Features
+
+* Add programOffsets parameter for audio.
+
+* Handle `%%MIDI channel 10` when it is in the middle of a tune.
+
+* Add the note style (grace or decoration) to the sequenceCallback.
+
+* Add classes for pinpointing where slurs start and end (abcjs-start-m0-n0, abcjs-end-m0-n0)
+
+* Round many paths to 2 dec. places; add "abcjs-dotted" to dotted slurs.
+
+* Add abcjs-dynamics class to the !f!, etc. symbols.
+
+* Differentiate between slurs and ties in the classes.
+
+* Add more info to the lineEndingCallback so the client can see all of the lines.
+
+* Add some details about the beat callback to straighten out doing a smooth cursor.
+
+# Version 6.0.0-beta.21
+
+## Bugs
+
+* Don't require soundFontUrl to end in a slash.
+
+* Force stretchlast on all lines except the last when printing one svg per line.
+
+* Fix placement of brackets and braces when there are two voices on a staff.
+
+* Fix typo in lead_8_bass_lead instrument name.
+
+## Features
+
+* Added soundFontVolumeMultiplier parameter; 
+    
+* made the abcjs soundfont the default.
+
+# Version 6.0.0-beta.20
+
+## Bugs
+
+* Fixed bug in smooth cursor when repeat is on one line.
+
+* Fix timing callbacks calling stop() when playing in a loop.
+
+## Documentation
+
+* Add example for adding swing.
+
+* Add example for playing on repeat.
+
+# Version 6.0.0-beta.19
+
+## Bugs
+
+* Fix crash when processing a string that contains no note events.
+
+* Don't let odd crescendo or diminuendo cause a nonsensical volume.
+
+* Initialize the gap in audio files.
+
+* Fix bug in timing callbacks when the position changes inside an event handler.
+
+* Fix bug in turning off individual voices.
+
+* Fixed chord placement when there are more than one chord in a measure in compound meter.
+
+## Features
+
+* Implement a smooth cursor in the timing callbacks.
+
+* Expose setWarp so that the tempo can be changed programmatically.
+
+# Version 6.0.0-beta.18
+
+## Bugs
+
+* Slight speedup when laying out scores with names in the voices.
+
+* Increase the size of the annotation's lane to account for descenders.
+
+* Fix calculation of beat length for 3/8 time.
+
+## Features
+
+* Return the cursor position for each beat in the timing callbacks.
+
+* Add the x position of the end of each note to the note timings.
+
+## Documentation
+
+* Document the renderer debug option.
+
+* Document the new parameter on the TimingCallback's beatCallback.
+
+# Version 6.0.0-beta.17
+
+## Bugs
+
+* Fix positioning of "3" on triplets.
+
+* Add a tiny bit on margin for the annotation lanes.
+
+* Fix positioning of lower annotations (that is: "_annotation").
+
+* Fix generating audio using the SynthSequence object.
+
+# Version 6.0.0-beta.16
+
+## Features
+* If there is a repeat, then include both of the currentTrackMilliseconds in the callback. (Note: if you consume this, be sure you can handle either a number or an array.)
+
+* Allow as many lanes as needed for annotations below the staff. 
+    
+* Add Tune.getElementFromChar method for convenience.
+
+* Allow setTiming to be called without parameters.
+
+## Bugs
+
+* Fix the audio interpretation of dynamics.
+
+* Fix vertical positioning of annotations when they appear on the same line as other annotations.
+
+* Fix bug when there is a spacer in a triplet.
+
+* Fix drawing of slur at beginning of line.
+
+* Fix bug where editor swallows the clickListener callback.
+
+* Fix timing when there are tempo changes.
+
+* Move tempo note up slightly so it aligns with the number, not the font's baseline.
+
+## Documentation
+
+* Document the return value of renderAbc
+
+* A little improvement to the Editor documentation.
+
+* Document classes a little more comprehensively.
+
+* Document lineBreaks parameter.
+
+* Remove the circular requirement for abcjs in the docs.
+
+* Start to document the rest of the options for renderAbc
+
+* Create example of how to annotate music.
+
+* Improve documentation of audio.
+
+* Changed the object that onEnded is passed in with to match documentation.
+
+# Version 6.0.0-beta.15
+
+## Bugs
+* Slightly increase the spacing for the dynamics lane.
+* Fix crash when inline tempo is the first thing in the file.
+* If `selectTypes` is not passed in, then the click behavior matches the last version of abcjs.
+* Various positioning tweaks for clefs and key signatures.
+* Get the fingerings to not interfere with chords.
+* Fix dynamic volume calculation when dynamic is defined on bar line.
+* Fix regression when wrapping short lines.
+* Don't crash when creating a drum track (the inserted rests don't have elements attached.)
+* Create AudioContext if one isn't passed in.
+* fix some minor positioning problems with text boxes.
+
+## Features
+* Use two lines for annotations and chords if they would run into each other.
+* Recognize `!^!` as a synonym for `!marcato!`.
+* Add a little more vertical space so nearby elements don't touch.
+* Add support for dotted slurs and dotted ties.
+* Pass back original mouse event when an element is clicked.
+* Implement `vocalspace`.
+* Add `showDebug` parameter to display element placement.
+* Support `beambr1` and `beambr2`.
+* Add the option `fontboxpadding`.
+* Allow `annotationfont`, `composerfont`, `historyfont`, `infofont`, `subtitlefont`, `textfont`, `titlefont`, and `voicefont` to have a text box.
+
+## Refactoring
+* Some refactoring of layout functionality.
+
+## Documentation
+* Change all the examples to use the `/dist` folder so the path doesn't change every release.
+* Create test for web audio.
+* Set a custom font for the chords in the docs.
+
+# Version 6.0.0-beta.14
+
+## Bugs
+
+* Don't crash if `setTiming` is called too early.
+
+* Fix length of accompaniment notes in compound meters.
+
+* Fix inaccuracies with JS floating point on the length of notes.
+
+* Fix crash when unmatched quote is in V: line.
+
+* Get the multi-measure rest to have the correct duration for both display and audio.
+
+* Fix crash "undefined size".
+
+* Fix computing the pickup length when there are triplets.
+
+* Don't transpose the perc clef.
+
+* The audio should ignore the visualTranspose.
+
+* Fix tempo calculation.
+
+## Features
+
+* Improve the drawing of the double flat symbol.
+
+* Detect chords that aren't on the beat and move them.
+
+* Play chords on incomplete measures.
+
+* Fix selection of tempo element.
+
+* Handle no key sig in transpose.
+
+* Allow synth parameters to be changed on the fly when using the editor.
+
+* Don't require generate_warnings in editor params if warnings_id is present.
+
+* Accept an element as well as an ID in warnings_id.
+
+## Refactoring
+
+* Refactor the way notes are placed to create audio.
+
+* Move layout functionality to a separate directory.
+
+## Documentation
+
+* Make a better example of how to transpose.
+
+## Testing
+
+* Add Mocha
+
+* Add mocha tests covering most of the audio note placement.
+
+* Add mocha tests for the selectable items.
+
+* Add mocha tests for the line wrapping code.
+
+* Add mocha tests that will run cross browser.
+
+# Version 6.0.0-beta.13
+
+## Bugs
+* Fix staff spacing bug when nothing is below the staff (like with bass clef only containing high notes)
+
+* If a triplet is beamed with anything else, add a bracket.
+
+* Fix supportsAudio() so it always return a bool
+
+* allow more than one brace on a system
+
+* Don't start dragging a note unless only the main mouse button is clicked.
+
+* Don't crash audio if the time signature is malformed.
+
+* Fix tempo on 9/4 and 12/4 meters
+
+* Restore staccato note length
+
+* fix bug in audio transposing middle C
+
+* fix placement and sizing of text and the text box
+
+* fix bug with sizing gchordfont
+
+* Fix some crashes and bugs in the visible audio control.
+
+## Features
+* Calculate tempo using passed in bpm if the millisecondsPerMeasure is not supplied.
+
+* Refactor the editor to use renderAbc so that all the renderAbc functionality is available.
+
+* allow multiple lines on a voice name
+
+* center the voice name when there is one name in a brace.
+
+* Implement vskip for regular music lines.
+
+* allow changing gchordfont in the middle of the tune
+
+* Create chords from whichever voice chords are encountered first.
+
+* Get the octave clefs to sound in the correct octave.
+
+## Documentation
+* update example to show onSvgPerLine and use new audio.
+
+* Fix example links in docs.
+
+* Add example for playing synth with no visual music.
+
+* Fix midi download link on full synth example.
+
+## Refactoring
+
+* split tunebook from tunebook parsing.
+
+* More refactoring of the drawing code.
+
+* separate bottom text into creation/drawing stages; cut down on dependencies in the draw functions.
+
+* separate editarea from editor to allow function redefinitions
+
+# Version 6.0.0-beta.12
+
+## Bugs
+
+* Fix selection of items in a cross-browser way, in different markups and css that the SVG can appear.
+
+* Fixes #440 second staff rendering too early.
+
+* Fix regression bug when rendering.
+
+# Version 6.0.0-beta.11
+
+## Features
+
+* Allow "K:C none" to be the same as "K:C clef=none"
+* Allow a finer grained selection mechanism.
+* Allow braces to be selected.
+* Allow o 0 and ^ as input for º ø and ∆ in chords.
+* Don't play notes that are drawn with the rhythm notehead: replace with chord.
+* Implement graceslurs
+* Make the annotation not take horizontal space.
+
+## Bugs
+
+* Crash in Firefox <= 50 when selecting.
+* Don't crash if a rest is put inside a chord i.e. `[z]`
+* Improve downward stem and beam rendering
+* Remove the gaps between notes in audio.
+* When removing latex commands, don't mess up the character positioning.
+* fix to scale the click coords when paper is set to responsive
+* support viewBox differences between chrome and firefox
+
+## Refactoring
+
+* Extract the chord/annotation function to a separate file.
+* Much refactoring to start putting all of the drawing commands together.
+
+## Documentation
+
+* Add example for using wrap.
+* Improve documentation for the call to initialize the synth.
+* use https link over ssh for building documentation
+
+# Version 6.0.0-beta.10
+
+## Features
+
+* Add option to turn off individual voices when producing the audio.
+* Add track names to midi file output.
+
+## Documentation
+
+* Example of how to play only chords or only melody.
+
+## Bugs
+
+* Fix placement of multiline overlay voices.
+* Fix crash when setting the name of the midi file to download.
+* Many timing tweaks and other improvements to the audio creation.
+* Playback treble+8, etc. clefs in the correct octave.
+* Don't transpose chord accompaniment more than an octave.
+* Extra resume of audio context for Safari 13
+* Fix setting the sound font url.
+* Support pppp and ffff in audio.
+* Fill midiPitches when doing any timing operation.
+* Fix seeking when paused moved the cursor but not the audio.
+* Fix audio timing when there are grace notes present.
+* Fix end tie that happens over an ending.
+* Fix audio for ties when there are accidentals.
+* Fix the alternating bass note for chords with #5 and b5.
+* Fix arithmetic inaccuracies in triplets.
+* Fix interpreting a "maj" chord as minor.
+* Fix tempo of 3/4 tunes.
+
+# Version 6.0.0-beta.9
+
+## Bugs
+
+* Add a fail-safe timer for the timingCallbacks (for some mobile devices that don't properly do requestAnimationFrame)
+
+## Tasks
+
+* Add Docker files for running npm.
+
+# Version 6.0.0-beta.8
+
+## Bugs
+
+* Give the percussion clef a little more room to the right.
+
+* Fix line ending callbacks after random access seeking.
+
+# Version 6.0.0-beta.7
+
+## Bugs
+
+* Some tweaks to improve audio output.
+
+* Element.prepend is not available on older browsers.
+
+# Version 6.0.0-beta.6
+
+## Bugs
+
+* When doing line wrap, don't drop the meter when there are multiple staves.
+
+* Keep the line callbacks in TimingCallbacks accurate after seeking.
+
+# Version 6.0.0-beta.5
+
+## Features
+
+* Add offset parameter for TimingCallbacks start()
+
+* Somewhat improved documentation.
+
+## Bugs
+
+* Make the timing of beats more accurate in TimingCallbacks.
+
+* Only select element if the click is within 12 pixels.
+
+* Fix crash when using the built in audio control.
+    
+# Version 6.0.0-beta.4
+
+## Features
+
+* Add a callback for the client to select items programmatically.
+
+* Add midi download to the synth example.
+
+* Add "link" as the default style of midi file return value.
+
+## Bugs
+
+* Call resume on the AudioContext just before playing, just in case. (Fixed Safari bug)
+
+* Fixed regression with the line number on the staves.
+
+* Fixed regression: the class "abcjs-top-line" lost the "abcjs-" part.
+
+## Tasks
+
+* Update copyright years.
+
+* Update dragging example.
+
+# Version 6.0.0-beta.3
+
+## Bugs
+
+* Remove warning in audio creation when the track name is specified.
+
+* Don't crash in creating audio when the length of the music is zero.
+
+* Fix some timing problems with loading note mp3 that are already pending.
+
+* Fix selection of free text.
+
+* Set the correct defaults for a bare "%%sep" command.
+
+* Set the right font face when a font is specified with only "box"
+
+* Fix crash in audio when trying to play unisons.
+
+* Fix setting the position of braces and brackets when the start staff isn't present.
+
+* Fix computation of pickup length because of JavaScript math problems
+
+* Fix setting the position of braces and brackets when the end staff isn't present.
+
+* Fix some inaccuracies in getting height of text.
+
+## Improvements
+
+* Improve efficiency of creating the audio buffer; improve sound quality and volume of the buffer.
+
+* Round many of the calculations to make the SVG draw the same on different systems.
+
+* Improve the selection data.
+
+# Version 6.0.0-beta.2
+
+## Bugs
+* Fix crash when creating music when the SVG is not shown.
+
+# Version 6.0.0-beta.1
+
+## Selection
+* Completely revamp the selection of elements code.
+* Implement dragging notes vertically.
+* Give more information when clicking on the staff label.
+* Get the box around text to be selected with the text.
+* Fix selection of the text at the top.
+* Click listener parameters now have analysis.
+* Add more element types that can be selected by the user.
+* Add option "selectAll" for only being able to select notes/rests/bars.
+* Add option "selectionColor".
+* Add option "dragColor".
+* Add option "dragging".
+
+## Audio
+* Add "pan" parameter for the audio.
+* Pass changes to audio parameters into the editor.
+* Improve error handling of midi.
+* Guard against crash when a negative duration is given to the midi.
+* If an unknown chord pattern starts with an "m", default to minor chord (was always defaulting to major.)
+* Redo audio buffer creation to use built in audio nodes.
+* Add key and time sig to midi output; use the "note off" command instead of volume 0 in midi file.
+* Add track name to midi file.
+* Don't override channel for the percussion clef if the program or channel was explicitly set.
+* Fix small, accumulating rounding error in midi file timing.
+* Fix crash when there isn't a title or other things about the first music line.
+* Fix detection of whether a meter is compound.
+* Add audio support for trills, mordent, turn, and roll.
+* Fix grace note pitch; implement staccato, tenuto, and accent in audio.
+* Add option for retrieving the binary midi data.
+* Expose the code for creating a MIDI file to the basic library.
+
+## Rendering
+* Draw bracket; fix positioning of the brace and bracket.
+* Fix grouping and classes of triplets and beams.
+* Some tweaks to the grouping of svg elements.
+* Optimize calls to getBBox
+* Give measure numbers that appear on the left edge more room when they would interfere with the treble clef.
+* Make the invisible marker zero pixels so it can't accidentally get shown with css.
+* Add classes to ledger lines
+* Add more identifying classes.
+* Adjust the bass octave indicator a little.
+* Group some svg elements together that belong together.
+* Remove the selector box for each element - entire SVG is selectable.
+
+## Tasks
+* Add testing for the output of the selection.
+* Set gitmodules for the vuepress docs (so that commits can be in npm.)
+* Remove some dependencies on the window object.
+* Put all drawing actions in an array
+
+## Documentation
+* Create demo of dragging and selection.
+* Documentation should import on the latest abcjs.
+* Fix link to audio examples in docs.
+* Fix logo path in readme
+* Add reference to the standard.
+
+# Version 5.12.0
+
+## Features
+
+* Add entry point for changing glyphs.
+
+* Improved documentation. 
+
+* Add example for changing glyphs.
+
+## Bugs
+
+* Fixed midi plugin example to demonstrate defaultQpm.
+
+* Fix rendering quarter tones in the key signature.
+
+# Version 5.11.0
+
+## Features
+
+* Changed documentation to vuepress.
+
+* Implement the defaultQpm parameter.
+
+* In TimingCallbacks, accept a tune that hasn't created noteTimings yet.
+
+* Audio: Implement beataccents, nobeataccents, vol, volinc, and set the correct default accent values.
+
+* Add onEnded callback for the CreateSynth object.
+
+* Add headless rendering with the "*" parameter.
+
+* Add callback context to audio calls.
+
+* Allow using audio without a visible control.
+
+* Add a callback when the selection changes in the editor.
+
+## Bugs
+
+* Fix bug in double reporting a note's millisecond; fix bug in playing gracenote.
+
+* Fix grace notes in percussion track.
+
+* Fix crash in creating audio when there is a mismatch of ties.
+
+* Fix bug with lining up ties with the correct voice on multipart music.
+
+* Change the TimingCallbacks input parameters into integers.
+
+* When querying a tunebook for an id, accept either string or number.
+
+* Fixed the value of currentTrackMilliseconds that is returned when the user clicks on a note.
+
+* Fix wrapLines with several titles
+
+* Don't add duplicate program commands in audio
+
+* Don't ignore chord basses with accidentals when generating midi
+
+## Tasks
+
+* Update dependencies
+
+# Version 5.10.3
+
+## Bugs
+
+* Don't crash when calculating the wrap lines if the staff width is too short.
+
+## Features
+
+* Allow boolean directives to use "true" and "false", in addition to 0 and 1.
+
+* Added freegchord option.
+
+* Show example of getting timing info on note callback function.
+
+# Version 5.10.2
+
+## Bugs
+
+* Fix line wrapping problem when the total number of measures is less than the target number of measures.
+
+# Version 5.10.1
+
+## Bugs
+
+* Fix crash when attempting to manipulate tunes that are created with oneSvgPerLine.
+
+# Version 5.10.0
+
+## Bugs
+
+* Fix crash on init of synth if tempo is not passed in.
+
+* Fix the tempo for synth pieces that are not in 4/4.
+
+## Features
+
+* Rests that take up a measure should always be a whole rest, no matter what the time sig.
+
+* Allow beat subdivisions to be set for the synth control object.
+
+* Update the test for whether audio is possible to include access to ac.resume
+
+* Add sequenceCallback option for the synth.
+
+* Add api function to expose the tune's key signature.
+
+* Add sequenceCallback option for the synth.
+
+* Add the rest of the possible TimingCallback parameters when calling through the new synth.
+
+
+# Version 5.9.1
+
+## Bugs
+
+* Fix crash when using different combinations of options for the audio control.
+
+* Fix some browser compatibility issues.
+
+# Version 5.9.0
+
+## Features
+
+* Add parameter afterParsing to provide a hook before displaying the music.
+
+* Added entry point for seeing if audio is possible.
+
+* Play gracenotes (when present) when playing a single event.
+
+* Keep a running total of the time that a note should be played for convenience in callbacks.
+
+* Add gracenote midi pitches to the return object on timing callbacks.
+
+* Support `%%MIDI program channel program` syntax.
+
+* Much improved interface for using the new audio.
+
+* Incorporate playing a single note.
+
+## Bugs
+
+* Fix crash in editor/synth demo.
+
+* Fix placement of triplets
+
+* Let the timingCallbacks be used with one SVG per line.
+
+## Tasks
+
+* Improve demos relating to audio.
+
+* Update all node dependencies.
+
+* Document the "mark" class.
+
+* Update webpack
+
+* Make uncompressed version of abcjs.
+
+# Version 5.8.1
+
+## Bugs
+
+* Fix vertical spacing of %%text
+
+* Fix output of getTune() when more than one tune is parsed with the same parser.
+
+# Version 5.8.0
+
+## Bugs
+
+* Fix alignment issue when a tempo is over a barline.
+
+* Fix alignment issue when a part is over a barline.
+
+* Change startChar and endChar to be aware of the position in the entire tunebook.
+
+* Some tweaks to the slur and tie positioning.
+
+* Protect against crash when an element is added before the staff is ready.
+
+## Features
+
+* Add a new method of creating synthesized sound. (see [Synth Documentation](docs/audio/synthesized-sound.md) )
+
+* Implement "setbarnb" measure number
+
+## Tasks
+
+* Add demos for transposing.
+
+* Add demo of clicking on a note to play it.
+
+* Add examples of how to use the new synth.
+
+* Update build dependencies
+
+* Simplify the build process by not requiring a version number change for each entry point.
+
+* Add info about x and width to renderer regression tests.
+
+# Version 5.7.0
+
+## Bugs:
+
+* Improve slur and tie direction and placement by following "Standard Practice Engraving".
+
+* Use override when calculating beats per measure in the timing functions.
+
+* Fix crash when using the old animation routine without a cursor.
+
+* Handle blank lines in the verses at the bottom.
+
+* Allow calling pauseAnimation and stopAnimation even if the animation hasn't started.
+
+* Fix alignment of overlay voices when the line starts with a bar line.
+
+* Don't start TimingCallbacks timer if there is a seek before the timer starts.
+
+* Expose TimingCallbacks in the midi and test versions.
+
+## Features:
+
+* Allow creation of SVG when it isn't visible in the DOM (by creating a dummy one if necessary).
+
+* Add classes to lyric lines.
+
+* Separate the tempo element into its own svg path so that it can be treated separately.
+
+* Support 6/4 time.
+
+* Invert beatCallback and timingCallback events.
+
+* Add more information in the callback for both the timingCallbacks and the note click callback about the sound of the note clicked.
+
+* In midi, support switching instruments in the same track.
+
+* In midi, return the pitch that is being played in the event; add the total duration as a parameter of the midi; expose getBeatsPerMeasure() in the tune structure.
+
+* In TimingCallbacks, allow subdividing beat callbacks.
+
+## Tasks:
+
+* Update webpack/babel to the latest versions.
+
+* Clean up the text size estimation to just be done in one place, and create a dummy svg if there isn't one available.
+
+* Remove the examples and the font_generator from the npm version.
+
+# Version 5.6.11
+
+## Bugs
+
+* Fix bug in TimingCallbacks where some beats won't be reported if the javascript processing is interrupted (for instance, if the user changes tabs while it is running.)
+
+# Version 5.6.10
+
+## Bugs
+
+* Fix bug in TimingCallbacks where last beat can sometimes be skipped if the animation timer wakes up right at the end.
+
+# Version 5.6.9
+
+## Bugs
+
+* Make overlay work with first & second endings
+
+* Fix bug in measure counting in TimingCallbacks when line starts with a measure of rests.
+
+* Keep stem direction when doing line wrapping.
+
+* Improve the algorithm for wrapping lines. 
+
+# Version 5.6.8
+
+## Bugs
+
+* Improve the line wrapping algorithm.
+
+* When seeking in the TimingCallbacks, call the new position's callbacks right away. 
+
+# Version 5.6.7
+
+## Bugs
+
+* When note is far from the centerline, the stem is extended, so put the flag in the right place.
+
+# Version 5.6.6
+
+## Bugs
+
+* Calculate the correct number of beats in TimingCallbacks: fixes rounding error.
+
+# Version 5.6.5
+
+## Features:
+
+* Add random access seeking to TimingCallbacks.
+
+* Pass back more progress info in the beat callback of TimingCallbacks.
+
+## Bugs
+
+* Add render_options to the midi version of the plugin.
+
+* Add missing release files; remove the "latest" versions, since they were not kept up to date.
+
+* Updated build packages.
+
+# Version 5.6.4
+
+## Features:
+
+* Add %%vskip
+
+* Add %%sep
+
+## Bugs
+
+* Don't include the minified versions of the libraries in the npm package.
+
+# Version 5.6.3
+
+## Features:
+
+* Add arpeggio decoration. 
+
+* Add "voicescale" and "cue=on".
+
+* Add "%%flatbeams".
+
+* Add entry point for "extractMeasures()" to analyze the tune. (Just single voice music for now.)
+
+## Bug fixes:
+
+* Add startChar and endChar for many non-note elements (parts, clefs, tempos, etc.)
+
+* Fix triplet bracket placement when there are rests or really high notes.
+
+* Handle triplets correctly when figuring out the length of the pickup measure.
+
+* Don't count spacers when seeing if there are pickup notes in a tune.
+ 
+* Fix bug not recognizing an inline header after a "&".
+    
+# Version 5.6.2
+
+## Features:
+
+* Add more chord definitions.
+
+* Support changing fonts in W: statements using $1 syntax.
+
+## Bug fixes:
+
+* Don't attach midi control listeners to the global object.
+
+* Fix some midi control visual issues.
+
+* Fix mousemove listener in the midi control, we want to consume only our events.
+
+* Sort the events for midi creation more deterministically.
+
+* Fix handling ties over a bar line when there is an overlay.
+
+* Adjust text a little when there is a box around it to be centered better.
+
+# Version 5.6.1
+
+## Bug fixes:
+
+* Fix bug where wrapping code was ignoring one SVG per line.
+
+# Version 5.6.0
+
+## Features:
+
+* Enable progress indicator dragging
+
+* Clicks on progress bar now move the indicator correctly 
+    
+## Bug fixes:
+
+* Fix the title (with unicode chars) in the downloadable MIDI file.
+
+* In midi, sort program changes before other events that happen at the same time.
+
+* Fix crash when calculating the title for a piece with a missing voice.
+
+* Fix bug where wrapping code was ignoring one SVG per line.
+
+* Fix off-by-one error when calculating line widths during wrapping.
+
+# Version 5.5.0
+
+## Features:
+
+* Add "chordsOff" parameter to just play midi of the melody.
+
+## Bug fixes:
+
+* Don't duplicate slurs on chords when using wrap.
+
+* Figure out correct accidental when transposing to a key with accidentals in the key signature.
+
+* Fix problem with calculating the height of beamed notes when the top or bottom one is middle C.
+
+# Version 5.4.2
+
+## Bug fixes:
+
+* TimingCallbacks was reporting the end of the animation at the beginning of the last event - it now waits until the end of that event.
+
+# Version 5.4.1
+
+## Bug fixes:
+
+* Improve the decision on how to break lines in line wrapping.
+
+* Don't duplicate meter when wrapping lines.
+
+* Return the correct version of the tune when doing line wrapping. 
+
+# Version 5.4.0
+
+## Features:
+
+* Add `preferredMeasuresPerLine` as a parameter to the line wrap.
+
+## Bug fixes:
+
+* Improvements to the speed and stability of the line wrapping code.
+
+* Fix lyric placement on wrapped lines.
+
+* Fix the timing of whole rests in the TimingCallback.
+
+# Version 5.3.5
+
+## Features:
+
+* Always send start of measure event on TimingCallbacks, even if the measure starts with a tie.
+
+* Support ^8 and _8 for clefs.
+
+# Version 5.3.4
+
+## Bug fixes:
+
+* Fix crash when doing multi-stave music in wrap mode.
+
+# Version 5.3.3
+
+## Bug fixes:
+
+* Fix test for shrinking the only line when wrapping.
+
+# Version 5.3.2
+
+## Bug fixes:
+
+* Test all options in the `wrap` parameter for legal values.
+
+* Ignore the explicit line breaks when using `wrap`.
+
+* Get the amount of spacing more even on each line when using `wrap`.
+
+# Version 5.3.1
+
+## Bug fixes:
+
+* Don't require passing `scale` as a parameter to get the `wrap` parameter to work.
+
+# Version 5.3.0
+
+## Features
+
+* Add parameter `wrap: { minSpacing, onlyLineLimit, lastLineLimit }` and automatically calc num measures for each line.
+
+* When animating, return an array of start and end chars if there is more than one voice.
+
+* Add line and measure info into the TimingCallbacks for the convenience of the clients.
+
+* Don't require qpm to be passed to TimingCallbacks: look for a qpm in the music.
+
+* In TimingCallbacks, add a callback when it is near the end of a line.
+
+* Add `replaceTarget()` to the timing callback so that re-engraving can happen when the cursor is running.
+
+* Include the original abcString in the callback when rendering.
+
+* Allow multiple overlays in the same measure.
+
+* Add `%%tripletfont` directive.
+
+* Add unicode versions of flats and sharps in midi chords.
+
+* Support `%%MIDI beat` command.
+
+* Support `%%MIDI gchordoff` and `%%MIDI gchordon`.
+
+## Bug fixes:
+
+* The tune positions were off by one because a newline is removed for each tune and was not counted.
+
+* Fix crash in `renderAbc` if the output container isn't an html element.
+
+* Fix default tempo in animation for compound meters to match the MIDI interpretation.
+
+* Refactored the animation to use the TimingCallbacks instead of duplicating code.
+
+* Fix a couple of bugs when sequencing elements for the TimingCallbacks and animation.
+
+* Center the time signature better (particularly 12/8).
+
+* Add extra space to the left of bar lines.
+
+* Add extra space to the width of a note when there is an accidental.
+
+* Lots of refactoring of the engraving code.
+
+* Fix crash when using `barsperstaff`.
+
+* Fix usage of `staffnonote`
+
+* In TimingCallbacks, make `extraMeasuresAtBeginning` default to 0.
+
+# Version 5.2.0
+
+## Features
+
+* Add a version of the plugin that supports midi.
+
+* Add getMeterFraction() convenience function.
+
+* Add a generic timer that provides callbacks in time with the music.
+
+* Small change to classes: add `abcjs-n...` to rests; add duration to triplet marks.
+
+## Bug fixes:
+
+* Correct the speed of animation in 3/8 meter.
+
+* Fix accidentally creating a global variable.
+
+# Version 5.1.2
+
+## Bug fixes:
+
+* Fix horizontal spacing calculation for multiline text.
+
+# Version 5.1.1
+
+## Bug fixes:
+
+* Fix regression for having the SVG responsive.
+
+# Version 5.1.0
+
+## Bug fixes:
+
+* Fix bug with spacing triplets when the stem direction is not explicitly set.
+
+* Fix problem with sizing the music div when zooming.
+
+* Fix crash when clicking on the time signature.
+
+* Fix bug in beat detection in midi listener.
+
+## Features
+
+* Add entry point for parseOnly().
+
+* Expose midi.setRandomProgress().
+
+* Expose midi.setLoop().
+
+* Expose midi.restartPlay().
+
+# Version 5.0.1
+
+## Bug fixes:
+
+* Comply with the Chrome change to not play audio unless the AudioContext is resumed inside a user interaction.
+
+# Version 5.0.0
+
+## Bug fixes:
+
+* Don't crash animation when there are invisible rests.
+
+* Don't crash when illegal value for scale is passed in.
+
+* Change guitar chord flat and sharp to the right symbols in a few more cases.
+
+* Begin to support mensural time signatures.
+
+## Features
+
+* Remove dependency on Raphael.
+
+# Version 4.1.1
+
+## Bug fixes:
+
+* Fix double transposition of the key signature when transposition is specified in the parameters.
+
+# Version 4.1.0
+
+## Bug fixes:
+
+* When the perc clef is defined in the voice, add the midimap translation to the pitches (this was already being done when perc is in the key sig.)
+
+* Get lines with lots of notes to align properly.
+
+* Do more edge cases with triplets; fix some triplet bugs.
+
+* Double bar lines were messing up the place for the repeat to return to.
+
+* MIDI animation now follows tempo changes.
+
+* Don't get off on the midi animation when encountering a spacer type rest.
+
+* Be sure the div to be written to is empty before engraving.
+
+* When midi is redrawn, stop playing the old midi.
+
+* After calling midi's stopPlaying, reset the inline midi control.
+
+* Fix midi animation when there are no explicit 1st & 2nd ending marks.
+
+* Add fix for getting the Font Awesome 5 icons to show up in audio control; some cosmetic tweaks to large version on audio control.
+
+* Fix click listener in Editor mode.
+
+## Features:
+
+* Allow "style=" parameter on V: line.
+
+* Add a spinner to the audio play button when the soundfonts are loading.
+
+* Allow rhythm slashes to be placed on rests.
+
+* Add feature to transpose a single voice, using "V: ... score=_B"
+
+* Add public function: midi.deviceSupportsMidi()
+
+* Add all the fonts to the directives that can be specified in the renderAbc call.
+
+# Version 4.0.1
+
+## Bug fixes:
+
+* Respect repeats in animation.
+
+* Fix crash when using metronome intro in minified version.
+
+# Version 4.0.0
+
+## Breaking Changes:
+
+* Don't generate classes unless requested. (This is a bug fix, but client code might mistakenly been relying on that behavior.)
+
+* Add "abcjs-" as a prefix to all class names that are generated.
+
+* Change the metronome track to use the Channel 10 sounds.
+
+## Features:
+
+* Simplify the options used to call `renderAbc` and `renderMidi`.
+
+* Add clearer names for `clickListener`, `midiListener`, `midiTranspose`, and `visualTranspose`.
+
+* Implement "partsBox"
+
+* Add a few missing text encodings.
+
+* Handle "%%MIDI transpose" syntax.
+
+* Add a larger version of the audio control.
+
+## Bug fixes:
+
+* Remove a few deprecated options that were broken anyway.
+
+* Move first and second ending lines down a little.
+
+* Put a little more spacing around text that has a box around it.
+
+* Remove some ES6 syntax that snuck in.
+
+* Ignore %%scale formatting command if responsive=resize.
+
+* Remove some debug messages.
+
+* Fix bug with setting only one voice to percussion voice. 
+
+# Version 3.3.4
+
+## Bug fixes:
+
+* Fix build error causing percussion soundfont to be missing.
+
+* Fix lining up multline lyrics when there is a syllable missing on the first line.
+
+## Features:
+
+* Add "rest" class to all rest objects.
+
+* Add multi-measure rests.
+
+# Version 3.3.3
+
+## Bug fixes:
+
+* Fix parsing when "V:" is inline.
+
+* Allow stafflines on the V: line.
+
+* Add "perc" to clefs recognized by V:
+
+* Fix the parsing of the "middle" parameter.
+
+* Fix centering of lyrics.
+
+* Fix midi animation when repeating over more than one line.
+
+* Take pickup notes into consideration for the lead in metronome beats.
+
+## Features:
+
+* Add transpose parameter for engraving.
+
+* Implement "MIDI drummap". 
+
+* Use percussion channel whenever the clef=perc.
+
+* Change default soundfont location to paulrosen github.
+
+* Add percussion channel to the soundfont.
+
+* Change to percussion track when "channel 10" is specified.
+
+* New parameter for download midi link: "downloadClass".
+
+* Pass the startChar and endChar to the MIDI animate callback.
+
+# Version 3.3.2
+
+## Bug fixes:
+
+* Fix the tuneNumber in the listener callback.
+
+* Fix the listener callback with separate SVG for each line.
+
+* Preload all the instruments needed; don't assume the default "piano".
+
+* Allow calling startPlaying() with the target being the parent control.
+
+* Expose the startPlaying and stopPlaying methods.
+
+* Change the midi git line to use https.
+
+* When unpausing the MIDI, immediately redraw the MIDI.
+
+* If a tempo is described as a string, don't let it be undefined in the MIDI tempo control.
+
+* Protect against writing "undefined" in class names.
+
+* Add setSoundFont() entry point.
+
+* Validate the startingTune parameter.
+
+* Add protection in case animation pause is called at an unexpected time.
+
+* Fix midi formatting issues caused by box-sizing change.
+
+## Features:
+
+* Translate some common tempo strings to BPM.
+
+* Do basic accessibility for SVG.
+
+* Add pitch and duration to the classes that notes are tagged with.
+
+* Add note number in a measure to the classes that notes are tagged with.
+
+* Add the element's classes to the listener callback.
+
+# Version 3.3.1
+
+## Bug fixes:
+
+* Modify main index.js to avoid using ES6 (is not transpiling, and some testing platforms can fail)
+
+* Expose the soundfontUrl variable.
+
+# Version 3.3.0
+
+## Bug fixes:
+
+* Only put the first/second ending marker on the top staff of a system.
+
+* Fix crash when voice is incomplete.
+
+* Fix position of the clock on the midi controls; make midi controls aware of box-sizing.
+
+* Only play chords once if there is more than one staff.
+
+* Fix JS math rounding error when figuring out the timing of the notes for MIDI animation.
+
+* Add tied notes to the objects that will get returned during MIDI animation.
+
+* Don't let the MIDI duration be a negative number on really short notes.
+
+* Sequence the repeats correctly when doing MIDI animation.
+
+* Don't put MIDI.js in debug mode.
+
+* Remove dependency on midi for the editor version
+
+* Fix declaration of "galactic".
+
+* Add polyfill for Object.remove() for IE
+
+* Fix creating downloadable midi
+
+* Fix bug where there couldn't be two different note heads on a stem.
+
+* When splitting a line with barsperline, propagate certain control items on the next line.
+
+* Fix some midi control visual conflicts with box-sizing.
+
+* Fix the playback tempo for non-4/4 meters.
+
+* Support a couple more rhythm patterns with generated chords; fix a couple errors in generated chords.
+
+* Fix problem with ending a beam when a chord is the last element.
+
+## Features:
+
+* Add support for "instrument" in midi playback; restrict usage of channel to be one per track.
+
+* Make metronome track use the next free channel.
+
+* Pick a free channel for the chords.
+
+* Add "context" as a parameter to the MIDI controls so that multiple MIDI on a page can be kept separate.
+
+* Set the default soundfont location to the CDN.
+
+* Add a signature/version to the exports so that the client can detect it.
+
+* Add the midi listener for the editor.
+
+## Infrastructure:
+
+* Moved source code into a subfolder.
+
+* Moved examples into a subfolder.
+
+* Moved font generation into a subfolder.
+
+* Moved documentation into a subfolder.
+
+* Removed many no longer used build files.
+
+* Remove "editor" as a separate build.
+
+* Just have three maintained minimized builds: abcjs_basic, abcjs_midi, and abcjs_plugin.
+
+* Create separate entry point for "test" which is only useful for those working on abcjs.
+
+* Create separate npm entry points for "basic" and "midi".
+
+* Switch to webpack for creating static versions of libs.
+
+* Don't need a plugin version under npm - that's just for standalone.
+
+* Remove dependency on midi for the standalone version.
+
+* Remove unneeded public entry points.
+
+* Add old minified versions that were previously missed. 
+
+## Documentation
+
+* Clarified config of "drum" track in midi.
+
+* Updated copyrights
+
+* Create a "contributing" doc page.
+
+* Lots of readme file clean up.
+
+* Create an example that demonstrates formatting for printing.
+
+# Version 3.2.1
+
+## Bug fixes:
+* Don't crash if window.performance is not defined.
+* Don't move the position of the rest unless there are more than one voice on a staff.
+
+# Version 3.2.0
+
+## Features:
+* Implement overlay from the ABC standard.
+
+## Bug fixes:
+* Update the license notice in the source code to match the MIT notice.
+* Fix some npm dependencies.
+* When clicking on MIDI control, have the buttons be non-submitting.
+* Fixed missing pauseAnimation function.
+* Fix the height of the SVG when doing the responsive=resize option.
+* Measure number classes should not be placed on the staff lines or the brace.
+* When animating midi, make qpm parameter optional.
+* When animating an editor-type engraving, don't pass in the tune object: the editor already has it.
+
+# Version 3.1.4
+
+## Feature:
+* Added new parameter "responsive=resize" to do responsive SVG.
+
+# Version 3.1.3
+
+## Features:
+* Rearrange the code so that an npm module is created.
+* Provide access to warning messages as objects.
+
+## Bug fixes:
+* Fix crash in generating midi when the meter isn't expressly defined.
+* Don't throw an error if the midi control has been removed from the DOM by the time the midi stops playing.
+* Don't require Raphael to be visible to a client creating an EngraverController.
+* Fix problem with title not showing when using the plugin.
+
+# Version 3.1.2
+
+## Bug fixes:
+* L: 1 (whole note) should be accepted as note length
+* Do not change the default note length when meter is change inline
+* If no meter is specified, free meter is assumed
+* If a default note length is set by a meter, it shouldn't be changed another inline meter
+* Fix crash on inline V:
+* Fix overlapping of low annotations.
+* Fix spacing after voice label.
+* Make ties a little more rounded.
+* Some minor adjustment to drawing ties.
+
+## Features:
+* Add an option to hide the current measure on animation.
+
+# Version 3.1.1
+
+## Bug fixes:
+
+* Change slur direction if there is a tie on the first or last note.
+* Adjust placement of slash on a note stem; make sure the stem is long enough.
+* Work on placement of triplets.
+* Make tie shallower than slur.
+
+# Version 3.1.0
+
+## Bug fixes:
+* Fix midi beat length; some improvements to the midi animation.
+* Write ledger lines for grace notes.
+* Fix crash in parsing.
+* qpm was being passed in twice for midi animation.
+* When doing the call back in the midi animation, pass the absolute coordinates of the item that is current.
+* Handle case where there is an intro drum beat, but it ends at the first note.
+* Handle common and cut time when doing midi drum beats.
+* Fix midi transposition.
+* Fix bug in midi animation when starting and stopping the midi.
+* Fix bug in finding the written notes when animating the midi output.
+* Handle creating midi for grace note that appears at the beginning of a part that is not the first part.
+* Fix bug introduced in creating midi for gracenote.
+* Fix when the metronome track starts, and fix the tempo of it when the meter is not 4/4
+* Allow passed in tempo to override the defined tempo.
+* Fix crash when creating midi for multipart music where the first note has a grace.
+* Make midi control's css more stable when combined with other css.
+* Fix bug in displaying note values in tempo field.
+* Fix crash when there are bar numbers on multi-line music. 
+
+## Features:
+* Add "pause/resume" to the standard animation.
+* Report when there is a new beat in the midi listener.
+* Added drum intro to the MIDI, using a new midiParameter.
+* Add midi option "voicesOff" to mute the midi output, while leaving the metronome, guitar chords, and the animation.
+* Implement animation callback when playing MIDI.
+* Completely change the parsing of %%MIDI parameters; support the "%%MIDI drum" parameters; allow setting midi instrument and channel.
+* Allow three digit version numbers.
+
+## Warning:
+* Turn off instrument/channel selection in midi until it is debugged.
+
+# Version 3.0
+
+## Bug fixes:
+* Fix crash when encountering Cbm or other theoretical-only keys.
+* Fix crash when there is no start or end point for a dynamic mark.
+* Don't crash in Firefox if text is written to an element that is not currently visible (Raphael reports NaN for the size.)
+* Don't crash if the music was removed before animation is done.
+* Fix centering text using %%center.
+* Allow blank %%text lines.
+* Misspelled botmargin.
+* Fix bugs in measure numbering: put number over the bar line.
+* Fix placement and style of the measure numbers.
+* Fix crash when there is a key change after a subtitle line in the header.
+* Make the + sign of the meter not lay right on the staff line.
+* Fix note length bugs in the tempo marker.
+
+## Features:
+* Added viewPortHorizontal and scrollHorizontal to the renderParams.
+* Add class "slur" to slurs and ties.
+* Add "hint measure"
+* Allow scrolling in the animation.
+* Handle %%titlecaps directive.
+* Add curly brace to indicate piano part (with inspiration from Anthony P. Pancerella).
+* Add invisible marker to the top of each system so that it can be found easily.
+* Add an option to put each line in a separate svg so that browsers will paginate correctly.
+
+## MIDI:
+* First pass at using a new inline MIDI generator.
+* Make the default MIDI instrument "0" instead of "2" 
+* Implement some MIDI controls: play, pause, reset, tempo, progress bar, BPM, clock, pre- and post-text 
+
+# Version 3.0 Beta
+
+## MIDI:
+
+* Update documentation for using MIDI.
+
+* Update creating a release to package the MIDI.
+
+* Integrate midi.js and remove the old MIDI attempts.
+
+* Create MIDI output for both download and playing through midi.js.
+
+* Create the html for an interactive audio control and implement standard functionality.
+
+* Make the default midi instrument "0" instead of "2"
+
+* Don't crash if a chord containing a slash doesn't contain a bass note.
+
+* Fix playing second repeat; allow strings as parameters.
+
+## Bug fixes:
+
+* Fix crash when encountering Cbm or other theoretical-only keys.
+
+* Report the tune number on clicking the absolute element
+
+* Fix crash when there is no start or end point for a dynamic mark.
+
+* Clarify how to use the animation() functionality.
+
+* Added viewPortHorizontal and scrollHorizontal to the renderParams
+	
+# Version 2.3
+
+* Completely refactor the midi processing: now supports chords and grace notes and embeds the tune's title.
+
+* Remove the automatic generation of the QuickTime element.
+
+* Fix crash when a triplet with a 0 duration is created. That is: (3B0BB
+
+* Fix having a spacer 'y' between two notes that are tied.
+
+* Fix starting first line with [P:A] 
+
+# Version 2.2
+
+* Fix drawing of tempo indicator.
+
+* Add voice number to the css classes.
+
+# Version 2.1
+
+* Fix startChar for chords.
+
+* Fix placement of left annotation, that is: "< text"
+
+* Updated compressor version (note: 2.4.8 has a bug and doesn't work, so using 2.4.7)
+
+* Some improvements to decoration placement.
+
+* Fix triplet not lining up properly in multiple voices bug.
+
+* Fix note lengths when chords and broken rhythms interact.
+
+* If a font appears in the header, then it becomes the default font.
+
+* Add some debugging capability to the plugin. 	4313963
+
+* Implement gchordfont; make the extra spacing respect the font height.
+
+* Upgrade bundled version of jQuery to 1.11.3.
+	
+# Version 2.0
+
+* Many bug fixes.
+
+* Much work on vertical spacing of elements.
+
+* Much refactoring of the codebase to make future maintenance easier.
+
+* Beginning support of "print" mode, that lays out music in a way suitable for creating printable PDFs.
+
+* Fixed animation jumping around when there is a whole rest or after a bar line.
+
+* Fixed slurs not behaving across lines.
+
+* Improved the handling of generating glyphs.
+
+* Added support for setting a number of fonts.
+
+* Added support for positioning of lyrics, dynamics, volume marks, ornaments, and guitar chords.
+
+* Fixed grace note note lengths.
+
+* Added a set of regression data for the engraver.
+
+* Added note head choices for slash notation, harmonics, and indeterminate pitch.
+
+* Fix vertical positioning of many elements.
+
+* Fixed positioning of ties.
+
+* Fixed beam height.
+
+* Set padding for "print" version.
+
+* Support of many formatting options.
+
+* Expanded click target so that users can easily select note.
+
+# Version 1.12
+
+* Improved documentation.
+
+* Accept `%%abc-*` meta commands.
+
+# Version 1.11
+
+## Features
+
+* Added new entry points: ABCJS.startAnimation() and ABCJS.stopAnimation(), which allow for a bouncing ball-type cursor.
+
+* Added getBeatLength() to the returned tune to get the length of a beat in measures.
+
+* Return the tune object from renderABC() so it can be manipulated further by the caller.
+
+* Put a copy of the engraver with the outputted tune, so that it can be manipulated later.
+
+* Made highlighting notes more flexible: both the class name for the highlight and the note-head color can be specified or not used.
+
+* Added descriptive classes to all SVG elements, including element type, line number, and measure number.
+
+Bugs
+---
+
+* Fixed positioning of the highlighted characters in the editor when a line begins with a space.
+
+* Fix the duration of whole rests to always be the length of a measure.
+
+* Fixed bug in "unpausing" the editor's connection with the rendering.
+
+* Move chord names above everything else on the line.
+
+* Made more room for decorations, so they don't overlap.
+
+* Center whole rests in the measure.
+
+* Put accent on opposite side of the note stem.
+
+Refactoring
+---
+
+* Moved Raphael out of the "write" folder; updated jQuery version.
+
+* Split graphelements file into many different files.
+
+* Changed the internal name of "printer" to "engraver" as a first step in refactoring.
+
+* Updated the minify script to find all js files.
+
+* Updated the minify script to change the version number in the readme automatically.
+
+* Updated the minify script to support "a" and "b" in the version name for alpha and beta versions.
+
+Examples
+---
+
+* Created versions of the minimized files with a name that includes "_latest", for easy reference.
+
+* Updated the example files to always use the latest version.
+
+* Fixed font displaying html file to note have the elements write on top of each other.

SECURITY.md

@@ -0,0 +1,9 @@
+# Security Policy
+
+## Supported Versions
+
+Only the latest version will get security updates. Please stay updated if possible.
+
+## Reporting a Vulnerability
+
+Contact Paul Rosen directly if you detect a security problem. The most reliable way is to through the contact form on https://abcjs.net.

abcjs-audio.css

@@ -0,0 +1,187 @@
+/* Some basic CSS to make the Audio controls in abcjs presentable. */
+
+.abcjs-inline-audio {
+	height: 26px;
+	padding: 0 5px;
+	border-radius: 3px;
+	background-color: #424242;
+	display: flex;
+	align-items: center;
+	box-sizing: border-box;
+}
+
+.abcjs-inline-audio.abcjs-disabled {
+	opacity: 0.5;
+}
+
+.abcjs-inline-audio .abcjs-btn {
+	display: block;
+	width: 28px;
+	height: 34px;
+	margin-right: 2px;
+	padding: 7px 4px;
+
+	background: none !important;
+	border: 1px solid transparent;
+	box-sizing: border-box;
+	line-height: 1;
+}
+
+.abcjs-btn g {
+	fill: #f4f4f4;
+	stroke: #f4f4f4;
+}
+
+.abcjs-inline-audio .abcjs-btn:hover g {
+	fill: #cccccc;
+	stroke: #cccccc;
+}
+
+.abcjs-inline-audio .abcjs-midi-selection.abcjs-pushed {
+	border: 1px solid #cccccc;
+	background-color: #666666;
+	box-sizing: border-box;
+}
+
+.abcjs-inline-audio .abcjs-midi-loop.abcjs-pushed {
+	border: 1px solid #cccccc;
+	background-color: #666666;
+	box-sizing: border-box;
+}
+
+.abcjs-inline-audio .abcjs-midi-reset.abcjs-pushed {
+	border: 1px solid #cccccc;
+	background-color: #666666;
+	box-sizing: border-box;
+}
+
+.abcjs-inline-audio .abcjs-midi-start .abcjs-pause-svg {
+	display: none;
+}
+
+.abcjs-inline-audio .abcjs-midi-start .abcjs-loading-svg {
+	display: none;
+}
+
+.abcjs-inline-audio .abcjs-midi-start.abcjs-pushed .abcjs-play-svg {
+	display: none;
+}
+
+.abcjs-inline-audio .abcjs-midi-start.abcjs-loading .abcjs-play-svg {
+	display: none;
+}
+
+.abcjs-inline-audio .abcjs-midi-start.abcjs-pushed .abcjs-pause-svg {
+	display: block;
+}
+
+.abcjs-inline-audio .abcjs-midi-progress-background {
+	background-color: #424242;
+	height: 10px;
+	border-radius: 5px;
+	border: 2px solid #cccccc;
+	margin: 0 8px 0 15px;
+	position: relative;
+	flex: 1;
+	padding: 0;
+	box-sizing: border-box;
+}
+
+.abcjs-inline-audio .abcjs-midi-progress-indicator {
+	width: 20px;
+	margin-left: -10px; /* half of the width */
+	height: 14px;
+	background-color: #f4f4f4;
+	position: absolute;
+	display: inline-block;
+	border-radius: 6px;
+	top: -4px;
+	left: 0;
+	box-sizing: border-box;
+}
+
+.abcjs-inline-audio .abcjs-midi-clock {
+	margin-left: 4px;
+	margin-top: 1px;
+	margin-right: 2px;
+	display: inline-block;
+	font-family: sans-serif;
+	font-size: 16px;
+	box-sizing: border-box;
+	color: #f4f4f4;
+}
+
+.abcjs-inline-audio .abcjs-tempo-wrapper {
+	font-size: 10px;
+	color: #f4f4f4;
+	box-sizing: border-box;
+	display: flex;
+	align-items: center;
+}
+
+.abcjs-inline-audio .abcjs-midi-tempo {
+	border-radius: 2px;
+	border: none;
+	margin: 0 2px 0 4px;
+	width: 42px;
+	padding-left: 2px;
+	box-sizing: border-box;
+}
+
+.abcjs-inline-audio .abcjs-loading .abcjs-loading-svg {
+	display: inherit;
+}
+
+.abcjs-inline-audio .abcjs-loading {
+	outline: none;
+	animation-name: abcjs-spin;
+	animation-duration: 1s;
+	animation-iteration-count: infinite;
+	animation-timing-function: linear;
+
+}
+.abcjs-inline-audio .abcjs-loading-svg circle {
+	stroke: #f4f4f4;
+}
+
+@keyframes abcjs-spin {
+	from {transform:rotate(0deg);}
+	to {transform:rotate(360deg);}
+}
+
+/* Adding the class "abcjs-large" will make the control easier on a touch device. */
+.abcjs-large .abcjs-inline-audio {
+	height: 52px;
+}
+.abcjs-large .abcjs-btn {
+	width: 56px;
+	height: 52px;
+	font-size: 28px;
+	padding: 6px 8px;
+}
+.abcjs-large .abcjs-midi-progress-background {
+	height: 20px;
+	border: 4px solid #cccccc;
+}
+.abcjs-large .abcjs-midi-progress-indicator {
+	height: 28px;
+	top: -8px;
+	width: 40px;
+}
+.abcjs-large .abcjs-midi-clock {
+	font-size: 32px;
+	margin-right: 10px;
+	margin-left: 10px;
+	margin-top: -1px;
+}
+.abcjs-large .abcjs-midi-tempo {
+	font-size: 20px;
+	width: 50px;
+}
+.abcjs-large .abcjs-tempo-wrapper {
+	font-size: 20px;
+}
+
+.abcjs-css-warning {
+	display: none;
+}

deploy-docs.sh

@@ -0,0 +1,19 @@
+# Get the examples somewhere they can be served
+cp -r examples docs/.vuepress/dist/examples
+cp -r dist docs/.vuepress/dist/dist
+cp abcjs-audio.css docs/.vuepress/dist
+
+# navigate into the build output directory
+cd docs/.vuepress/dist
+
+git init
+git add -A
+git commit -m 'deploy'
+
+# if you are deploying to https://<USERNAME>.github.io
+# git push -f git@github.com:<USERNAME>/<USERNAME>.github.io.git master
+
+# if you are deploying to https://<USERNAME>.github.io/<REPO>
+git push -f git@github.com:paulrosen/abcjs.git master:gh-pages
+
+cd -

dist/.gitignore

@@ -0,0 +1 @@
+!.gitignore

dist/abcjs-basic-min.js.LICENSE

@@ -0,0 +1,23 @@
+/**!
+Copyright (c) 2009-2024 Paul Rosen and Gregory Dyke
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+ **This text is from: http://opensource.org/licenses/MIT**
+!**/

dist/abcjs-plugin-min.js.LICENSE

@@ -0,0 +1,23 @@
+/**!
+Copyright (c) 2009-2024 Paul Rosen and Gregory Dyke
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in
+all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+THE SOFTWARE.
+
+ **This text is from: http://opensource.org/licenses/MIT**
+!**/

docker-build.sh

@@ -0,0 +1 @@
+docker compose build

docker-compose.yml

@@ -0,0 +1,10 @@
+services:
+  app:
+    image: abcjs
+    build: .
+    container_name: abcjs
+    volumes:
+      - .:/srv/app
+      - ./node_modules:/srv/app/node_modules
+    ports:
+      - $abcjs_docs:8080

docker-start.sh

@@ -0,0 +1 @@
+docker compose run --publish $abcjs_docs:8080 --rm --name=abcjs app bash

docs/.vuepress/client.js

@@ -0,0 +1,12 @@
+import { createStore } from 'vuex'
+import { store } from "./store";
+import { registerComponents } from './components'
+import { defineClientConfig } from '@vuepress/client'
+
+export default defineClientConfig({
+	enhance({ app }) {
+		const vuexStore = createStore(store)
+		app.use(vuexStore)
+		registerComponents(app)
+	}
+})

docs/.vuepress/components.js

@@ -0,0 +1,37 @@
+import abcjsEditor from './components/AbcjsEditor.vue'
+import checkBox from './components/CheckBox.vue'
+import exampleTuneBook from './components/ExampleTuneBook.vue'
+import fieldSet from './components/FieldSet.vue'
+import foundClasses from './components/FoundClasses.vue'
+import numTunes from './components/NumTunes.vue'
+import radioGroup from './components/RadioGroup.vue'
+import renderAbc from './components/RenderAbc.vue'
+import renderAudio from './components/RenderAudio.vue'
+import sandboxCode from './components/SandboxCode.vue'
+import sandboxContainer from './components/SandboxContainer.vue'
+import sandboxInput from './components/SandboxInput.vue'
+import sandboxOutput from './components/SandboxOutput.vue'
+import showAndRenderAbc from './components/ShowAndRenderAbc.vue'
+import timingCallbacks from './components/TimingCallbacks.vue'
+import tuneBookInfo from './components/TuneBookInfo.vue'
+
+const registerComponents = (app) => {
+	app.component('abcjsEditor', abcjsEditor)
+	app.component('checkBox', checkBox)
+	app.component('exampleTuneBook', exampleTuneBook)
+	app.component('fieldSet', fieldSet)
+	app.component('foundClasses', foundClasses)
+	app.component('numTunes', numTunes)
+	app.component('radioGroup', radioGroup)
+	app.component('renderAbc', renderAbc)
+	app.component('renderAudio', renderAudio)
+	app.component('sandboxCode', sandboxCode)
+	app.component('sandboxContainer', sandboxContainer)
+	app.component('sandboxInput', sandboxInput)
+	app.component('sandboxOutput', sandboxOutput)
+	app.component('showAndRenderAbc', showAndRenderAbc)
+	app.component('timingCallbacks', timingCallbacks)
+	app.component('tuneBookInfo', tuneBookInfo)
+}
+
+export { registerComponents }

docs/.vuepress/components/AbcjsEditor.vue

@@ -0,0 +1,67 @@
+<template>
+	<div class="abcjs-editor">
+		<textarea ref="textarea" id="abc"></textarea>
+		<div id="warnings"></div>
+		<div id="paper"></div>
+	</div>
+</template>
+
+<script>
+import { waitForAbcjs } from '../wait-for-abcjs';
+
+	export default {
+		name: "abcjs-editor",
+		watch: {
+			callbacks() {
+				this.onchange();
+			},
+			abc() {
+				this.$refs.textarea.value = this.abc;
+				const abc_editor = new abcjs.Editor("abc", {
+					canvas_id: "paper",
+					warnings_id: "warnings",
+					onchange: this.onchange,
+					abcjsParams: { add_classes: true, responsive: "resize" },
+					indicate_changed: true,
+				});
+			}
+		},
+		props: {
+			abc: {
+				type: String,
+				required: true
+			},
+			callbacks: {
+				type: Array,
+				required: false
+			},
+		},
+		async mounted() {
+			await waitForAbcjs()
+			this.$refs.textarea.value = this.abc;
+			const abc_editor = new abcjs.Editor("abc", {
+				canvas_id: "paper",
+				warnings_id: "warnings",
+				onchange: this.onchange,
+				abcjsParams: { add_classes: true, responsive: "resize" },
+				indicate_changed: true,
+			});
+		},
+		methods: {
+			onchange() {
+				if (this.callbacks) {
+					this.callbacks.forEach(fn => {
+						if (fn.redraw)
+							fn.redraw(this.$refs.textarea.value);
+					})
+				}
+			},
+		},
+	}
+</script>
+
+<style>
+	#warnings {
+		color: red;
+	}
+</style>

docs/.vuepress/components/CheckBox.vue

@@ -0,0 +1,130 @@
+<template>
+	<div class="check-box">
+		<label :class="labelClass">
+			<span class="checkbox__input">
+				<input type="checkbox" :disabled="disabled" v-model="item">
+				<span class="checkbox__control">
+            <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' aria-hidden="true" focusable="false">
+						<path fill='none' stroke='#000000' stroke-width='3' d='M1.73 12.91l6.37 6.37L22.79 4.59'/>
+					</svg>
+				</span>
+			</span>
+			<span class="radio__label">{{label}}</span>
+		</label>
+
+		<div v-if="subOptions" class="sub-options">
+			<check-box v-for="option in subOptions" :label="option.text" :value="option.value" :disabled="disabled || !item || option.todo" :class="{todo: option.todo}"></check-box>
+		</div>
+	</div>
+</template>
+
+<script>
+export default {
+	name: "check-box",
+	props: {
+		label: {
+			type: String,
+			required: true
+		},
+		value: {
+			type: String,
+			required: true
+		},
+		subOptions: {
+			type: Array,
+			required: false,
+			default: null
+		},
+		disabled: {
+			type: Boolean,
+			required: false,
+			default: false
+		}
+	},
+	computed: {
+		labelClass() {
+			let classes = ['checkbox'];
+			if (this.disabled)
+				classes.push("checkbox--disabled");
+			return classes.join(" ");
+		},
+		item:{
+			get(){
+				return this.$store.getters[this.value];
+			},
+			set(newValue){
+				this.$store.commit(this.value, newValue)
+			}
+		}
+	},
+
+}
+</script>
+
+<style scoped>
+.check-box {
+	margin-top: 10px;
+}
+.sub-options {
+	margin-left: 30px;
+}
+
+.checkbox {
+	display: grid;
+	grid-template-columns: min-content auto;
+	grid-gap: 0.5em;
+	font-size: 1rem;
+	color: #000000;
+}
+.checkbox--disabled {
+	color: #959495;
+}
+
+.checkbox--disabled path {
+	stroke: #959495;
+}
+
+.checkbox--disabled .checkbox__control {
+	border: 0.1em solid #959495;
+}
+
+.checkbox__control {
+	display: inline-grid;
+	width: 1em;
+	height: 1em;
+	border-radius: 0.25em;
+	border: 0.1em solid #000000;
+}
+.checkbox__control svg {
+	transition: transform 0.1s ease-in 25ms;
+	transform: scale(0);
+	transform-origin: bottom left;
+}
+
+.checkbox__input {
+	display: grid;
+	grid-template-areas: "checkbox";
+}
+.checkbox__input > * {
+	grid-area: checkbox;
+}
+.checkbox__input input {
+	opacity: 0;
+	width: 1em;
+	height: 1em;
+}
+.checkbox__input input:focus + .checkbox__control {
+	box-shadow: 0 0 0 0.05em #fff, 0 0 0.15em 0.1em #000000;
+}
+.checkbox__input input:checked + .checkbox__control svg {
+	transform: scale(1);
+}
+.checkbox__input input:disabled + .checkbox__control {
+	color: #959495;
+}
+
+.todo {
+	text-decoration: line-through;
+}
+
+</style>

docs/.vuepress/components/ExampleTuneBook.vue

@@ -0,0 +1,199 @@
+<template>
+	<div class="example-tune-book">
+		<abcjs-editor :callbacks="callbacks" :abc="abc"></abcjs-editor>
+	</div>
+</template>
+
+<script>
+import AbcjsEditor from "./AbcjsEditor.vue";
+
+	export default {
+		name: "example-tune-book",
+		components: {AbcjsEditor},
+		props: {
+			callbacks: {
+				type: Array,
+				required: false
+			},
+			tuneId: {
+				type: Number,
+				required: false
+			},
+		},
+		computed: {
+			abc() {
+				let str;
+				if (!window.abcjs)
+				 	return "";
+
+				if (this.tuneId === undefined)
+					return this.allTunes;
+
+				const book = new window.abcjs.TuneBook(this.allTunes);
+				return book.getTuneById(''+this.tuneId).abc;
+			},
+		},
+		data() {
+			const abc = `%%gchordfont "itim-music,Itim" 20
+X: 1
+T:Money Lost
+M:3/4
+L:1/8
+Q:1/4=100
+C:Paul Rosen
+S:Copyright 2007, Paul Rosen
+R:Klezmer
+K:Dm
+Ade|:"Dm"(f2d)e gf|"A7"e2^c4|"Gm"B>>^c BA BG|"A"A3Ade|"Dm"(f2d)e gf|"A7"e2^c4|
+"Gm"A>>B "A7"AG FE|1"Dm"D3Ade:|2"Dm"D3DEF||:"Gm"(G2D)E FG|"Dm"A2F4|"Gm"B>>c "A7"BA BG|
+"Dm"A3 DEF|"Gm"(G2D)EFG|"Dm"A2F4|"E°"E>>Fy "(A7)"ED^C2|1"Dm"D3DEF:|2"Dm"D6||
+
+X: 32
+T:Pretty Little Liza
+C:Paul Rosen
+S:Copyright 2005, Paul Rosen
+M:4/4
+L:1/8
+Q:1/2=106
+R:old time
+K:Am
+"Am"A2AA c2dd|e2eg e2dc|A2AA c2dd|e2cc A2cc|"Em (G)"B2BB B2BB|
+B2BB B2BB|"Am"A2AA c2dd|e2eg e2c2|"D"d2dd d2dd|d2dd d2cd|
+"Am"e2cc A2c2|"G"BAG2 BAG2|"Am"A2AA A2AA|A2AA A2AA|:"Am"e4 a3e|"G"g2d2- d2eg|
+"Am"a2aa ged2|"Em"e2ee e2ee|"Am"e4 a3e|"G"g2d2- d2Bc|"Em"d2e2 dcB2|"Am"A2AA A2AA:|
+
+X:49
+M:4/4
+L:1/16
+%%stretchlast .7
+Q:1/4=100
+T:Piano
+%%staves {(PianoRightHand) (PianoLeftHand)}
+V:PianoRightHand clef=treble
+V:PianoLeftHand clef=bass
+K:C
+[V: PianoRightHand] !mp!e2f2 e2d2 c2B2 A4|!>(!B2d2 g4 c6 !>)!e2|!p![G4e4] z4 A4 G4|c12 z4|[A12f12] [g4d4]|z4 !<(!B4 !<)![A8c8]|
+!mf!A4 z4 d8|B8 [G4c4] z4|f2A2 c4 f4 g4|[f12d12] e4|!<(!A4 A4 c2e2 !<)!g4|!f!e8 z8|
+[A4d4] z4 A8|BcBA G4 c4 G2B2|A2G2 A2B2 c4 B2G2|c12 z4|]
+[V: PianoLeftHand] [E,12C,12] F,4|[G,8D,8] [C,8E,8]|G,4 C,4 C,4 B,,A,,C,B,,|A,,12 z4|A,,4 B,,4 C,2D,2 B,,C,D,E,|C,2E,2 G,4 E,2F,2 G,4|
+F,4 A,4 [A,8F,8]|G,2F,2 E,2D,2 [C,4E,4] z4|[F,8A,8] [D,4A,4] z4|F,2G,2 A,2F,2 D,2F,2 C,2B,,2|C,4 F,A,D,F, E,4 z4|C,8 z8|
+F,4 E,4 F,4 A,4|[D,8G,8] E,4 z4|C,4 [C,4F,4] z4 G,4|C,12 z4|]
+
+X:77
+T:Mary
+M:C
+L:1/4
+K:G
+BAGA| BBB2|AAA2| Bdd2|
+w:Mar- y had a lit- tle lamb, lit- tle lamb, lit- tle lamb,
+BAGA| BBBB|AABA |G|]
+w:Mar- y had a lit- tle lamb whose fleece was white as snow.
+
+X:102
+%%staves 1 2 3
+T: Sonata I
+C: J.S. Bach
+M: C
+Q:"Adagio"
+L: 1/8
+K:C
+V:1 clef=treble name="Violino I"      sname="Vl. I"
+V:2 clef=treble name="Violino II"     sname="Vl. II"  space=+10
+V:3 clef=bass   name="Violoncello" sname="Vc."
+[V:1]  g8-|gf/e/ {e}f>g (a/f/d/f/) (A//=B//A//B//TB3//A///B///)|
+[V:2] z8 | z8 |
+[V:3] z cec gGBG | Aa- a/_b/a/g/ f3 g/f/ |
+%
+[V:1] c/gf/ E/ed/ c/c'b/ A/ag/ | ^f/e/d- d/(c/B/A/) G/(e/c/e/) Aa| d2-d/g/_b/a/ a3 g/=f/|
+[V:2] c8- | cB/A/ {A}B>c (e/c/A/c/) (E//^F//E//F//TF3//E///F///) | G/(D/G/A/) _B/G/g/e/ ^cA d2-|
+[V:3] edcB AG^FE | D^FGg c3d/c/| _BG g2-gf/e/ f>g|
+
+X:232
+T:Amazing Grace
+C:Lyric Author: John Newton
+R:Early American Melody
+Z:Public Domain
+N:A well known tune
+L:1/4
+M:3/4
+%%staves (S A) (T B)
+V:S clef=treble name=""
+V:A clef=treble name=""
+V:T clef=bass name=""
+V:B clef=bass name=""
+K:Ab
+% Measures 1 - 7
+[V:S] (E/ F/) | A2 (c/ A/) | c2 B | A2 F |  E2 (E/ F/) | A2 (c/ A/) | c2 (B/ c/) | He2 |
+[V:A] (C/ D/) | C2 (E/ C/) | E2 D | C2 D | C2 (C/ D/) | C2 (E/ C/) | E2 A | G2 |
+[V:T] A, | E,2 A, | A,2 G, | A,2 A, | A,2 A, | E,2 A, | A,2 A, | HB,2 |
+[V:B] A,, | A,,2 A,, | A,,2 E, | F,2 D, | A,,2 A,, | A,,2 A,, | A,2 F, | E,2 |
+% Measures 8 - 14
+[V:S] (B/ c/) | e2 (e/ c/)  | A2 (F/ E/) |  A2 F | E2 (E/ F/) | A2 (c/ A/) | c2 B | HA2 |
+[V:A] G | A2 (A/ E/) | E2 (D/ C/) | F2 D | C2 (C/ D/) | C2 (E/ A/) | G2 G | E2 |
+[V:T] E | C2 (C/ A,/) | C2 A, | A,2 A, | A,2 A, | A,2 (A,/ C/) | E2 D | HC2 |
+[V:B] E, | A,2 A, | A,2 A, | D,2 D, | A,,2 A, | F,2 E, | E,2 E, | A,,2 |
+
+X:400
+T:Drum Kit
+%%map drummap D    print=D heads=x_head   % pedal hi-hat
+%%map drummap E    print=E                % bass drum 1
+%%map drummap F    print=F                % acoustic bass drum
+%%map drummap G    print=G                % low floor tom-tom
+%%map drummap A    print=A                % high floor tom-tom
+%%map drummap B    print=B                % low tom-tom
+%%map drummap ^B   print=B heads=triangle % tambourine
+%%map drummap c    print=c                % acoustic snare
+%%map drummap _c   print=c                % electric snare
+%%map drummap ^c   print=c heads=triangle % low wood block
+%%map drummap =c   print=c                % side stick
+%%map drummap d    print=d                % low-mid tom tom
+%%map drummap ^d   print=d heads=triangle % high wood block
+%%map drummap e    print=e                % high-mid tom tom
+%%map drummap ^e   print=e heads=triangle % cowbell
+%%map drummap f    print=f                % high tom tom
+%%map drummap ^f   print=f heads=x_head   % ride cymbal 1
+%%map drummap g    print=g heads=x_head   % closed hi-hat
+%%map drummap ^g   print=g heads=diamond  % open hi-hat
+%%map drummap a    print=a heads=x_head   % crash cymbal 1
+%%map drummap ^a   print=a heads=triangle % open triangle
+%%MIDI drummap D   44 % pedal hi-hat
+%%MIDI drummap E   36 % bass drum 1
+%%MIDI drummap F   35 % acoustic bass drum
+%%MIDI drummap G   41 % low floor tom-tom
+%%MIDI drummap A   43 % high floor tom-tom
+%%MIDI drummap B   45 % low tom-tom
+%%MIDI drummap ^B  54 % tambourine
+%%MIDI drummap c   38 % acoustic snare
+%%MIDI drummap _c  40 % electric snare
+%%MIDI drummap ^c  77 % low wood block
+%%MIDI drummap =c  37 % side stick
+%%MIDI drummap d   47 % low-mid tom tom
+%%MIDI drummap ^d  76 % high wood block
+%%MIDI drummap e   48 % high-mid tom tom
+%%MIDI drummap ^e  56 % cowbell
+%%MIDI drummap f   50 % high tom tom
+%%MIDI drummap ^f  51 % ride cymbal 1
+%%MIDI drummap g   42 % closed hi-hat
+%%MIDI drummap ^g  46 % open hi-hat
+%%MIDI drummap a   49 % crash cymbal 1
+%%MIDI drummap ^a  81 % open triangle
+%%score (1 2)
+Q:1/4=120
+M:4/4
+L:1/4
+K:C perc
+V:1
+z4| g/^f/g/^f/ g/^f/g/^f/| c/^f/g/^f/ A/^f/g/^f/| c/^f/g/^f/ A/^f/g/^f/|
+c/c/g/^f/ A/A/g/^f/| c/^f/c/^f/ A/^f/A/^f/|(3B/B/B/ (3f/f/f/ (3e/e/e/ (3d/d/d/ | a4|
+V:2
+E D E/E/ D|E D E/E/ D|E D E/E/ D|E D E/E/ D|
+E D E/E/ D|E D E/E/ D|E D E/E/ D|E D E/E/ D|
+`;
+
+			return {
+				allTunes: abc,
+				abcjs: null,
+			}
+		},
+	};
+</script>

docs/.vuepress/components/FieldSet.vue

@@ -0,0 +1,28 @@
+<template>
+	<fieldset>
+		<legend v-if="label">{{label}}</legend>
+		<slot name="controls"></slot>
+	</fieldset>
+</template>
+
+<script>
+export default {
+	name: "field-set",
+	props: {
+		label: {
+			type: String,
+			required: false,
+			default: ""
+		}
+	},
+}
+</script>
+
+<style scoped>
+fieldset {
+	margin-bottom: 1em;
+	display: inline-block;
+	width: calc(100% - 30px);
+}
+
+</style>

docs/.vuepress/components/FoundClasses.vue

@@ -0,0 +1,95 @@
+<template>
+	<div class="found-classes">
+		<div class="checkboxes">
+			<label v-for="cls in classNames"><input type="checkbox" v-model="checkedClasses" :value="cls"> {{cls}}</label>
+		</div>
+		<div class="language- my-code" v-if="selector">
+			var paper = document.querySelector("{{target}}");<br>
+			var elements = paper.querySelectorAll("{{selector}}");
+		</div>
+	</div>
+</template>
+
+<script>
+	import { nextTick } from 'vue';
+
+	export default {
+		name: "found-classes",
+		watch: {
+			target() {
+				this.redraw();
+			},
+			checkedClasses: function (val) {
+				const paper = document.querySelector(this.target);
+				const svg = paper.querySelector("svg");
+				const elements = svg.querySelectorAll('[fill]');
+				elements.forEach((el) => {
+					if (el.getAttribute("fill") !== "none")
+						el.setAttribute("fill", "#000000");
+					if (el.getAttribute("stroke") !== "none")
+						el.setAttribute("stroke", "#000000");
+				});
+
+				this.selector = (val.length > 0) ? "." + val.join(".") : "";
+				this.highlightSelectedClasses();
+			},
+		},
+		props: {
+			target: {
+				type: String,
+				required: true
+			},
+		},
+		data() {
+			return {
+				classNames: [],
+				checkedClasses: [],
+				selector: "",
+			}
+		},
+		mounted() {
+			nextTick(() => {
+				this.redraw();
+			});
+		},
+		methods: {
+			redraw() {
+				if (this.target) {
+					const svg = document.querySelector(this.target);
+					if (svg) {
+						const elements = svg.querySelectorAll('*');
+
+						let classes = [];
+						elements.forEach((el) => {
+							const arr = el.classList ? el.classList.value.split(" ") : [];
+							classes = classes.concat(arr);
+						});
+						this.classNames = [...new Set(classes)].filter(Boolean).sort();
+					}
+				}
+			},
+			highlightSelectedClasses() {
+				if (this.selector.length > 0) {
+					document.getElementById('paper').querySelectorAll(this.selector).forEach((el) => {
+						if (el.getAttribute("fill") !== "none")
+							el.setAttribute("fill", "#3D9AFC");
+						if (el.getAttribute("stroke") !== "none")
+							el.setAttribute("stroke", "#3D9AFC");
+					});
+				}
+			},
+		},
+	}
+</script>
+
+<style scoped>
+	.checkboxes {
+		display: flex;
+		flex-wrap: wrap;
+		margin-bottom: 20px;
+	}
+	label {
+		display: inline-block;
+		width: 180px;
+	}
+</style>

docs/.vuepress/components/NumTunes.vue

@@ -0,0 +1,27 @@
+<template>
+	<ClientOnly>
+		<div class="num-tunes">
+			<div class="language- my-code">
+				<span class="code-results">{{answer}}</span>
+				<span> = ABCJS.numberOfTunes(tunebookString);</span>
+			</div>
+		</div>
+	</ClientOnly>
+</template>
+
+<script>
+	export default {
+		name: "num-tunes",
+		data() {
+			return {
+				answer: "",
+				abcjs: null,
+			};
+		},
+		methods: {
+			redraw(tunebookString) {
+				this.answer = window.abcjs.numberOfTunes(tunebookString);
+			}
+		}
+	}
+</script>

docs/.vuepress/components/RadioGroup.vue

@@ -0,0 +1,111 @@
+<template>
+	<div class="radio-group">
+		<field-set :label="label">
+			<template v-slot:controls>
+				<label class="radio radio-gradient" v-for="choice in options">
+					<span class="radio__input">
+						<input type="radio" v-model="item"  :name="name" :value="choice.value">
+						<span class="radio__control"></span>
+					</span>
+					<span class="radio__label">{{choice.text}}</span>
+				</label>
+			</template>
+		</field-set>
+	</div>
+</template>
+
+<script>
+import FieldSet from "./FieldSet.vue";
+export default {
+	name: "radio-group",
+	components: {FieldSet},
+	props: {
+		label: {
+			type: String,
+			required: true
+		},
+		name: {
+			type: String,
+			required: true
+		},
+		options: {
+			type: Array,
+			required: true
+		}
+	},
+	computed: {
+		item:{
+			get(){
+				return this.$store.getters[this.name];
+			},
+			set(newValue){
+				this.$store.commit(this.name, newValue)
+			}
+		}
+	},
+}
+</script>
+
+<style scoped>
+.radio {
+	display: grid;
+	grid-template-columns: min-content auto;
+	grid-gap: 0.5em;
+	font-size: 1rem;
+	color: #000000;
+	margin-bottom: .5em;
+}
+.radio:focus-within .radio__label {
+	transform: scale(1.05);
+	opacity: 1;
+	margin-left: 8px;
+}
+
+.radio__label {
+	line-height: 1;
+	transition: 180ms all ease-in-out;
+	opacity: 0.8;
+}
+
+.radio__input {
+	display: flex;
+}
+.radio__input input {
+	opacity: 0;
+	width: 0;
+	height: 0;
+}
+.radio__input input:focus + .radio__control {
+	box-shadow: 0 0 0 0.05em #fff, 0 0 0.15em 0.1em #000000;
+}
+
+.radio-gradient input:checked + .radio__control {
+	background: radial-gradient(#000000 41%, #ffffff 41%) 0.1px;
+}
+
+.radio-before .radio__control {
+	display: grid;
+	place-items: center;
+}
+.radio-before input + .radio__control::before {
+	content: "";
+	width: 0.5em;
+	height: 0.5em;
+	box-shadow: inset 0.5em 0.5em #000000;
+	border-radius: 50%;
+	transition: 180ms transform ease-in-out;
+	transform: scale(0);
+}
+.radio-before input:checked + .radio__control::before {
+	transform: scale(1);
+}
+
+.radio__control {
+	display: block;
+	width: 1em;
+	height: 1em;
+	border-radius: 50%;
+	border: 0.1em solid #000000;
+	transform: translateY(-0.05em);
+}
+</style>

docs/.vuepress/components/RenderAbc.vue

@@ -0,0 +1,39 @@
+<template>
+	<ClientOnly>
+		<div ref='paper' class="render-abc"></div>
+	</ClientOnly>
+</template>
+
+<script>
+	import { waitForAbcjs } from '../wait-for-abcjs';
+	export default {
+		name: "render-abc",
+		props: {
+			abc: {
+				type: String,
+				required: true
+			},
+			options: {
+				type: Object,
+				required: false,
+				default: {}
+			}
+		},
+		data() {
+			return {
+				visualObj: null,
+				defaultOptions: { paddingleft: 0, paddingright: 0, responsive: "resize" },
+			};
+		},
+		async mounted() {
+			await waitForAbcjs()
+			const el = this.$refs.paper;
+			this.visualObj = abcjs.renderAbc(el, this.abc, this.defaultOptions, this.options);
+		},
+		methods: {
+			getObj() {
+				return this.visualObj[0];
+			}
+		}
+	}
+</script>

docs/.vuepress/components/RenderAudio.vue

@@ -0,0 +1,40 @@
+<template>
+	<ClientOnly>
+		<div ref='audio' class="render-audio"></div>
+	</ClientOnly>
+</template>
+
+<script>
+import { waitForAbcjs } from '../wait-for-abcjs';
+	export default {
+		name: "render-audio",
+		props: {
+			obj: {
+				type: Object,
+				required: false
+			}
+		},
+		data() {
+			return {
+				synthControl: null,
+			};
+		},
+		async mounted() {
+			await waitForAbcjs()
+			this.synthControl = new abcjs.synth.SynthController();
+			this.synthControl.load(this.$refs.audio, null, {displayLoop: true, displayRestart: true, displayPlay: true, displayProgress: true, displayWarp: true});
+			this.setTune();
+		},
+		methods: {
+			setTune() {
+				if (this.obj.tune)
+					this.synthControl.setTune(this.obj.tune.getObj(), false);
+				else {
+					setTimeout(() => {
+						this.setTune();
+					}, 100);
+				}
+			},
+		},
+	}
+</script>

docs/.vuepress/components/SandboxCode.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="sandbox-code">
+    <h3>Header</h3>
+    <code>{{declaration}}</code>
+    <h3>HTML</h3>
+    <code>{{sheetMusicHtml}}</code>
+    <h3>JavaScript</h3>
+    <code>{{sheetMusicJs}}</code>
+    <h3>CSS</h3>
+    <code>{{sheetMusicCss}}</code>
+  </div>
+</template>
+
+<script>
+import {mapGetters} from "vuex";
+
+export default {
+  name: 'sandbox-code',
+  computed: {
+    ...mapGetters([
+      'declaration',
+      'sheetMusicHtml',
+      'sheetMusicJs',
+      'sheetMusicCss',
+    ]),
+  },
+}
+</script>
+
+<style scoped>
+code {
+  background: black;
+  color: white;
+  width: 100%;
+  display: inline-block;
+  white-space: pre-wrap;
+  font-size: 1.1em;
+}
+</style>

docs/.vuepress/components/SandboxContainer.vue

@@ -0,0 +1,127 @@
+<template>
+	<div class="sandbox-container">
+		<nav>
+			<div class="tab-container">
+			<button @click="selected = 'options'" :class="optionsClass">Options</button>
+			<button @click="selected = 'demo'" :class="demoClass">Demo</button>
+			<button @click="selected = 'source'" :class="sourceClass">Source Code</button>
+			</div>
+			<button @click="download" class="download">Download Working Demo</button>
+		</nav>
+		<div class="options" v-if="selected === 'options'">
+		<sandbox-input></sandbox-input>
+		</div>
+
+		<div class="demo" v-if="selected === 'demo'">
+		<sandbox-output></sandbox-output>
+
+		</div>
+
+		<div class="source-code" v-if="selected === 'source'">
+		<sandbox-code ref="code"></sandbox-code>
+		</div>
+
+	</div>
+</template>
+
+<script>
+import {mapGetters, mapMutations} from "vuex";
+import SandboxInput from "./SandboxInput.vue";
+import SandboxOutput from "./SandboxOutput.vue";
+import SandboxCode from "./SandboxCode.vue";
+export default {
+	name: "sandbox-container",
+	components: {SandboxCode, SandboxOutput, SandboxInput},
+	computed: {
+		...mapGetters([
+			'fullDemo',
+			'filename',
+		]),
+		optionsClass() {
+			let k = [ 'tab' ];
+			if (this.selected === 'options')
+				k.push("selected");
+			return k;
+		},
+		demoClass() {
+			let k = [ 'tab' ];
+			if (this.selected === 'demo')
+				k.push("selected");
+			return k;
+		},
+		sourceClass() {
+			let k = [ 'tab' ];
+			if (this.selected === 'source')
+				k.push("selected");
+			return k;
+		},
+	},
+	data() {
+		return {
+			selected: 'options',
+		}
+	},
+	methods: {
+		...mapMutations({
+			'setIsDownloading' : 'isDownloading',
+		}),
+		download() {
+			this.setIsDownloading(true);
+			const url = "data:application/txt," + encodeURIComponent(this.fullDemo);
+			const link = document.createElement('a');
+			document.body.appendChild(link);
+			link.setAttribute("style", "display: none;");
+			link.href = url;
+			link.download = this.filename;
+			link.click();
+			window.URL.revokeObjectURL(url);
+			document.body.removeChild(link);
+			this.setIsDownloading(false);
+		}
+	}
+}
+</script>
+
+<style scoped>
+nav {
+	display: flex;
+	justify-content: space-between;
+	margin-bottom: 10px;
+}
+.tab-container {
+	border-bottom: 2px solid #5c5c5c;
+	padding: 0 10px;
+}
+button {
+	font-size: 1em;
+	padding: 5px 10px;
+	background: #9ce9c7;
+	border: 1px solid #5c5c5c;
+	border-radius: 4px;
+}
+
+button.tab {
+	border-radius: 8px 8px 0 0;
+	border-bottom: none;
+}
+button.tab.selected {
+	background: #ffffff;
+	font-weight: bold;
+}
+button:hover {
+	background-color: #3FB07C;
+	color: white;
+}
+button.selected:hover {
+	background: #ffffff;
+	color: inherit;
+}
+button.tab.selected:after {
+	content: " ";
+	position: absolute;
+	border-bottom: 2px solid white;
+	bottom: -2px;
+	width: 100%;
+	left: 0;
+}
+</style>

docs/.vuepress/components/SandboxInput.vue

@@ -0,0 +1,135 @@
+<template>
+	<div class="sandbox-input">
+		<div>
+		<field-set label="Setup">
+			<template v-slot:controls>
+				<check-box
+					label="I am using the Node ecosystem"
+					value="usingNode">
+				</check-box>
+			</template>
+		</field-set>
+
+		<field-set label="Visual">
+			<template v-slot:controls>
+				<check-box
+					label="Show sheet music"
+					:sub-options="[
+        { text: 'The width of the music should change with the width of the display', value: 'responsive' },
+        { text: 'Cursor should follow the playback', value: 'cursor' },
+        { text: 'Measures should hide as they finish playing', value: 'hideMeasures'},
+        { text: 'I want to style the chords like a fake book', value: 'jazzChords'}
+    ]"
+					value="sheetMusic">
+				</check-box>
+			</template>
+		</field-set>
+
+		<radio-group
+			label="Changes"
+			name="changes"
+			:options="[
+        { text: 'The tune is determined programmatically', value: 'programmatic' },
+        { text: 'User changes the tune with a visual editor', value: 'drag' },
+        { text: 'User changes the tune with a text editor', value: 'editor' },  ]">
+		</radio-group>
+
+		<field-set label="Audio Control">
+			<template v-slot:controls>
+				<check-box
+					label="Show playback widget"
+					:sub-options="[
+    { text: 'I want the large playback widget', value: 'large' },
+    { text: 'Include Loop', value: 'loop' },
+    { text: 'Include Restart', value: 'restart' },
+    { text: 'Include Play', value: 'play' },
+    { text: 'Include Progress', value: 'progress' },
+    { text: 'Include Warp', value: 'warp' },
+    { text: 'Include Clock', value: 'clock' },
+    ]"
+					value="playbackWidget"
+					:disabled="!hasSound"
+				>
+				</check-box>
+			</template>
+		</field-set>
+		</div>
+		<div>
+		<field-set label="Sound">
+			<template v-slot:controls>
+				<check-box
+					label="I want sound"
+					value="hasSound"
+					:sub-options="audioOptions"
+				></check-box>
+			</template>
+		</field-set>
+
+		<field-set label="Timing">
+			<template v-slot:controls>
+				<check-box
+					label="Listen for callbacks"
+					value="usingCallbacks"
+					:disabled="!sheetMusic"
+				>
+				</check-box>
+			</template>
+		</field-set>
+
+		</div>
+	</div>
+</template>
+
+<script>
+import {mapGetters} from "vuex";
+import FieldSet from "./FieldSet.vue";
+import CheckBox from "./CheckBox.vue";
+import RadioGroup from "./RadioGroup.vue";
+export default {
+	name: "sandbox-input",
+	components: {RadioGroup, CheckBox, FieldSet},
+	computed: {
+		...mapGetters([
+			'hasSound',
+			'sheetMusic',
+		]),
+	},
+	data() {
+		return {
+			audioOptions: [
+				{ text: 'I want a metronome accompaniment', value: 'metronome' },
+				{ text: 'I want to control the tempo programmatically', value: 'tempo' },
+				{ text: 'I want to create a stereo effect', value: 'stereo' },
+				{ text: 'I want to set the instrument(s) that are played back', value: 'instrument' },
+				{ text: 'I want to transpose', value: 'transpose' },
+				{ text: 'I want to turn off the chord accompaniment', value: 'noChords' },
+				{ text: 'I want to turn off a voice', value: 'noVoice' },
+				{ text: 'I want to be able to tweak the audio before it is created.', value: 'tweak', todo: true },
+				{ text: 'I want to download a MIDI file', value: 'midi' },
+				{ text: 'I want to play an arbitrary note without ABC', value: 'playImmediate' },
+				{ text: 'I want to switch tunes dynamically', value: 'switchTunes', todo: true },
+				{ text: 'I want to hide a voice visually but play it', value: 'hideVoice' },
+				{ text: 'I want to preload notes', value: 'preload', todo: true },
+				{ text: 'I want to loop some measures', value: 'loopMeasures', todo: true },
+				{ text: 'I want to add swing feel', value: 'swingFeel', todo: true },
+				{ text: 'I have my own soundfont', value: 'soundfont' },
+			]
+		}
+	}
+}
+</script>
+
+<style scoped>
+.sandbox-input {
+	display: flex;
+}
+.sandbox-input > div {
+	width: 50%;
+}
+.sandbox-input > div:first-child {
+	margin-right: 5px;
+}
+.sandbox-input > div:last-child {
+	margin-left: 5px;
+}
+</style>

docs/.vuepress/components/SandboxOutput.vue

@@ -0,0 +1,87 @@
+<template>
+	<div class="sandbox-output">
+		<div v-html="sheetMusicCss"></div>
+		<button class="run-demo" v-if="!running" @click="onloadCode">Run Demo</button>
+		<div :class="`demo ${running ? 'running' : ''}`" v-html="sheetMusicHtml"></div>
+	</div>
+</template>
+
+<script>
+import {mapGetters} from 'vuex'
+import { nextTick } from "vue"
+
+export default {
+	name: "sandbox-output",
+	computed: {
+		...mapGetters([
+			'sheetMusicCss',
+			'sheetMusicJsNode',
+			'sheetMusicHtml',
+		]),
+	},
+	watch: {
+		sheetMusicJsNode() {
+			this.running = false;
+		},
+	},
+	data() {
+		return {
+			running: false,
+		}
+	},
+	methods: {
+		onloadCode() {
+			this.running = true;
+			const abcString = `T: Cooley's
+M: 4/4
+L: 1/8
+R: reel
+K: Emin
+|:D2|"Em"EB{c}BA B2 EB|~B2 AB dBAG|"D"FDAD BDAD|FDAD dAFD|
+"Em"EBBA B2 EB|B2 AB defg|"D"afe^c dBAF|"Em"DEFD E2:|
+|:gf|"Em"eB B2 efge|eB B2 gedB|"D"A2 FA DAFA|A2 FA defg|
+"Em"eB B2 eBgB|eB B2 defg|"D"afe^c dBAF|"Em"DEFD E2:|`;
+
+			nextTick().then(() => {
+				eval(this.sheetMusicJsNode)
+			})
+		}
+	}
+}
+</script>
+
+<style>
+.sandbox-output .demo {
+	border: 1px solid #888888;
+	padding: 10px;
+	background: #fefffa;
+	box-shadow: -1px -1px 1px #aaaaaa, 1px 2px 4px #aaaaaa;
+	border-top: none;
+	border-left: none;
+	width: 800px;
+	transform: scale(.9);
+	transform-origin: top left;
+	transition: opacity 4s cubic-bezier(.25,.8,.25,1);
+	opacity: 0;
+}
+.sandbox-output .demo.running {
+	opacity: 1;
+}
+
+.sandbox-output #paper {
+	max-width: 780px;
+}
+
+.sandbox-output button {
+	font-size: 1em;
+	padding: 5px 10px;
+	background: #e2fdf1;
+	border: 1px solid #5c5c5c;
+	border-radius: 4px;
+}
+
+.sandbox-output button:hover {
+	background-color: #3FB07C;
+	color: white;
+}
+</style>

docs/.vuepress/components/ShowAndRenderAbc.vue

@@ -0,0 +1,42 @@
+<template>
+	<div class="show-and-render">
+		<div class="language- extra-class"><pre class="language-text"><code>{{abc}}</code></pre></div>
+		<render-abc :abc="abc" :options="options"></render-abc>
+	</div>
+</template>
+
+<script>
+	import { waitForAbcjs } from '../wait-for-abcjs';
+	import RenderAbc from "./RenderAbc.vue";
+	export default {
+		name: "show-and-render-abc",
+		components: {RenderAbc},
+		props: {
+			abc: {
+				type: String,
+				required: true
+			},
+			options: {
+				type: Object,
+				required: false,
+				default: {}
+			}
+		},
+		data() {
+			return {
+				visualObj: null,
+				defaultOptions: { paddingleft: 0, paddingright: 0, responsive: "resize" },
+			};
+		},
+		async mounted() {
+			await waitForAbcjs()
+			const el = this.$refs.paper;
+			this.visualObj = ABCJS.renderAbc(el, this.abc, this.defaultOptions);
+		},
+		methods: {
+			getObj() {
+				return this.visualObj[0];
+			}
+		}
+	}
+</script>

docs/.vuepress/components/TimingCallbacks.vue

@@ -0,0 +1,189 @@
+<template>
+	<div class="timing-callbacks">
+		<form @submit.prevent="startTiming">
+			<div class="language- my-code">
+				<div>timer = new abcjs.TimingCallbacks(visualObj, {</div>
+			<label>
+				<span>qpm: </span>
+				<input type="number" min="4" max="300" step="4" v-model="qpm">,
+			</label>
+			<label>
+				<span>extraMeasuresAtBeginning: </span>
+				<input type="number" min="0" max="4" v-model="extraMeasuresAtBeginning">,
+			</label>
+			<label>
+				<span>lineEndAnticipation: </span>
+				<input type="number" min="0" max="4000" step="100" v-model="lineEndAnticipation">,
+			</label>
+			<label>
+				<span>beatSubdivisions: </span>
+				<input type="number" min="1" max="8" v-model="beatSubdivisions">,
+			</label>
+				<div></div>
+				<div class="label-indent">beatCallback: function() {...},</div>
+				<div class="label-indent">eventCallback: function() {...},</div>
+				<div class="label-indent">lineEndCallback: function() {...}</div>
+				<div>}</div>
+			</div>
+			<button type="submit">Start()</button>
+		</form>
+		<button @click="stopTiming">Stop()</button>
+		<button @click="pauseTiming">Pause()</button>
+		<button @click="resetTiming">Reset()</button>
+		<button @click="setProgress">Set Progress(10)</button>
+		<div>
+			<h3>Output Stream:</h3>
+			<div class="output" v-html="outputStream"></div>
+		</div>
+	</div>
+</template>
+
+<script>
+	import { nextTick } from 'vue';
+
+	export default {
+		name: "timing-callbacks",
+		watch: {
+		},
+		props: {
+			target: {
+				type: String,
+				required: true
+			},
+		},
+		data() {
+			return {
+				abcjs: null,
+				visualObj: null,
+				timer: null,
+
+				outputStream: "",
+
+				qpm: 100,
+				extraMeasuresAtBeginning: 0,
+				lineEndAnticipation: 500,
+				beatSubdivisions: 4,
+			}
+		},
+		// mounted() {
+		// 	nextTick(() => {
+		// 		this.redraw();
+		// 	});
+		// },
+		methods: {
+			// redraw() {
+			// 	console.log("redraw")
+			// },
+			startTiming() {
+				const abc = document.getElementById("abc").value;
+				this.visualObj = window.abcjs.renderAbc("*", abc)[0];
+				console.log("startTiming",{
+					qpm: this.qpm,
+					extraMeasuresAtBeginning: this.extraMeasuresAtBeginning,
+					lineEndAnticipation: this.lineEndAnticipation,
+					beatSubdivisions: this.beatSubdivisions,
+				})
+				this.timer = new window.abcjs.TimingCallbacks(this.visualObj, {
+					qpm: this.qpm,
+					extraMeasuresAtBeginning: this.extraMeasuresAtBeginning,
+					lineEndAnticipation: this.lineEndAnticipation,
+					beatSubdivisions: this.beatSubdivisions,
+
+					beatCallback: this.beatCallback,
+					eventCallback: this.eventCallback,
+					lineEndCallback: this.lineEndCallback,
+				});
+				this.timer.start();
+				this.outputStream = "";
+			},
+			stopTiming() {
+				if (!this.timer) return;
+				this.timer.stop();
+			},
+			pauseTiming() {
+				if (!this.timer) return;
+				this.timer.pause();
+			},
+			resetTiming() {
+				if (!this.timer) return;
+				this.timer.reset();
+				this.outputStream = "";
+			},
+			setProgress() {
+				if (!this.timer) return;
+				this.timer.setProgress(10);
+				this.outputStream = "";
+			},
+			beatCallback(beatNumber, totalBeats, totalTime) {
+				this.outputStream += `<div class="beat-callback"><div class="header">BEAT CALLBACK</div>
+<div class="data">beatNumber = ${beatNumber}, totalBeats = ${totalBeats}, totalTime = ${totalTime}</div>
+				</div>`;
+			},
+			eventCallback(ev) {
+				if (ev) {
+					delete ev.elements;
+					this.outputStream += `<div class="event-callback"><div class="header">EVENT CALLBACK</div>
+	<div class="data">${JSON.stringify(ev, null, "\t")}</div>
+					</div>`;
+				}
+			},
+			lineEndCallback( info, event, details) {
+				this.outputStream += `<div class="line-end-callback"><div class="header">LINE END CALLBACK</div>
+<div class="data">${JSON.stringify(info, null, "\t")}</div>
+<div class="data">${JSON.stringify(event, null, "\t")}</div>
+<div class="data">${JSON.stringify(details, null, "\t")}</div>
+				</div>`;
+			},
+		},
+	}
+</script>
+
+<style scoped>
+	label, .label-indent {
+		display: block;
+		margin-left: 30px;
+		width: calc(100% - 30px);
+	}
+	label span {
+		display: inline-block;
+		width: 240px;
+	}
+	input {
+		width: 60px;
+	}
+	button {
+		background: #acffd9;
+		padding: 10px;
+		border-radius: 8px;
+		font-size: 1.2em;
+		border: none;
+		box-shadow: 3px 3px 3px #aaaaaa;
+		margin: 10px;
+	}
+</style>
+
+<style>
+	.timing-callbacks .output {
+		max-height: 600px;
+		overflow: auto;
+	}
+	.timing-callbacks .beat-callback {
+		padding: 4px;
+		margin-bottom: 4px;
+		background: #c8ffe6;
+	}
+	.timing-callbacks .event-callback {
+		padding: 4px;
+		margin-bottom: 4px;
+		background: #c8f2ff;
+	}
+	.timing-callbacks .line-end-callback {
+		padding: 4px;
+		margin-bottom: 4px;
+		background: #ffc8c8;
+	}
+	.timing-callbacks .output .header {
+		font-weight: bold;
+	}
+</style>
+

docs/.vuepress/components/TuneBookInfo.vue

@@ -0,0 +1,85 @@
+<template>
+	<ClientOnly>
+		<div class="tune-book-info">
+			<label>Choose Tune:
+			<select v-model="currentTune" @change="setInfo">
+				<option v-for="tune in tuneNames" :key="tune">{{tune}}</option>
+			</select>
+			</label>
+			<div class="language- my-code" v-if="currentTune">
+				<div>const info = tunebook.{{functionString}}("{{currentTune}}");</div>
+				<div>console.log(info);</div>
+				<div class="code-results" v-html="currentInfo"></div>
+			</div>
+		</div>
+	</ClientOnly>
+</template>
+
+<script>
+	export default {
+		name: "tune-book-info",
+		props: {
+			type: {
+				type: String,
+				required: true
+			},
+		},
+		computed: {
+			functionString() {
+				if (this.type === 'title') return "getTuneByTitle";
+				else return "getTuneById";
+			},
+		},
+		data() {
+			return {
+				tuneNames: [],
+				currentTune: "",
+				currentInfo: "",
+				abcjs: null,
+				tunebook: null,
+			};
+		},
+		methods: {
+			redraw(tunebookString) {
+				this.tunebook = new window.abcjs.TuneBook(tunebookString);
+				if (this.type === "title") {
+					this.tuneNames = this.tunebook.tunes.map(tune => {
+						return tune.title;
+					});
+				} else {
+					this.tuneNames = this.tunebook.tunes.map(tune => {
+						return tune.id;
+					});
+				}
+			},
+			setInfo() {
+				let info;
+				if (this.type === "title")
+					info = this.tunebook.getTuneByTitle(this.currentTune);
+				else
+					info = this.tunebook.getTuneById(this.currentTune);
+				this.currentInfo = `{
+&nbsp;&nbsp;id: "${info.id}",
+&nbsp;&nbsp;title: "${info.title}",
+&nbsp;&nbsp;startPos: ${info.startPos},
+&nbsp;&nbsp;abc: "${this.abcSnippet(info.abc)}",
+&nbsp;&nbsp;pure: "${this.abcSnippet(info.pure)}",
+}`;
+				this.currentInfo = this.currentInfo.replace(/\n/g, "<br>");
+			},
+			sanitizeAbcString(abc) {
+				return abc.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+			},
+			abcSnippet(abc) {
+				return this.sanitizeAbcString(abc.substring(0, 50)).replace(/\n/g, "\\n") + '...';
+			},
+		}
+	}
+</script>
+
+<style scoped>
+	label {
+		margin-bottom: 10px;
+		display: inline-block;
+	}
+</style>

docs/.vuepress/components/example-strings-css.js

@@ -0,0 +1,55 @@
+
+export const cssString = (hasAudio, hasCursor, hideMeasures, allowDragging, usingCallbacks) => {
+	let css = [];
+	if (hasAudio)
+		css.push(`<link rel="stylesheet" type="text/css" href="abcjs-audio.css">`);
+	if (hasCursor)
+		css.push(`<style>
+.abcjs-highlight {
+fill: #0a9ecc;
+}
+.abcjs-cursor {
+stroke: red;
+}
+</style>
+`);
+	if (hideMeasures) {
+		css.push(`<style>
+.hide-note {
+opacity: 0;
+transition: opacity .5s ease;
+}
+</style>
+`)
+	}
+	if (allowDragging) {
+		css.push(`<style>
+#source {
+font-size: 18px;
+max-width: 700px;
+overflow: auto;
+font-family: "Lucida Console", Monaco, monospace;
+white-space: nowrap;
+}
+.select {
+background-color: #FCF9BB;
+box-shadow: 0 0 1px black;
+}
+</style>
+`)
+	}
+	if (usingCallbacks) {
+		css.push(`<style>
+.clicked-info {
+height: 200px;
+}
+.instructions {
+color: red;
+font-size: 2em;
+font-style: italic;
+}
+</style>
+`)
+}
+	return css.join("\n");
+};

docs/.vuepress/components/example-strings-js-audio.js

@@ -0,0 +1,208 @@
+export const soundJsString = ((usingNode, getters) => {
+	if (!getters.hasSound)
+		return "";
+	const abcjs = usingNode ? "abcjs" : "ABCJS";
+
+	let output = `document.querySelector(".activate-audio").addEventListener("click", activate);
+function activate() {	
+	if (${abcjs}.synth.supportsAudio()) {
+`;
+
+	if (getters.playbackWidget) {
+		let controlOptions = []
+		if (getters.loop) controlOptions.push("\t\t\tdisplayLoop: true");
+		if (getters.restart) controlOptions.push("\t\t\tdisplayRestart: true");
+		if (getters.play) controlOptions.push("\t\t\tdisplayPlay: true");
+		if (getters.progress) controlOptions.push("\t\t\tdisplayProgress: true");
+		if (getters.warp) controlOptions.push("\t\t\tdisplayWarp: true");
+		if (getters.clock) controlOptions.push("\t\t\tdisplayClock: true");
+		output += `\t\tvar controlOptions = {\n${controlOptions.join(",\n")}\n\t\t};\n`
+	}
+	let options = [];
+	let optionsOptions = [];
+	if (getters.tempo) options.push("millisecondsPerMeasure: 800");
+	if (getters.stereo) optionsOptions.push("pan: [-.5,.5]");
+//	if (getters.instrument) options.push("instrument");
+//	if (getters.transpose) options.push("transpose");
+	if (getters.noChords) options.push("chordsOff: true");
+	if (getters.noVoice) options.push("voicesOff: true");
+//	if (getters.tweak) options.push("tweak");
+	if (getters.midi) options.push("midi");
+//	if (getters.playImmediate) options.push("immediate");
+//	if (getters.switchTunes) options.push("switchtunes");
+//	if (getters.hideVoice) options.push("hideVoice");
+//	if (getters.preload) options.push("preload");
+//	if (getters.loopMeasures) options.push("loopmeasures");
+	if (getters.swingFeel) options.push("swing");
+	if (getters.soundfont) optionsOptions.push("soundfont: '/path/to/soundfont/'");
+	options.push("options: {\n\t\t\t\t"+optionsOptions.join(",\n\t\t\t\t") + "\n\t\t\t}\n")
+
+	output += `\t\tvar synthControl = new ${abcjs}.synth.SynthController();\n`;
+	var cursorControl = getters.cursor ? "cursorControl" : "null";
+	output += `\t\tsynthControl.load("#audio", ${cursorControl}, controlOptions);\n`;
+
+	output += `		synthControl.disable(true);
+		var midiBuffer = new ${abcjs}.synth.CreateSynth();
+		midiBuffer.init({
+			visualObj: visualObj[0],
+			${options.join(",\n\t\t\t")}
+		}).then(function () {
+			synthControl.setTune(visualObj[0], true).then(function (response) {
+			document.querySelector(".abcjs-inline-audio").classList.remove("disabled");
+\t\t\t})
+		});
+`;
+
+	output += `\t} else {
+		console.log("audio is not supported on this browser");
+	};
+}	
+`
+	return output
+})
+
+const str = `
+if (ABCJS.synth.supportsAudio()) {
+\tvar synthControl = new ABCJS.synth.SynthController();
+\tsynthControl.load("#audio", 
+        cursorControl, 
+        {
+            displayLoop: true, 
+            displayRestart: true, 
+            displayPlay: true, 
+            displayProgress: true, 
+            displayWarp: true
+        }
+    );
+
+var audioParams = { chordsOff: true };
+
+\tvar createSynth = new ABCJS.synth.CreateSynth();
+\tcreateSynth.init({ visualObj: visualObj[0] }).then(function () {
+\t\tsynthControl.setTune(visualObj[0], false, audioParams).then(function () {
+\t\t\tconsole.log("Audio successfully loaded.")
+\t\t}).catch(function (error) {
+\t\t\tconsole.warn("Audio problem:", error);
+\t\t});
+\t}).catch(function (error) {
+\t\tconsole.warn("Audio problem:", error);
+\t});
+} else {
+\tdocument.querySelector("#audio").innerHTML = 
+        "Audio is not supported in this browser.";
+\t}
+}`
+////////////////////////////////////////////
+
+// TODO-PER: from sheetMusicJs. To be integrated:
+
+//       const synthOptions = {};  // will be passed to mySynth.init
+//       const audioParams = {};   // will be passed to synthControl.setTune()
+//       const animationOptions = {};    // will be passed to startAnimation()
+//
+//       if (getters.soundfont) {
+//         synthOptions.soundFontURL = 'URL';
+//         audioParams.soundFontURL = 'URL';
+//       }
+//
+//       // VISUAL
+//       const animation = animationCode(getters, animationOptions);
+//
+//       // AUDIO CONTROL
+//       const widget = audioControlCode(getters);
+//
+//       // SOUND
+//       soundCode(getters, animationOptions, visualOptions, audioParams);
+//
+//       // OTHER
+//       const other = otherCode(getters, synthOptions, audioParams);
+//
+//       // RETURNED CODE
+//       return `
+// var visualOptions = ${replaceFunctionPlaceholders(JSON.stringify(visualOptions))};
+// var audioParams = ${JSON.stringify(audioParams)};
+// var cursorControl = null;
+// var synthOptions = { visualObj: visualObj[0], ...${JSON.stringify(synthOptions)} };
+//
+// ${changes}
+//
+// // trigger these on a user gesture:
+// ${widget}
+//
+// ${animation} ${timing} ${other}`;
+
+////////////////////////////////////////////
+// TODO-PER: to be integrated
+
+// const audioControlCode = (sandbox) => {
+// 	if (!sandbox.playbackWidget) {
+// 		return `var mySynth = new ABCJS.synth.CreateSynth();
+// mySynth.init(synthOptions).then(() => {
+//   synth.prime().then(() => {
+//     start();
+//   });
+// });`;
+// 	}
+//
+// 	return `var mySynth = new ABCJS.synth.CreateSynth();
+// var synthControl = new synth.SynthController();
+// var mySynth = new ABCJS.synth.CreateSynth();
+//
+// mySynth.init(synthOptions).then(function() {
+//   synthControl.setTune(visualObj[0], true, audioParams)
+//   .then(function(){
+//     console.log('Audio successfully loaded.')
+//   }).catch(function(error) {
+//     console.warn('Audio problem: ', error);
+//   })
+// });
+//
+// synthControl.load('#audio', cursorControl, {
+//   displayLoop: ${sandbox.loop},
+//   displayRestart: ${sandbox.restart},
+//   displayPlay: ${sandbox.play},
+//   displayProgress: ${sandbox.progress},
+//   displayWarp: ${sandbox.warp},
+//   displayClock: ${sandbox.clock}
+// });`
+// }
+//
+// const soundCode = (sandbox, animationOptions, visualOptions, audioParams) => {
+// 	// TODO: How should a dev use these parameters if they do not have a playback widget to pass audioParams to?
+// 	if(sandbox.metronome) console.log('metronome')   // TODO
+// 	if(sandbox.tempo) {
+// 		animationOptions.bpm = 120;
+// 		audioParams.qpm = 120;
+// 	}
+// 	if(sandbox.stereo) console.log('stereo')   // TODO
+// 	if(sandbox.instrument) audioParams.program = 0;
+// 	if(sandbox.transpose) {
+// 		visualOptions.visualTranspose = 0;
+// 		audioParams.midiTranspose = 0;
+// 	}
+// 	if(sandbox.noChords) audioParams.chordsOff = true;
+// 	if(sandbox.noVoice) audioParams.voicesOff = true;
+// }
+//
+// const timingCode = (sandbox) => {
+// 	if (!sandbox.usingCallbacks) return '';
+//
+// 	// TODO: Currently, both objects will be instantiated if user selects "Listen for callbacks". Suggestion to present TimingCallbacks and CursorControl as separate options in the sandbox.
+// 	return `
+// var timingCallbacks = new abcjs.TimingCallbacks(visualObj, {});
+// cursorControl = new synth.CursorControl();`
+// }
+//
+// const otherCode = (sandbox, synthOptions, audioParams) => {
+// 	if(sandbox.tweak) {
+// 		synthOptions.sequenceCallback = 'callback to change audio before it is buffered';
+// 		audioParams.sequenceCallback = 'callback to change audio before it is buffered';
+// 	}
+// 	// TODO
+// 	if(sandbox.playImmediate) {
+// 		console.log('playImmediate')
+// 	}
+//
+// 	// TODO: Midi is deprecated.
+// 	return sandbox.midi ? `ABCJS.renderMidi("midi-download", abc, { generateDownload: true, generateInline: false });` : '';
+// }

docs/.vuepress/components/example-strings-js-cursor.js

@@ -0,0 +1,126 @@
+import {entryPoint} from "./example-strings-js";
+
+const cursor1 = `
+// This demonstrates two methods of indicating where the music is.
+	// 1) An element is created that is moved along for each note.
+	// 2) The currently being played note is given a class so that it can be transformed.
+	self.cursor = null; // This is the svg element that will move with the music.
+	self.rootSelector = rootSelector; // This is the same selector as the renderAbc call uses.
+
+	self.onStart = function() {
+		// This is called when the timer starts so we know the svg has been drawn by now.
+		// Create the cursor and add it to the sheet music's svg.
+		var svg = document.querySelector(self.rootSelector + " svg");
+		self.cursor = document.createElementNS("http://www.w3.org/2000/svg", "line");
+		self.cursor.setAttribute("class", "abcjs-cursor");
+		self.cursor.setAttributeNS(null, 'x1', 0);
+		self.cursor.setAttributeNS(null, 'y1', 0);
+		self.cursor.setAttributeNS(null, 'x2', 0);
+		self.cursor.setAttributeNS(null, 'y2', 0);
+		svg.appendChild(self.cursor);
+	};
+
+	self.removeSelection = function() {
+		// Unselect any previously selected notes.
+		var lastSelection = document.querySelectorAll(self.rootSelector + " .abcjs-highlight");
+		for (var k = 0; k < lastSelection.length; k++)
+			lastSelection[k].classList.remove("abcjs-highlight");
+	};
+
+`;
+
+const cursor2 = `
+		// This is called every time a note or a rest is reached and contains the coordinates of it.
+		if (ev.measureStart && ev.left === null)
+			return; // this was the second part of a tie across a measure line. Just ignore it.
+
+		self.removeSelection();
+
+		// Select the currently selected notes.
+		for (var i = 0; i < ev.elements.length; i++ ) {
+			var note = ev.elements[i];
+			for (var j = 0; j < note.length; j++) {
+				note[j].classList.add("abcjs-highlight");
+			}
+		}
+
+		// Move the cursor to the location of the current note.
+		if (self.cursor) {
+			self.cursor.setAttribute("x1", ev.left - 2);
+			self.cursor.setAttribute("x2", ev.left - 2);
+			self.cursor.setAttribute("y1", ev.top);
+			self.cursor.setAttribute("y2", ev.top + ev.height);
+		}
+`;
+
+const cursor3 = `		self.removeSelection();
+
+		if (self.cursor) {
+			self.cursor.setAttribute("x1", 0);
+			self.cursor.setAttribute("x2", 0);
+			self.cursor.setAttribute("y1", 0);
+			self.cursor.setAttribute("y2", 0);
+		}
+`;
+
+const hide1 = `		if (ev.measureStart) {
+			var elements = document.querySelectorAll('.abcjs-mm' + ev.measureNumber);
+			for (var j = 0; j < elements.length; j++) {
+				const element = elements[j];
+				if (!element.classList.contains('abcjs-bar'))
+					element.classList.add('hide-note');
+			}
+		}
+`;
+
+const hide2 = `
+			var elements = document.querySelectorAll('.hide-note');
+			for (var j = 0; j < elements.length; j++) {
+				const element = elements[j];
+					element.classList.remove('hide-note');
+			}
+`;
+
+const cursorString = (usingNode, hasCursor, hideMeasures) => {
+	return `function CursorControl(rootSelector) {
+	var self = this;
+${hasCursor ? cursor1 : '' }
+	self.onEvent = function(ev) {
+${hasCursor ? cursor2 : '' }
+	${hideMeasures ? hide1 : '' }
+	
+	};
+	self.onFinished = function() {
+	${hasCursor ? cursor3 : '' }
+	${hideMeasures ? hide2 : '' }
+	};
+}
+
+var cursorControl = new CursorControl("#paper");
+
+document.querySelector(".start").addEventListener("click", startTimer);
+
+function onEvent(ev) {
+if (ev)
+cursorControl.onEvent(ev);
+else
+cursorControl.onFinished();
+}
+
+function startTimer() {
+	${hasCursor ? 'cursorControl.onStart();' : '' }
+
+var timingCallbacks = new ${usingNode ? 'abcjs' : 'ABCJS'}.TimingCallbacks(visualObj[0], {
+	eventCallback: onEvent
+});
+timingCallbacks.start();
+}
+`
+}
+
+export const cursorJsString = (usingNode, hasCursor, hideMeasures) => {
+	if (!hasCursor && !hideMeasures)
+		return '';
+	return cursorString(usingNode, hasCursor, hideMeasures);
+};
+

docs/.vuepress/components/example-strings-js-drag.js

@@ -0,0 +1,100 @@
+export const dragJsString = (usingNode, allowDragging) => {
+	if (!allowDragging)
+		return '';
+	
+	return `function sanitize(str) {
+return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
+}
+function formatAbc(start, end) {
+var abc;
+if (start < 0 || end < 0)
+abc = sanitize(abcString);
+else {
+abc = sanitize(abcString.substring(0, start)) +
+'<span class="select">' +
+sanitize(abcString.substring(start, end)) +
+'</span>' +
+sanitize(abcString.substring(end));
+}
+var el = document.getElementById("source");
+el.innerHTML = abc.replace(/\\n/g,"<br>");
+}
+function draw() {
+var options = {
+add_classes: true,
+selectionColor: "green",
+dragColor: "blue",
+clickListener: clickListener,
+dragging: true,
+selectTypes: [ 'note' ]
+};
+
+${usingNode ? 'abcjs' : 'ABCJS'}.renderAbc("paper", abcString, options);
+}
+
+var allPitches = [
+'C,,,,', 'D,,,,', 'E,,,,', 'F,,,,', 'G,,,,', 'A,,,,', 'B,,,,',
+'C,,,', 'D,,,', 'E,,,', 'F,,,', 'G,,,', 'A,,,', 'B,,,',
+'C,,', 'D,,', 'E,,', 'F,,', 'G,,', 'A,,', 'B,,',
+'C,', 'D,', 'E,', 'F,', 'G,', 'A,', 'B,',
+'C', 'D', 'E', 'F', 'G', 'A', 'B',
+'c', 'd', 'e', 'f', 'g', 'a', 'b',
+"c'", "d'", "e'", "f'", "g'", "a'", "b'",
+"c''", "d''", "e''", "f''", "g''", "a''", "b''",
+"c'''", "d'''", "e'''", "f'''", "g'''", "a'''", "b'''",
+"c''''", "d''''", "e''''", "f''''", "g''''", "a''''", "b''''"
+];
+
+function moveNote(note, step) {
+var x =allPitches.indexOf(note);
+if (x >= 0)
+return allPitches[x-step];
+return note;
+}
+
+function tokenize(str) {
+var arr = str.split(/(!.+?!|".+?")/);
+var output = [];
+for (var i = 0; i < arr.length; i++) {
+var token = arr[i];
+if (token.length > 0) {
+if (token[0] !== '"' && token[0] !== '!') {
+var arr2 = arr[i].split(/([A-Ga-g][,']*)/);
+output = output.concat(arr2);
+} else
+output.push(token);
+}
+}
+return output;
+}
+
+var selectionCallback;
+var currentIndex = -1;
+var maxIndex = -1;
+
+function clickListener(abcelem, tuneNumber, classes, analysis, drag, mouseEvent) {
+if (drag) {
+selectionCallback = drag.setSelection;
+currentIndex = drag.index;
+maxIndex = drag.max;
+}
+if (abcelem.pitches && drag && drag.step && abcelem.startChar >= 0 && abcelem.endChar >= 0) {
+var originalText = abcString.substring(abcelem.startChar, abcelem.endChar);
+var arr = tokenize(originalText);
+// arr now contains elements that are either a chord, a decoration, a note name, or anything else. It can be put back to its original string with .join("").
+for (var i = 0; i < arr.length; i++) {
+arr[i] = moveNote(arr[i], drag.step);
+}
+var newText = arr.join("");
+
+abcString = abcString.substring(0, abcelem.startChar) + newText + abcString.substring(abcelem.endChar);
+formatAbc(abcelem.startChar, abcelem.endChar);
+draw();
+} else if (abcelem.startChar >= 0 && abcelem.endChar >= 0)
+formatAbc(abcelem.startChar, abcelem.endChar);
+}
+
+formatAbc(-1,-1);
+draw();
+`
+};

docs/.vuepress/components/example-strings-js.js

@@ -0,0 +1,79 @@
+export function entryPoint(usingNode) {
+	return usingNode ? 'abcjs' : 'ABCJS';
+}
+
+function target(sheetMusic) {
+	return sheetMusic ? 'paper' : '*';
+}
+
+export const renderAbcString = (usingNode, hasRender, showMusic, visualOptions) => {
+	if (!hasRender)
+		return '';
+
+	return `var visualOptions = ${visualOptions};
+var visualObj = ${entryPoint(usingNode)}.renderAbc("${target(showMusic)}", abcString, visualOptions);`
+};
+
+export const editorJsString = (usingNode, hasEditor, showMusic) => {
+	if (!hasEditor)
+		return '';
+
+	return `var options = {};
+var editor = new ${entryPoint(usingNode)}.Editor("abc", {
+  canvas_id: "${target(showMusic)}",
+  warnings_id: "warnings",
+  abcjsParams: options
+});`
+};
+
+export const visualOptionsString = (responsive, callbacks, metronome, hideMeasures, jazzChords) => {
+	let options = [];
+	if (responsive)
+		options.push("responsive: 'resize'");
+	if (callbacks) {
+		options.push("clickListener: clickListener");
+	}
+	if (callbacks || hideMeasures) {
+		options.push("add_classes: true");
+	}
+	if (jazzChords) {
+		options.push("jazzchords: true");
+	}
+	if (metronome)
+		options.push("drum: 'dddd 76 77 77 77 60 30 30 30'");
+	return "{ " + options.join(", ") + " }";
+};
+
+export const clickListenerJsString = (callbacks) => {
+	if (!callbacks)
+		return '';
+	return `function clickListener(abcelem, tuneNumber, classes, analysis, drag, mouseEvent) {
+var output = "abcelem: [Object]<br>tuneNumber: " + tuneNumber + "<br>classes: " + classes + "<br>analysis: " + JSON.stringify(analysis) + "<br>drag: " + JSON.stringify(drag) + "<br>mouseEvent: { clientX: " + mouseEvent.clientX + ", clientY: " + mouseEvent.clientY + " }";
+document.querySelector(".clicked-info").innerHTML = "<div class='label'>Clicked info:</div>" + output;
+}
+`;
+};
+
+
+///////////////////////////
+
+const replaceFunctionPlaceholders = (stringifiedObject) => {
+	return stringifiedObject
+		.replace("\"__FUNCTION_PLACEHOLDER_CLICK_LISTENER__\"", CLICK_LISTENER_FUNCTION);
+}
+
+const animationCode = (sandbox, animationOptions) => {
+	if (sandbox.cursor || sandbox.hideMeasures) {
+		if (sandbox.cursor) {
+			animationOptions.showCursor = true;
+		}
+		if (sandbox.hideMeasures) {
+			animationOptions.hideFinishedMeasures = true;
+		}
+		// TODO: startAnimation() is deprecated.
+		return `
+ABCJS.startAnimation(paper, abc_editor.tunes[0], ${JSON.stringify(animationOptions)});`
+	}
+
+	return '';
+}

docs/.vuepress/components/example-strings.js

@@ -0,0 +1,107 @@
+export const setupString = (isNode) => {
+	if (isNode)
+		return 'import abcjs from "abcjs"';
+	else
+		return '<script src="abcjs-basic.js" type="text/javascript"></script>';
+};
+
+export const paperString = (showMusic) => {
+	return showMusic ? '<div id="paper"></div>' : '';
+};
+
+export const editorString = (showEditor) => {
+	return showEditor ? '<textarea id="abc" cols="80" rows="12" spellcheck="false">X: 1\n' +
+	'T: Cooley\'s\n' +
+	'M: 4/4\n' +
+	'L: 1/8\n' +
+	'R: reel\n' +
+	'K: Emin\n' +
+	'|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|\n' +
+	'EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|\n' +
+	'|:gf|eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|\n' +
+	'eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2:|\n' +
+	'</textarea>\n' +
+	'\n' +
+	'<div id="warnings">No errors</div>' : '';
+};
+
+export const audioString = (showAudio, isLarge) => {
+	let audio = '';
+	if (showAudio) {
+		if (isLarge) {
+			audio = `<div id="audio" class="abcjs-large"></div>`;
+		}
+		else audio = '<div id="audio"></div>';
+		audio += `<button class="activate-audio">Activate Audio</button>`
+	}
+	return audio;
+};
+
+export const midiString = (showMidi) => {
+	return showMidi ? '<div id="midi-download"></div>' : '';
+};
+
+export const clickListenerHtmlString = (clickListener) => {
+	return clickListener ? '<div class="clicked-info"><div class="instructions">Click on a note to see information about that note.</div></div>' : '';
+};
+
+export const dragExplanationHtmlString = (allowDragging) => {
+	return allowDragging ? '<p>Drag a note up and down and watch the source code change to match it.</p>' : '';
+};
+
+export const dragHtmlString = (allowDragging) => {
+	return allowDragging ? '<h2>Source</h2>\n' +
+		'<div id="source"></div>' : '';
+};
+
+export const startTimerHtmlString = (hasTimer) => {
+	if (!hasTimer)
+		return '';
+	return '<button class="start">Start</button>';
+};
+
+export const preambleString = (title) => {
+	return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta http-equiv="x-ua-compatible" content="ie=edge">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+
+<title>${title}</title>
+`
+};
+
+export const preamble2String = (hasEditor) => {
+	const abcString = hasEditor ? '' : `var abcString = "T: Cooley's\\n" +
+"M: 4/4\\n" +
+"L: 1/8\\n" +
+"R: reel\\n" +
+"K: Emin\\n" +
+"|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|\\n" +
+"EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|\\n" +
+"|:gf|eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|\\n" +
+"eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2:|";`;
+
+	return `<script src="abcjs-basic.js" type="text/javascript"></script>
+<script type="text/javascript">
+${abcString}
+
+function load() {
+`
+};
+
+export const middleString = (title) => `}\n</script>
+</head>
+<body onload="load()">
+<header>
+<h1>${title}</h1>
+</header>
+<div class="container">
+`;
+
+export const postAmbleString = () => `</div>
+</body>
+</html>
+`;
+

docs/.vuepress/config.js

@@ -0,0 +1,16 @@
+import { defaultTheme } from '@vuepress/theme-default'
+export default {
+	base: "/abcjs/",
+	title: "abcjs",
+	description: "JavaScript library for displaying sheet music in a browser.",
+	theme: defaultTheme({
+		logo: '/img/abcjs_comp_extended_08.svg',
+		displayAllHeaders: true,
+		sidebar: require("./sidebar")
+	}),
+	head: [
+		['link', { rel: 'icon', href: '/abcjs/favicon.ico' }],
+		['link', { rel:"stylesheet", type: "text/css", href: 'https://paulrosen.github.io/abcjs/abcjs-audio.css'}],
+		['script', { src: "https://paulrosen.github.io/abcjs/dist/abcjs-basic.js", type:"text/javascript" }]
+	],
+};