abcjs 6.2.3 → 6.4.0

package/dist/abcjs-basic.js

@@ -54,6 +54,7 @@ Object.keys(tuneBook).forEach(function (key) {
   abcjs[key] = tuneBook[key];
 });
 abcjs.renderAbc = __webpack_require__(/*! ./src/api/abc_tunebook_svg */ "./src/api/abc_tunebook_svg.js");
+abcjs.tuneMetrics = __webpack_require__(/*! ./src/api/tune-metrics */ "./src/api/tune-metrics.js");
 abcjs.TimingCallbacks = __webpack_require__(/*! ./src/api/abc_timing_callbacks */ "./src/api/abc_timing_callbacks.js");
 var glyphs = __webpack_require__(/*! ./src/write/creation/glyphs */ "./src/write/creation/glyphs.js");
 abcjs.setGlyph = glyphs.setSymbol;
@@ -69,6 +70,7 @@ var supportsAudio = __webpack_require__(/*! ./src/synth/supports-audio */ "./src
 var playEvent = __webpack_require__(/*! ./src/synth/play-event */ "./src/synth/play-event.js");
 var SynthController = __webpack_require__(/*! ./src/synth/synth-controller */ "./src/synth/synth-controller.js");
 var getMidiFile = __webpack_require__(/*! ./src/synth/get-midi-file */ "./src/synth/get-midi-file.js");
+var midiRenderer = __webpack_require__(/*! ./src/synth/abc_midi_renderer */ "./src/synth/abc_midi_renderer.js");
 abcjs.synth = {
   CreateSynth: CreateSynth,
   instrumentIndexToName: instrumentIndexToName,
@@ -81,7 +83,8 @@ abcjs.synth = {
   supportsAudio: supportsAudio,
   playEvent: playEvent,
   getMidiFile: getMidiFile,
-  sequence: sequence
+  sequence: sequence,
+  midiRenderer: midiRenderer
 };
 abcjs['Editor'] = __webpack_require__(/*! ./src/edit/abc_editor */ "./src/edit/abc_editor.js");
 abcjs['EditArea'] = __webpack_require__(/*! ./src/edit/abc_editarea */ "./src/edit/abc_editarea.js");
@@ -203,17 +206,42 @@ module.exports = animation;
  * where plugin represents a plugin instance 
  * 
  */
-var ViolinTablature = __webpack_require__(/*! ../tablatures/instruments/violin/tab-violin */ "./src/tablatures/instruments/violin/tab-violin.js");
-var GuitarTablature = __webpack_require__(/*! ../tablatures/instruments/guitar/tab-guitar */ "./src/tablatures/instruments/guitar/tab-guitar.js");
+var StringTablature = __webpack_require__(/*! ../tablatures/instruments/tab-string */ "./src/tablatures/instruments/tab-string.js");
 
 /* extend the table below when adding a new instrument plugin */
 
 // Existing tab classes 
 var pluginTab = {
-  'violin': 'ViolinTab',
-  'fiddle': 'ViolinTab',
-  'mandolin': 'ViolinTab',
-  'guitar': 'GuitarTab'
+  'violin': {
+    name: 'StringTab',
+    defaultTuning: ['G,', 'D', 'A', 'e'],
+    isTabBig: false,
+    tabSymbolOffset: 0
+  },
+  'fiddle': {
+    name: 'StringTab',
+    defaultTuning: ['G,', 'D', 'A', 'e'],
+    isTabBig: false,
+    tabSymbolOffset: 0
+  },
+  'mandolin': {
+    name: 'StringTab',
+    defaultTuning: ['G,', 'D', 'A', 'e'],
+    isTabBig: false,
+    tabSymbolOffset: 0
+  },
+  'guitar': {
+    name: 'StringTab',
+    defaultTuning: ['E,', 'A,', 'D', 'G', 'B', 'e'],
+    isTabBig: true,
+    tabSymbolOffset: 0
+  },
+  'fiveString': {
+    name: 'StringTab',
+    defaultTuning: ['C,', 'G,', 'D', 'A', 'e'],
+    isTabBig: false,
+    tabSymbolOffset: -.95
+  }
 };
 var abcTablatures = {
   inited: false,
@@ -258,7 +286,7 @@ var abcTablatures = {
         var tabName = pluginTab[instrument];
         var plugin = null;
         if (tabName) {
-          plugin = this.plugins[tabName];
+          plugin = this.plugins[tabName.name];
         }
         if (plugin) {
           if (params.visualTranspose != 0) {
@@ -270,7 +298,8 @@ var abcTablatures = {
             classz: plugin,
             tuneNumber: tuneNumber,
             params: args,
-            instance: null
+            instance: null,
+            tabType: tabName
           };
           // proceed with tab plugin  init 
           // plugin.init(tune, tuneNumber, args, ii);
@@ -296,20 +325,50 @@ var abcTablatures = {
    */
   layoutTablatures: function layoutTablatures(renderer, abcTune) {
     var tabs = abcTune.tablatures;
+
     // chack tabs request for each staffs
+    var staffLineCount = 0;
+
+    // Clear the suppression flag
+    if (tabs && tabs.length > 0) {
+      var nTabs = tabs.length;
+      for (var kk = 0; kk < nTabs; ++kk) {
+        if (tabs[kk] && tabs[kk].params.firstStaffOnly) {
+          tabs[kk].params.suppress = false;
+        }
+      }
+    }
     for (var ii = 0; ii < abcTune.lines.length; ii++) {
       var line = abcTune.lines[ii];
+      if (line.staff) {
+        staffLineCount++;
+      }
+
+      // MAE 27Nov2023
+      // If tab param "firstStaffOnly", remove the tab label after the first staff
+      if (staffLineCount > 1) {
+        if (tabs && tabs.length > 0) {
+          var nTabs = tabs.length;
+          for (var kk = 0; kk < nTabs; ++kk) {
+            if (tabs[kk].params.firstStaffOnly) {
+              // Set the staff draw suppression flag
+              tabs[kk].params.suppress = true;
+            }
+          }
+        }
+      }
       var curStaff = line.staff;
       if (curStaff) {
+        var maxStaves = curStaff.length;
         for (var jj = 0; jj < curStaff.length; jj++) {
-          if (tabs[jj]) {
+          if (tabs[jj] && jj < maxStaves) {
             // tablature requested for staff
             var tabPlugin = tabs[jj];
             if (tabPlugin.instance == null) {
               tabPlugin.instance = new tabPlugin.classz();
               // plugin.init(tune, tuneNumber, args, ii);
               // call initer first
-              tabPlugin.instance.init(abcTune, tabPlugin.tuneNumber, tabPlugin.params, jj);
+              tabPlugin.instance.init(abcTune, tabPlugin.tuneNumber, tabPlugin.params, jj, tabPlugin.tabType);
             }
             // render next
             tabPlugin.instance.render(renderer, line, jj);
@@ -324,8 +383,7 @@ var abcTablatures = {
   init: function init() {
     // just register plugin hosted by abcjs 
     if (!this.inited) {
-      this.register(new ViolinTablature());
-      this.register(new GuitarTablature());
+      this.register(new StringTablature());
       this.inited = true;
     }
   }
@@ -1031,6 +1089,32 @@ module.exports = renderAbc;
 
 /***/ }),
 
+/***/ "./src/api/tune-metrics.js":
+/*!*********************************!*\
+  !*** ./src/api/tune-metrics.js ***!
+  \*********************************/
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+var tunebook = __webpack_require__(/*! ./abc_tunebook */ "./src/api/abc_tunebook.js");
+var EngraverController = __webpack_require__(/*! ../write/engraver-controller */ "./src/write/engraver-controller.js");
+var tuneMetrics = function tuneMetrics(abc, params) {
+  function callback(div, tune, tuneNumber, abcString) {
+    div = document.createElement("div");
+    div.setAttribute("style", "visibility: hidden;");
+    document.body.appendChild(div);
+    var engraver_controller = new EngraverController(div, params);
+    var widths = engraver_controller.getMeasureWidths(tune);
+    div.parentNode.removeChild(div);
+    return {
+      sections: widths
+    };
+  }
+  return tunebook.renderEngine(callback, "*", abc, params);
+};
+module.exports = tuneMetrics;
+
+/***/ }),
+
 /***/ "./src/const/key-accidentals.js":
 /*!**************************************!*\
   !*** ./src/const/key-accidentals.js ***!
@@ -1609,9 +1693,12 @@ var Tune = function Tune() {
           eventHash["event" + voiceTimeMilliseconds].measureStart = true;
           nextIsBar = false;
         }
-        if (isTiedToNext) isTiedState = voiceTimeMilliseconds;
+        // TODO-PER: There doesn't seem to be a harm in letting ties be two different notes and it fixes a bug when a tie goes to a new line. If there aren't other problems with this change, then the variable can be removed completely. 
+        // if (isTiedToNext)
+        // 	isTiedState = voiceTimeMilliseconds;
       }
     }
+
     return {
       isTiedState: isTiedState,
       duration: realDuration / timeDivider,
@@ -1839,6 +1926,14 @@ var Tune = function Tune() {
   this.deline = function (options) {
     return delineTune(this.lines, options);
   };
+  this.findSelectableElement = function (target) {
+    if (this.engraver && this.engraver.selectables) return this.engraver.findSelectableElement(target);
+    return null;
+  };
+  this.getSelectableArray = function () {
+    if (this.engraver && this.engraver.selectables) return this.engraver.selectables;
+    return [];
+  };
 };
 module.exports = Tune;
 
@@ -2094,7 +2189,7 @@ try {
   // if we aren't in a browser, this code will crash, but it is not needed then either.
 }
 var EditArea = function EditArea(textareaid) {
-  this.textarea = document.getElementById(textareaid);
+  if (typeof textareaid === "string") this.textarea = document.getElementById(textareaid);else this.textarea = textareaid;
   this.initialText = this.textarea.value;
   this.isDragging = false;
 };
@@ -2722,7 +2817,9 @@ var Parse = function Parse() {
       setupEvents: tune.setupEvents,
       setTiming: tune.setTiming,
       setUpAudio: tune.setUpAudio,
-      deline: tune.deline
+      deline: tune.deline,
+      findSelectableElement: tune.findSelectableElement,
+      getSelectableArray: tune.getSelectableArray
     };
     if (tune.lineBreaks) t.lineBreaks = tune.lineBreaks;
     if (tune.visualTranspose) t.visualTranspose = tune.visualTranspose;
@@ -4169,31 +4266,30 @@ var parseDirective = {};
     }
   };
   parseDirective.parseFontChangeLine = function (textstr) {
+    // We don't want to match two dollar signs, so change those temporarily
+    textstr = textstr.replace(/\$\$/g, "\x03");
     var textParts = textstr.split('$');
     if (textParts.length > 1 && multilineVars.setfont) {
-      var textarr = [{
-        text: textParts[0]
-      }];
+      var textarr = [];
+      if (textParts[0] !== '')
+        // did the original string start with `$`?
+        textarr.push({
+          text: textParts[0]
+        });
       for (var i = 1; i < textParts.length; i++) {
         if (textParts[i][0] === '0') textarr.push({
-          text: textParts[i].substring(1)
-        });else if (textParts[i][0] === '1' && multilineVars.setfont[1]) textarr.push({
-          font: multilineVars.setfont[1],
-          text: textParts[i].substring(1)
-        });else if (textParts[i][0] === '2' && multilineVars.setfont[2]) textarr.push({
-          font: multilineVars.setfont[2],
-          text: textParts[i].substring(1)
-        });else if (textParts[i][0] === '3' && multilineVars.setfont[3]) textarr.push({
-          font: multilineVars.setfont[3],
-          text: textParts[i].substring(1)
-        });else if (textParts[i][0] === '4' && multilineVars.setfont[4]) textarr.push({
-          font: multilineVars.setfont[4],
-          text: textParts[i].substring(1)
-        });else textarr[textarr.length - 1].text += '$' + textParts[i];
-      }
-      if (textarr.length > 1) return textarr;
-    }
-    return textstr;
+          text: textParts[i].substring(1).replace(/\x03/g, "$$")
+        });else {
+          var whichFont = parseInt(textParts[i][0], 10);
+          if (multilineVars.setfont[whichFont]) textarr.push({
+            font: multilineVars.setfont[whichFont],
+            text: textParts[i].substring(1).replace(/\x03/g, "$$")
+          });else textarr[textarr.length - 1].text += '$' + textParts[i].replace(/\x03/g, "$$");
+        }
+      }
+      return textarr;
+    }
+    return textstr.replace(/\x03/g, "$$");
   };
   var positionChoices = ['auto', 'above', 'below', 'hidden'];
   parseDirective.addDirective = function (str) {
@@ -4241,6 +4337,9 @@ var parseDirective = {};
       case "jazzchords":
         tune.formatting.jazzchords = true;
         break;
+      case "accentAbove":
+        tune.formatting.accentAbove = true;
+        break;
       case "germanAlphabet":
         tune.formatting.germanAlphabet = true;
         break;
@@ -4294,6 +4393,7 @@ var parseDirective = {};
       case "pageheight":
       case "pagewidth":
       case "rightmargin":
+      case "stafftopmargin":
       case "staffsep":
       case "staffwidth":
       case "subtitlespace":
@@ -4432,7 +4532,7 @@ var parseDirective = {};
         if (sfTokens.length >= 4) {
           if (sfTokens[0].token === '-' && sfTokens[1].type === 'number') {
             var sfNum = parseInt(sfTokens[1].token);
-            if (sfNum >= 1 && sfNum <= 4) {
+            if (sfNum >= 1 && sfNum <= 9) {
               if (!multilineVars.setfont) multilineVars.setfont = [];
               sfTokens.shift();
               sfTokens.shift();
@@ -4694,6 +4794,10 @@ var parseDirective = {};
             if (tokens.length !== 1 || tokens[0].type !== 'number') warn("Directive \"" + cmd + "\" requires a number as a parameter.");
             tune.formatting.fontboxpadding = tokens[0].floatt;
             break;
+          case "stafftopmargin":
+            if (tokens.length !== 1 || tokens[0].type !== 'number') warn("Directive \"" + cmd + "\" requires a number as a parameter.");
+            tune.formatting.stafftopmargin = tokens[0].floatt;
+            break;
           case "stretchlast":
             var sl = parseStretchLast(tokens);
             if (sl.value !== undefined) tune.formatting.stretchlast = sl.value;
@@ -4750,17 +4854,15 @@ var ParseHeader = function ParseHeader(tokenizer, warn, multilineVars, tune, tun
     parseDirective.initialize(tokenizer, warn, multilineVars, tune, tuneBuilder);
   };
   this.reset(tokenizer, warn, multilineVars, tune);
-  this.setTitle = function (title) {
-    if (multilineVars.hasMainTitle) tuneBuilder.addSubtitle(tokenizer.translateString(tokenizer.stripComment(title)), {
+  this.setTitle = function (title, origSize) {
+    if (multilineVars.hasMainTitle) tuneBuilder.addSubtitle(title, {
       startChar: multilineVars.iChar,
-      endChar: multilineVars.iChar + title.length + 2
+      endChar: multilineVars.iChar + origSize + 2
     }); // display secondary title
     else {
-      var titleStr = tokenizer.translateString(tokenizer.theReverser(tokenizer.stripComment(title)));
-      if (multilineVars.titlecaps) titleStr = titleStr.toUpperCase();
-      tuneBuilder.addMetaText("title", titleStr, {
+      tuneBuilder.addMetaText("title", title, {
         startChar: multilineVars.iChar,
-        endChar: multilineVars.iChar + title.length + 2
+        endChar: multilineVars.iChar + origSize + 2
       });
       multilineVars.hasMainTitle = true;
     }
@@ -5120,12 +5222,13 @@ var ParseHeader = function ParseHeader(tokenizer, warn, multilineVars, tune, tun
           if (result.foundKey && tuneBuilder.hasBeginMusic()) tuneBuilder.appendStartingElement('key', startChar, endChar, parseKeyVoice.fixKey(multilineVars.clef, multilineVars.key));
           return [e - i + 1 + ws];
         case "[P:":
+          var part = parseDirective.parseFontChangeLine(line.substring(i + 3, e));
           if (startLine || tune.lines.length <= tune.lineNum) multilineVars.partForNextLine = {
-            title: line.substring(i + 3, e),
+            title: part,
             startChar: startChar,
             endChar: endChar
           };else tuneBuilder.appendElement('part', startChar, endChar, {
-            title: line.substring(i + 3, e)
+            title: part
           });
           return [e - i + 1 + ws];
         case "[L:":
@@ -5216,28 +5319,34 @@ var ParseHeader = function ParseHeader(tokenizer, warn, multilineVars, tune, tun
   };
   this.parseHeader = function (line) {
     var field = metaTextHeaders[line[0]];
-    if (field !== undefined) {
-      if (field === 'unalignedWords') tuneBuilder.addMetaTextArray(field, parseDirective.parseFontChangeLine(tokenizer.translateString(tokenizer.stripComment(line.substring(2)))), {
+    var origSize = line.length - 2;
+    var restOfLine = tokenizer.translateString(tokenizer.stripComment(line.substring(2)));
+    if (field === 'unalignedWords' || field === 'notes') {
+      // These fields can be multi-line
+      tuneBuilder.addMetaTextArray(field, parseDirective.parseFontChangeLine(restOfLine), {
         startChar: multilineVars.iChar,
         endChar: multilineVars.iChar + line.length
-      });else tuneBuilder.addMetaText(field, tokenizer.translateString(tokenizer.stripComment(line.substring(2))), {
+      });
+    } else if (field !== undefined) {
+      // these fields are single line
+      tuneBuilder.addMetaText(field, parseDirective.parseFontChangeLine(restOfLine), {
         startChar: multilineVars.iChar,
         endChar: multilineVars.iChar + line.length
       });
-      return {};
     } else {
       var startChar = multilineVars.iChar;
       var endChar = startChar + line.length;
       switch (line[0]) {
         case 'H':
-          tuneBuilder.addMetaText("history", tokenizer.translateString(tokenizer.stripComment(line.substring(2))), {
+          // History is a little different because once it starts it continues until another header field is encountered
+          tuneBuilder.addMetaTextArray("history", parseDirective.parseFontChangeLine(restOfLine), {
             startChar: multilineVars.iChar,
             endChar: multilineVars.iChar + line.length
           });
           line = tokenizer.peekLine();
           while (line && line[1] !== ':') {
             tokenizer.nextLine();
-            tuneBuilder.addMetaText("history", tokenizer.translateString(tokenizer.stripComment(line)), {
+            tuneBuilder.addMetaTextArray("history", parseDirective.parseFontChangeLine(tokenizer.translateString(tokenizer.stripComment(line))), {
               startChar: multilineVars.iChar,
               endChar: multilineVars.iChar + line.length
             });
@@ -5262,11 +5371,11 @@ var ParseHeader = function ParseHeader(tokenizer, warn, multilineVars, tune, tun
           break;
         case 'P':
           // TODO-PER: There is more to do with parts, but the writer doesn't care.
-          if (multilineVars.is_in_header) tuneBuilder.addMetaText("partOrder", tokenizer.translateString(tokenizer.stripComment(line.substring(2))), {
+          if (multilineVars.is_in_header) tuneBuilder.addMetaText("partOrder", parseDirective.parseFontChangeLine(restOfLine), {
             startChar: multilineVars.iChar,
             endChar: multilineVars.iChar + line.length
           });else multilineVars.partForNextLine = {
-            title: tokenizer.translateString(tokenizer.stripComment(line.substring(2))),
+            title: restOfLine,
             startChar: startChar,
             endChar: endChar
           };
@@ -5278,7 +5387,8 @@ var ParseHeader = function ParseHeader(tokenizer, warn, multilineVars, tune, tun
           }
           break;
         case 'T':
-          this.setTitle(line.substring(2));
+          if (multilineVars.titlecaps) restOfLine = restOfLine.toUpperCase();
+          this.setTitle(parseDirective.parseFontChangeLine(tokenizer.theReverser(restOfLine)), origSize);
           break;
         case 'U':
           this.addUserDefinition(line, 2, line.length);
@@ -8718,9 +8828,67 @@ var Tokenizer = function Tokenizer(lines, multilineVars) {
       index: index
     };
   };
+
+  //
+  // MAE 10 Jan 2023 - For better handling of tunes that have tune numbers in front of them.
+  //
+  // Previous version would take:
+  // 21. Woman of the House, The
+  // and return:
+  // The 21. Woman of the House
+  // 
+  // This fix results in:
+  // 21. The Woman of the House
+  //
+  // Also added additional checks and handlers for lower case ", the" and ", a" since I found several tune collections with those tune name constructs
+  //
+  // Find an optional title number at the start of a tune title
+  function getTitleNumber(str) {
+    var regex = /^(\d+)\./;
+
+    // Use the exec method to search for the pattern in the string
+    var match = regex.exec(str);
+
+    // Check if a match is found
+    if (match) {
+      // The matched number is captured in the first group (index 1)
+      var foundNumber = match[1];
+      return foundNumber;
+    } else {
+      // Return null if no match is found
+      return null;
+    }
+  }
+  var thePatterns = [{
+    match: /,\s*[Tt]he$/,
+    replace: "The "
+  }, {
+    match: /,\s*[Aa]$/,
+    replace: "A "
+  }, {
+    match: /,\s*[Aa]n$/,
+    replace: "An "
+  }];
   this.theReverser = function (str) {
-    if (parseCommon.endsWith(str, ", The")) return "The " + str.substring(0, str.length - 5);
-    if (parseCommon.endsWith(str, ", A")) return "A " + str.substring(0, str.length - 3);
+    for (var i = 0; i < thePatterns.length; i++) {
+      var thisPattern = thePatterns[i];
+      var match = str.match(thisPattern.match);
+      if (match) {
+        var theTitleNumber = getTitleNumber(str);
+        if (theTitleNumber) {
+          //console.log("theReverser The titlenumber:"+theTitleNumber); 
+
+          str = str.replace(theTitleNumber + ".", "");
+          str = str.trim();
+        }
+        var len = match[0].length;
+        var result = thisPattern.replace + str.substring(0, str.length - len);
+        if (theTitleNumber) {
+          result = theTitleNumber + ". " + result;
+        }
+        return result;
+      }
+    }
     return str;
   };
   this.stripComment = function (str) {
@@ -9154,6 +9322,7 @@ module.exports = transposeChordName;
 
 var parseKeyVoice = __webpack_require__(/*! ../parse/abc_parse_key_voice */ "./src/parse/abc_parse_key_voice.js");
 var parseCommon = __webpack_require__(/*! ../parse/abc_common */ "./src/parse/abc_common.js");
+var parseDirective = __webpack_require__(/*! ./abc_parse_directive */ "./src/parse/abc_parse_directive.js");
 var TuneBuilder = function TuneBuilder(tune) {
   var self = this;
   this.setVisualTranspose = function (visualTranspose) {
@@ -9313,6 +9482,8 @@ var TuneBuilder = function TuneBuilder(tune) {
   this.cleanUp = function (barsperstaff, staffnonote, currSlur) {
     this.closeLine(); // Close the last line.
     delete tune.runningFonts;
+    simplifyMetaText(tune);
+    //addRichTextToAnnotationsAndLyrics(tune)
 
     // If the tempo was created with a string like "Allegro", then the duration of a beat needs to be set at the last moment, when it is most likely known.
     if (tune.metaText.tempo && tune.metaText.tempo.bpm && !tune.metaText.tempo.duration) tune.metaText.tempo.duration = [tune.getBeatLength()];
@@ -10047,7 +10218,15 @@ var TuneBuilder = function TuneBuilder(tune) {
       tune.metaText[key] = value;
       tune.metaTextInfo[key] = info;
     } else {
-      tune.metaText[key] += "\n" + value;
+      if (typeof tune.metaText[key] === 'string' && typeof value === 'string') tune.metaText[key] += "\n" + value;else {
+        if (tune.metaText[key] === 'string') tune.metaText[key] = [{
+          text: tune.metaText[key]
+        }];
+        if (typeof value === 'string') value = [{
+          text: value
+        }];
+        tune.metaText[key] = tune.metaText[key].concat(value);
+      }
       tune.metaTextInfo[key].endChar = info.endChar;
     }
   };
@@ -10065,6 +10244,46 @@ var TuneBuilder = function TuneBuilder(tune) {
     tune.metaTextInfo[key] = info;
   };
 };
+function isArrayOfStrings(arr) {
+  if (!arr) return false;
+  if (typeof arr === "string") return false;
+  var str = '';
+  for (var i = 0; i < arr.length; i++) {
+    if (typeof arr[i] !== 'string') return false;
+  }
+  return true;
+}
+function simplifyMetaText(tune) {
+  if (isArrayOfStrings(tune.metaText.notes)) tune.metaText.notes = tune.metaText.notes.join("\n");
+  if (isArrayOfStrings(tune.metaText.history)) tune.metaText.history = tune.metaText.history.join("\n");
+}
+function addRichTextToAnnotationsAndLyrics(tune) {
+  var lines = tune.lines;
+  for (var i = 0; i < lines.length; i++) {
+    if (lines[i].staff !== undefined) {
+      for (var s = 0; s < lines[i].staff.length; s++) {
+        for (var v = 0; v < lines[i].staff[s].voices.length; v++) {
+          var voice = lines[i].staff[s].voices[v];
+          for (var n = 0; n < voice.length; n++) {
+            var element = voice[n];
+            if (element.chord) {
+              for (var c = 0; c < element.chord.length; c++) {
+                element.chord[c].name = parseDirective.parseFontChangeLine(element.chord[c].name);
+                console.log(element.chord[c].name);
+              }
+            }
+            if (element.lyric) {
+              for (var l = 0; l < element.lyric.length; l++) {
+                element.lyric[l].syllable = parseDirective.parseFontChangeLine(element.lyric[l].syllable);
+                console.log(element.lyric[l].syllable);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
 module.exports = TuneBuilder;
 
 /***/ }),
@@ -11035,7 +11254,7 @@ module.exports = strTranspose;
 // It also extracts guitar chords to a separate voice and resolves their rhythm.
 
 var flatten;
-var parseCommon = __webpack_require__(/*! ../parse/abc_common */ "./src/parse/abc_common.js");
+var ChordTrack = __webpack_require__(/*! ./chord-track */ "./src/synth/chord-track.js");
 var pitchesToPerc = __webpack_require__(/*! ./pitches-to-perc */ "./src/synth/pitches-to-perc.js");
 (function () {
   "use strict";
@@ -11055,25 +11274,13 @@ var pitchesToPerc = __webpack_require__(/*! ./pitches-to-perc */ "./src/synth/pi
   var lastNoteDurationPosition;
   var currentTrackName;
   var lastEventTime;
+  var chordTrack;
   var meter = {
     num: 4,
     den: 4
   };
-  var chordTrack;
-  var chordSourceTrack;
-  var chordTrackFinished;
-  var chordChannel;
-  var bassInstrument = 0;
-  var chordInstrument = 0;
   var drumInstrument = 128;
-  var boomVolume = 64;
-  var chickVolume = 48;
-  var currentChords;
-  var lastChord;
-  var chordLastBar;
   var lastBarTime;
-  var gChordTacet = false;
-  var hasRhythmHead = false;
   var doBeatAccents = true;
   var stressBeat1 = 105;
   var stressBeatDown = 95;
@@ -11111,25 +11318,10 @@ var pitchesToPerc = __webpack_require__(/*! ./pitches-to-perc */ "./src/synth/pi
     currentTrackName = undefined;
     lastEventTime = 0;
     percmap = percmap_;
-
-    // For resolving chords.
     meter = {
       num: 4,
       den: 4
     };
-    chordTrack = [];
-    chordSourceTrack = false;
-    chordChannel = voices.length; // first free channel for chords
-    chordTrackFinished = false;
-    currentChords = [];
-    bassInstrument = midiOptions.bassprog && midiOptions.bassprog.length === 1 ? midiOptions.bassprog[0] : 0;
-    chordInstrument = midiOptions.chordprog && midiOptions.chordprog.length === 1 ? midiOptions.chordprog[0] : 0;
-    boomVolume = midiOptions.bassvol && midiOptions.bassvol.length === 1 ? midiOptions.bassvol[0] : 64;
-    chickVolume = midiOptions.chordvol && midiOptions.chordvol.length === 1 ? midiOptions.chordvol[0] : 48;
-    lastChord = undefined;
-    chordLastBar = undefined;
-    gChordTacet = options.chordsOff ? true : false;
-    hasRhythmHead = false;
     doBeatAccents = true;
     stressBeat1 = 105;
     stressBeatDown = 95;
@@ -11146,10 +11338,19 @@ var pitchesToPerc = __webpack_require__(/*! ./pitches-to-perc */ "./src/synth/pi
     drumBars = 1;
     if (voices.length > 0 && voices[0].length > 0) pickupLength = voices[0][0].pickupLength;
 
+    // For resolving chords.
+    if (options.bassprog !== undefined && !midiOptions.bassprog) midiOptions.bassprog = [options.bassprog];
+    if (options.bassvol !== undefined && !midiOptions.bassvol) midiOptions.bassvol = [options.bassvol];
+    if (options.chordprog !== undefined && !midiOptions.chordprog) midiOptions.chordprog = [options.chordprog];
+    if (options.chordvol !== undefined && !midiOptions.chordvol) midiOptions.chordvol = [options.chordvol];
+    if (options.gchord !== undefined && !midiOptions.gchord) midiOptions.gchord = [options.gchord];
+    chordTrack = new ChordTrack(voices.length, options.chordsOff, midiOptions, meter);
+
     // First adjust the input to resolve ties, set the starting time for each note, etc. That will make the rest of the logic easier
     preProcess(voices, options);
     for (var i = 0; i < voices.length; i++) {
       transpose = 0;
+      chordTrack.setTranspose(transpose);
       lastNoteDurationPosition = -1;
       var voice = voices[i];
       currentTrack = [{
@@ -11159,6 +11360,7 @@ var pitchesToPerc = __webpack_require__(/*! ./pitches-to-perc */ "./src/synth/pi
       }];
       currentTrackName = undefined;
       lastBarTime = 0;
+      chordTrack.setLastBarTime(0);
       var voiceOff = false;
       if (options.voicesOff === true) voiceOff = true;else if (options.voicesOff && options.voicesOff.length && options.voicesOff.indexOf(i) >= 0) voiceOff = true;
       for (var j = 0; j < voice.length; j++) {
@@ -11172,8 +11374,7 @@ var pitchesToPerc = __webpack_require__(/*! ./pitches-to-perc */ "./src/synth/pi
             };
             break;
           case "note":
-            var setChordTrack = writeNote(element, voiceOff);
-            if (setChordTrack) chordSourceTrack = i;
+            writeNote(element, voiceOff);
             break;
           case "key":
             accidentals = setKeySignature(element);
@@ -11181,27 +11382,27 @@ var pitchesToPerc = __webpack_require__(/*! ./pitches-to-perc */ "./src/synth/pi
           case "meter":
             if (!startingMeter) startingMeter = element;
             meter = element;
+            chordTrack.setMeter(meter);
             beatFraction = getBeatFraction(meter);
             alignDrumToMeter();
             break;
           case "tempo":
             if (!startingTempo) startingTempo = element.qpm;else tempoChangeFactor = element.qpm ? startingTempo / element.qpm : 1;
+            chordTrack.setTempoChangeFactor(tempoChangeFactor);
             break;
           case "transpose":
             transpose = element.transpose;
+            chordTrack.setTranspose(transpose);
             break;
           case "bar":
-            if (chordTrack.length > 0 && (chordSourceTrack === false || i === chordSourceTrack)) {
-              resolveChords(lastBarTime, timeToRealTime(element.time));
-              currentChords = [];
-            }
+            chordTrack.barEnd(element);
             barAccidentals = [];
             if (i === 0)
               // Only write the drum part on the first voice so that it is not duplicated.
               writeDrum(voices.length + 1);
-            hasRhythmHead = false; // decide whether there are rhythm heads each measure.
-            chordLastBar = lastChord;
+            chordTrack.setRhythmHead(false); // decide whether there are rhythm heads each measure.
             lastBarTime = timeToRealTime(element.time);
+            chordTrack.setLastBarTime(lastBarTime);
             break;
           case "bagpipes":
             bagpipes = true;
@@ -11228,8 +11429,8 @@ var pitchesToPerc = __webpack_require__(/*! ./pitches-to-perc */ "./src/synth/pi
             drumDefinition = normalizeDrumDefinition(element.params);
             alignDrumToMeter();
             break;
-          case "gchord":
-            if (!options.chordsOff) gChordTacet = element.tacet;
+          case "gchordOn":
+            chordTrack.gChordOn(element);
             break;
           case "beat":
             stressBeat1 = element.beats[0];
@@ -11246,6 +11447,13 @@ var pitchesToPerc = __webpack_require__(/*! ./pitches-to-perc */ "./src/synth/pi
           case "beataccents":
             doBeatAccents = element.value;
             break;
+          case "gchord":
+          case "bassprog":
+          case "chordprog":
+          case "bassvol":
+          case "chordvol":
+            chordTrack.paramChange(element);
+            break;
           default:
             // This should never happen
             console.log("MIDI creation. Unknown el_type: " + element.el_type + "\n"); // jshint ignore:line
@@ -11255,16 +11463,14 @@ var pitchesToPerc = __webpack_require__(/*! ./pitches-to-perc */ "./src/synth/pi
       if (currentTrack[0].instrument === undefined) currentTrack[0].instrument = instrument ? instrument : 0;
       if (currentTrackName) currentTrack.unshift(currentTrackName);
       tracks.push(currentTrack);
-      if (!chordTrackEmpty())
-        // Don't do chords on more than one track, so turn off chord detection after we create it.
-        chordTrackFinished = true;
+      chordTrack.finish();
       if (drumTrack.length > 0)
         // Don't do drums on more than one track, so turn off drum after we create it.
         drumTrackFinished = true;
     }
     // See if any notes are octaves played at the same time. If so, raise the pitch of the higher one.
     if (options.detuneOctave) findOctaves(tracks, parseInt(options.detuneOctave, 10));
-    if (!chordTrackEmpty()) tracks.push(chordTrack);
+    chordTrack.addTrack(tracks);
     if (drumTrack.length > 0) tracks.push(drumTrack);
     return {
       tempo: startingTempo,
@@ -11281,13 +11487,6 @@ var pitchesToPerc = __webpack_require__(/*! ./pitches-to-perc */ "./src/synth/pi
       }
     }
   }
-  function chordTrackEmpty() {
-    var isEmpty = true;
-    for (var i = 0; i < chordTrack.length && isEmpty; i++) {
-      if (chordTrack[i].cmd === 'note') isEmpty = false;
-    }
-    return isEmpty;
-  }
   function timeToRealTime(time) {
     return time / 1000000;
   }
@@ -11375,48 +11574,6 @@ var pitchesToPerc = __webpack_require__(/*! ./pitches-to-perc */ "./src/synth/pi
     }
     return 0.25;
   }
-  //
-  // The algorithm for chords is:
-  // - The chords are done in a separate track.
-  // - If there are notes before the first chord, then put that much silence to start the track.
-  // - The pattern of chord expression depends on the meter, and how many chords are in a measure.
-  // - There is a possibility that a measure will have an incorrect number of beats, if that is the case, then
-  // start the pattern anew on the next measure number.
-  // - If a chord root is not A-G, then ignore it as if the chord wasn't there at all.
-  // - If a chord modification isn't in our supported list, change it to a major triad.
-  //
-  // - If there is only one chord in a measure:
-  //		- If 2/4, play root chord
-  //		- If cut time, play root(1) chord(3)
-  //		- If 3/4, play root chord chord
-  //		- If 4/4 or common time, play root chord fifth chord
-  //		- If 6/8, play root(1) chord(3) fifth(4) chord(6)
-  //		- For any other meter, play the full chord on each beat. (TODO-PER: expand this as more support is added.)
-  //
-  //	- If there is a chord specified that is not on a beat, move it earlier to the previous beat, unless there is already a chord on that beat.
-  //	- Otherwise, move it later, unless there is already a chord on that beat.
-  // 	- Otherwise, ignore it. (TODO-PER: expand this as more support is added.)
-  //
-  // - If there is a chord on the second beat, play a chord for the first beat instead of a bass note.
-  // - Likewise, if there is a chord on the fourth beat of 4/4, play a chord on the third beat instead of a bass note.
-  //
-  // If there is any note in the melody that has a rhythm head, then assume the melody controls the rhythm, so that is
-  // the same as a break.
-  var breakSynonyms = ['break', '(break)', 'no chord', 'n.c.', 'tacet'];
-  function findChord(elem) {
-    if (gChordTacet) return 'break';
-
-    // TODO-PER: Just using the first chord if there are more than one.
-    if (chordTrackFinished || !elem.chord || elem.chord.length === 0) return null;
-
-    // Return the first annotation that is a regular chord: that is, it is in the default place or is a recognized "tacet" phrase.
-    for (var i = 0; i < elem.chord.length; i++) {
-      var ch = elem.chord[i];
-      if (ch.position === 'default') return ch.name;
-      if (breakSynonyms.indexOf(ch.name.toLowerCase()) >= 0) return 'break';
-    }
-    return null;
-  }
   function calcBeat(measureStart, beatLength, currTime) {
     var distanceFromStart = currTime - measureStart;
     return distanceFromStart / beatLength;
@@ -11432,7 +11589,7 @@ var pitchesToPerc = __webpack_require__(/*! ./pitches-to-perc */ "./src/synth/pi
     } else if (pickupLength > beat) {
       volume = stressBeatUp;
     } else {
-      var barLength = meter.num / meter.den;
+      //var barLength = meter.num / meter.den;
       var barBeat = calcBeat(lastBarTime, getBeatFraction(meter), beat);
       if (barBeat === 0) volume = stressBeat1;else if (parseInt(barBeat, 10) === barBeat) volume = stressBeatDown;else volume = stressBeatUp;
     }
@@ -11444,34 +11601,6 @@ var pitchesToPerc = __webpack_require__(/*! ./pitches-to-perc */ "./src/synth/pi
     if (volume > 127) volume = 127;
     return voiceOff ? 0 : volume;
   }
-  function processChord(elem) {
-    var firstChord = false;
-    var chord = findChord(elem);
-    if (chord) {
-      var c = interpretChord(chord);
-      // If this isn't a recognized chord, just completely ignore it.
-      if (c) {
-        // If we ever have a chord in this voice, then we add the chord track.
-        // However, if there are chords on more than one voice, then just use the first voice.
-        if (chordTrack.length === 0) {
-          firstChord = true;
-          chordTrack.push({
-            cmd: 'program',
-            channel: chordChannel,
-            instrument: chordInstrument
-          });
-        }
-        lastChord = c;
-        var barBeat = calcBeat(lastBarTime, getBeatFraction(meter), timeToRealTime(elem.time));
-        currentChords.push({
-          chord: lastChord,
-          beat: barBeat,
-          start: timeToRealTime(elem.time)
-        });
-      }
-    }
-    return firstChord;
-  }
   function findNoteModifications(elem, velocity) {
     var ret = {};
     if (elem.decoration) {
@@ -11656,9 +11785,10 @@ var pitchesToPerc = __webpack_require__(/*! ./pitches-to-perc */ "./src/synth/pi
     // If there are guitar chords, then they are put in a separate track, but they have the same format.
     //
 
-    var trackStartingIndex = currentTrack.length;
+    //var trackStartingIndex = currentTrack.length;
+
     var velocity = processVolume(timeToRealTime(elem.time), voiceOff);
-    var setChordTrack = processChord(elem);
+    chordTrack.processChord(elem);
 
     // if there are grace notes, then also play them.
     // I'm not sure there is an exact rule for the length of the notes. My rule, unless I find
@@ -11710,15 +11840,7 @@ var pitchesToPerc = __webpack_require__(/*! ./pitches-to-perc */ "./src/synth/pi
       // TODO-PER: Can also make a different sound on style=x and style=harmonic
       var ePitches = elem.pitches;
       if (elem.style === "rhythm") {
-        hasRhythmHead = true;
-        if (lastChord && lastChord.chick) {
-          ePitches = [];
-          for (var i2 = 0; i2 < lastChord.chick.length; i2++) {
-            var note2 = parseCommon.clone(elem.pitches[0]);
-            note2.actualPitch = lastChord.chick[i2];
-            ePitches.push(note2);
-          }
-        }
+        ePitches = chordTrack.setRhythmHead(true, elem);
       }
       if (elem.elem) elem.elem.midiPitches = [];
       for (var i = 0; i < ePitches.length; i++) {
@@ -11770,7 +11892,6 @@ var pitchesToPerc = __webpack_require__(/*! ./pitches-to-perc */ "./src/synth/pi
     }
     var realDur = getRealDuration(elem);
     lastEventTime = Math.max(lastEventTime, timeToRealTime(elem.time) + durationRounded(realDur));
-    return setChordTrack;
   }
   function getRealDuration(elem) {
     if (elem.pitches && elem.pitches.length > 0 && elem.pitches[0]) return elem.pitches[0].duration;
@@ -11919,349 +12040,6 @@ var pitchesToPerc = __webpack_require__(/*! ./pitches-to-perc */ "./src/synth/pi
     if (pitch < 0) pitch += 7;
     return pitch;
   }
-  var basses = {
-    'A': 33,
-    'B': 35,
-    'C': 36,
-    'D': 38,
-    'E': 40,
-    'F': 41,
-    'G': 43
-  };
-  function interpretChord(name) {
-    // chords have the format:
-    // [root][acc][modifier][/][bass][acc]
-    // (The chord might be surrounded by parens. Just ignore them.)
-    // root must be present and must be from A-G.
-    // acc is optional and can be # or b
-    // The modifier can be a wide variety of things, like "maj7". As they are discovered, more are supported here.
-    // If there is a slash, then there is a bass note, which can be from A-G, with an optional acc.
-    // If the root is unrecognized, then "undefined" is returned and there is no chord.
-    // If the modifier is unrecognized, a major triad is returned.
-    // If the bass notes is unrecognized, it is ignored.
-    if (name.length === 0) return undefined;
-    if (name === 'break') return {
-      chick: []
-    };
-    var root = name.substring(0, 1);
-    if (root === '(') {
-      name = name.substring(1, name.length - 2);
-      if (name.length === 0) return undefined;
-      root = name.substring(0, 1);
-    }
-    var bass = basses[root];
-    if (!bass)
-      // If the bass note isn't listed, then this was an unknown root. Only A-G are accepted.
-      return undefined;
-    // Don't transpose the chords more than an octave.
-    var chordTranspose = transpose;
-    while (chordTranspose < -8) {
-      chordTranspose += 12;
-    }
-    while (chordTranspose > 8) {
-      chordTranspose -= 12;
-    }
-    bass += chordTranspose;
-    var bass2 = bass - 5; // The alternating bass is a 4th below
-    var chick;
-    if (name.length === 1) chick = chordNotes(bass, '');
-    var remaining = name.substring(1);
-    var acc = remaining.substring(0, 1);
-    if (acc === 'b' || acc === '♭') {
-      bass--;
-      bass2--;
-      remaining = remaining.substring(1);
-    } else if (acc === '#' || acc === '♯') {
-      bass++;
-      bass2++;
-      remaining = remaining.substring(1);
-    }
-    var arr = remaining.split('/');
-    chick = chordNotes(bass, arr[0]);
-    // If the 5th is altered then the bass is altered. Normally the bass is 7 from the root, so adjust if it isn't.
-    if (chick.length >= 3) {
-      var fifth = chick[2] - chick[0];
-      bass2 = bass2 + fifth - 7;
-    }
-    if (arr.length === 2) {
-      var explicitBass = basses[arr[1].substring(0, 1)];
-      if (explicitBass) {
-        var bassAcc = arr[1].substring(1);
-        var bassShift = {
-          '#': 1,
-          '♯': 1,
-          'b': -1,
-          '♭': -1
-        }[bassAcc] || 0;
-        bass = basses[arr[1].substring(0, 1)] + bassShift + chordTranspose;
-        bass2 = bass;
-      }
-    }
-    return {
-      boom: bass,
-      boom2: bass2,
-      chick: chick
-    };
-  }
-  var chordIntervals = {
-    // diminished (all flat 5 chords)
-    'dim': [0, 3, 6],
-    '°': [0, 3, 6],
-    '˚': [0, 3, 6],
-    'dim7': [0, 3, 6, 9],
-    '°7': [0, 3, 6, 9],
-    '˚7': [0, 3, 6, 9],
-    'ø7': [0, 3, 6, 10],
-    'm7(b5)': [0, 3, 6, 10],
-    'm7b5': [0, 3, 6, 10],
-    'm7♭5': [0, 3, 6, 10],
-    '-7(b5)': [0, 3, 6, 10],
-    '-7b5': [0, 3, 6, 10],
-    '7b5': [0, 4, 6, 10],
-    '7(b5)': [0, 4, 6, 10],
-    '7♭5': [0, 4, 6, 10],
-    '7(b9,b5)': [0, 4, 6, 10, 13],
-    '7b9,b5': [0, 4, 6, 10, 13],
-    '7(#9,b5)': [0, 4, 6, 10, 15],
-    '7#9b5': [0, 4, 6, 10, 15],
-    'maj7(b5)': [0, 4, 6, 11],
-    'maj7b5': [0, 4, 6, 11],
-    '13(b5)': [0, 4, 6, 10, 14, 21],
-    '13b5': [0, 4, 6, 10, 14, 21],
-    // minor (all normal 5, minor 3 chords)
-    'm': [0, 3, 7],
-    '-': [0, 3, 7],
-    'm6': [0, 3, 7, 9],
-    '-6': [0, 3, 7, 9],
-    'm7': [0, 3, 7, 10],
-    '-7': [0, 3, 7, 10],
-    '-(b6)': [0, 3, 7, 8],
-    '-b6': [0, 3, 7, 8],
-    '-6/9': [0, 3, 7, 9, 14],
-    '-7(b9)': [0, 3, 7, 10, 13],
-    '-7b9': [0, 3, 7, 10, 13],
-    '-maj7': [0, 3, 7, 11],
-    '-9+7': [0, 3, 7, 11, 13],
-    '-11': [0, 3, 7, 11, 14, 17],
-    'm11': [0, 3, 7, 11, 14, 17],
-    '-maj9': [0, 3, 7, 11, 14],
-    '-∆9': [0, 3, 7, 11, 14],
-    'mM9': [0, 3, 7, 11, 14],
-    // major (all normal 5, major 3 chords)
-    'M': [0, 4, 7],
-    '6': [0, 4, 7, 9],
-    '6/9': [0, 4, 7, 9, 14],
-    '6add9': [0, 4, 7, 9, 14],
-    '69': [0, 4, 7, 9, 14],
-    '7': [0, 4, 7, 10],
-    '9': [0, 4, 7, 10, 14],
-    '11': [0, 7, 10, 14, 17],
-    '13': [0, 4, 7, 10, 14, 21],
-    '7b9': [0, 4, 7, 10, 13],
-    '7♭9': [0, 4, 7, 10, 13],
-    '7(b9)': [0, 4, 7, 10, 13],
-    '7(#9)': [0, 4, 7, 10, 15],
-    '7#9': [0, 4, 7, 10, 15],
-    '(13)': [0, 4, 7, 10, 14, 21],
-    '7(9,13)': [0, 4, 7, 10, 14, 21],
-    '7(#9,b13)': [0, 4, 7, 10, 15, 20],
-    '7(#11)': [0, 4, 7, 10, 14, 18],
-    '7#11': [0, 4, 7, 10, 14, 18],
-    '7(b13)': [0, 4, 7, 10, 20],
-    '7b13': [0, 4, 7, 10, 20],
-    '9(#11)': [0, 4, 7, 10, 14, 18],
-    '9#11': [0, 4, 7, 10, 14, 18],
-    '13(#11)': [0, 4, 7, 10, 18, 21],
-    '13#11': [0, 4, 7, 10, 18, 21],
-    'maj7': [0, 4, 7, 11],
-    '∆7': [0, 4, 7, 11],
-    'Δ7': [0, 4, 7, 11],
-    'maj9': [0, 4, 7, 11, 14],
-    'maj7(9)': [0, 4, 7, 11, 14],
-    'maj7(11)': [0, 4, 7, 11, 17],
-    'maj7(#11)': [0, 4, 7, 11, 18],
-    'maj7(13)': [0, 4, 7, 14, 21],
-    'maj7(9,13)': [0, 4, 7, 11, 14, 21],
-    '7sus4': [0, 5, 7, 10],
-    'm7sus4': [0, 3, 7, 10, 17],
-    'sus4': [0, 5, 7],
-    'sus2': [0, 2, 7],
-    '7sus2': [0, 2, 7, 10],
-    '9sus4': [0, 5, 7, 10, 14],
-    '13sus4': [0, 5, 7, 10, 14, 21],
-    // augmented (all sharp 5 chords)
-    'aug7': [0, 4, 8, 10],
-    '+7': [0, 4, 8, 10],
-    '+': [0, 4, 8],
-    '7#5': [0, 4, 8, 10],
-    '7♯5': [0, 4, 8, 10],
-    '7+5': [0, 4, 8, 10],
-    '9#5': [0, 4, 8, 10, 14],
-    '9♯5': [0, 4, 8, 10, 14],
-    '9+5': [0, 4, 8, 10, 14],
-    '-7(#5)': [0, 3, 8, 10],
-    '-7#5': [0, 3, 8, 10],
-    '7(#5)': [0, 4, 8, 10],
-    '7(b9,#5)': [0, 4, 8, 10, 13],
-    '7b9#5': [0, 4, 8, 10, 13],
-    'maj7(#5)': [0, 4, 8, 11],
-    'maj7#5': [0, 4, 8, 11],
-    'maj7(#5,#11)': [0, 4, 8, 11, 18],
-    'maj7#5#11': [0, 4, 8, 11, 18],
-    '9(#5)': [0, 4, 8, 10, 14],
-    '13(#5)': [0, 4, 8, 10, 14, 21],
-    '13#5': [0, 4, 8, 10, 14, 21]
-  };
-  function chordNotes(bass, modifier) {
-    var intervals = chordIntervals[modifier];
-    if (!intervals) {
-      if (modifier.slice(0, 2).toLowerCase() === 'ma' || modifier[0] === 'M') intervals = chordIntervals.M;else if (modifier[0] === 'm' || modifier[0] === '-') intervals = chordIntervals.m;else intervals = chordIntervals.M;
-    }
-    bass += 12; // the chord is an octave above the bass note.
-    var notes = [];
-    for (var i = 0; i < intervals.length; i++) {
-      notes.push(bass + intervals[i]);
-    }
-    return notes;
-  }
-  function writeBoom(boom, beatLength, volume, beat, noteLength) {
-    // undefined means there is a stop time.
-    if (boom !== undefined) chordTrack.push({
-      cmd: 'note',
-      pitch: boom,
-      volume: volume,
-      start: lastBarTime + beat * durationRounded(beatLength),
-      duration: durationRounded(noteLength),
-      gap: 0,
-      instrument: bassInstrument
-    });
-  }
-  function writeChick(chick, beatLength, volume, beat, noteLength) {
-    for (var c = 0; c < chick.length; c++) {
-      chordTrack.push({
-        cmd: 'note',
-        pitch: chick[c],
-        volume: volume,
-        start: lastBarTime + beat * durationRounded(beatLength),
-        duration: durationRounded(noteLength),
-        gap: 0,
-        instrument: chordInstrument
-      });
-    }
-  }
-  var rhythmPatterns = {
-    "2/2": ['boom', 'chick'],
-    "2/4": ['boom', 'chick'],
-    "3/4": ['boom', 'chick', 'chick'],
-    "4/4": ['boom', 'chick', 'boom2', 'chick'],
-    "5/4": ['boom', 'chick', 'chick', 'boom2', 'chick'],
-    "6/8": ['boom', '', 'chick', 'boom2', '', 'chick'],
-    "9/8": ['boom', '', 'chick', 'boom2', '', 'chick', 'boom2', '', 'chick'],
-    "12/8": ['boom', '', 'chick', 'boom2', '', 'chick', 'boom', '', 'chick', 'boom2', '', 'chick']
-  };
-  function resolveChords(startTime, endTime) {
-    var num = meter.num;
-    var den = meter.den;
-    var beatLength = 1 / den;
-    var noteLength = beatLength / 2;
-    var pattern = rhythmPatterns[num + '/' + den];
-    var thisMeasureLength = parseInt(num, 10) / parseInt(den, 10);
-    var portionOfAMeasure = thisMeasureLength - (endTime - startTime) / tempoChangeFactor;
-    if (Math.abs(portionOfAMeasure) < 0.00001) portionOfAMeasure = false;
-    if (!pattern || portionOfAMeasure) {
-      // If it is an unsupported meter, or this isn't a full bar, just chick on each beat.
-      pattern = [];
-      var beatsPresent = (endTime - startTime) / tempoChangeFactor / beatLength;
-      for (var p = 0; p < beatsPresent; p++) {
-        pattern.push("chick");
-      }
-    }
-    //console.log(startTime, pattern, currentChords, lastChord, portionOfAMeasure)
-
-    if (currentChords.length === 0) {
-      // there wasn't a new chord this measure, so use the last chord declared.
-      currentChords.push({
-        beat: 0,
-        chord: lastChord
-      });
-    }
-    if (currentChords[0].beat !== 0 && lastChord) {
-      // this is the case where there is a chord declared in the measure, but not on its first beat.
-      if (chordLastBar) currentChords.unshift({
-        beat: 0,
-        chord: chordLastBar
-      });
-    }
-    if (currentChords.length === 1) {
-      for (var m = currentChords[0].beat; m < pattern.length; m++) {
-        if (!hasRhythmHead) {
-          switch (pattern[m]) {
-            case 'boom':
-              writeBoom(currentChords[0].chord.boom, beatLength, boomVolume, m, noteLength);
-              break;
-            case 'boom2':
-              writeBoom(currentChords[0].chord.boom2, beatLength, boomVolume, m, noteLength);
-              break;
-            case 'chick':
-              writeChick(currentChords[0].chord.chick, beatLength, chickVolume, m, noteLength);
-              break;
-          }
-        }
-      }
-      return;
-    }
-
-    // If we are here it is because more than one chord was declared in the measure, so we have to sort out what chord goes where.
-
-    // First, normalize the chords on beats.
-    var mult = beatLength === 0.125 ? 3 : 1; // If this is a compound meter then the beats in the currentChords is 1/3 of the true beat
-    var beats = {};
-    for (var i = 0; i < currentChords.length; i++) {
-      var cc = currentChords[i];
-      var b = Math.round(cc.beat * mult);
-      beats['' + b] = cc;
-    }
-
-    // - If there is a chord on the second beat, play a chord for the first beat instead of a bass note.
-    // - Likewise, if there is a chord on the fourth beat of 4/4, play a chord on the third beat instead of a bass note.
-    for (var m2 = 0; m2 < pattern.length; m2++) {
-      var thisChord;
-      if (beats['' + m2]) thisChord = beats['' + m2];
-      var lastBoom;
-      if (!hasRhythmHead && thisChord) {
-        switch (pattern[m2]) {
-          case 'boom':
-            if (beats['' + (m2 + 1)])
-              // If there is not a chord change on the next beat, play a bass note.
-              writeChick(thisChord.chord.chick, beatLength, chickVolume, m2, noteLength);else {
-              writeBoom(thisChord.chord.boom, beatLength, boomVolume, m2, noteLength);
-              lastBoom = thisChord.chord.boom;
-            }
-            break;
-          case 'boom2':
-            if (beats['' + (m2 + 1)]) writeChick(thisChord.chord.chick, beatLength, chickVolume, m2, noteLength);else {
-              // If there is the same root as the last chord, use the alternating bass, otherwise play the root.
-              if (lastBoom === thisChord.chord.boom) {
-                writeBoom(thisChord.chord.boom2, beatLength, boomVolume, m2, noteLength);
-                lastBoom = undefined;
-              } else {
-                writeBoom(thisChord.chord.boom, beatLength, boomVolume, m2, noteLength);
-                lastBoom = thisChord.chord.boom;
-              }
-            }
-            break;
-          case 'chick':
-            writeChick(thisChord.chord.chick, beatLength, chickVolume, m2, noteLength);
-            break;
-          case '':
-            if (beats['' + m2])
-              // If there is an explicit chord on this beat, play it.
-              writeChick(thisChord.chord.chick, beatLength, chickVolume, m2, noteLength);
-            break;
-        }
-      }
-    }
-  }
   function normalizeDrumDefinition(params) {
     // Be very strict with the drum definition. If anything is not perfect,
     // just turn the drums off.
@@ -12754,6 +12532,7 @@ var parseCommon = __webpack_require__(/*! ../parse/abc_common */ "./src/parse/ab
     var drumBars = options.drumBars || 1;
     var drumIntro = options.drumIntro || 0;
     var drumOn = drumPattern !== "";
+    var drumOffAfterIntro = !!options.drumOff;
     var style = []; // The note head style for each voice.
     var rhythmHeadThisBar = false; // Rhythm notation was detected.
     var crescendoSize = 50; // how much to increase or decrease volume when crescendo/diminuendo is encountered.
@@ -13207,13 +12986,13 @@ var parseCommon = __webpack_require__(/*! ../parse/abc_common */ "./src/parse/ab
                       break;
                     case "gchordoff":
                       voices[voiceNumber].push({
-                        el_type: 'gchord',
+                        el_type: 'gchordOn',
                         tacet: true
                       });
                       break;
                     case "gchordon":
                       voices[voiceNumber].push({
-                        el_type: 'gchord',
+                        el_type: 'gchordOn',
                         tacet: false
                       });
                       break;
@@ -13236,15 +13015,21 @@ var parseCommon = __webpack_require__(/*! ../parse/abc_common */ "./src/parse/ab
                       });
                       break;
                     case "vol":
+                    case "volinc":
                       voices[voiceNumber].push({
-                        el_type: 'vol',
+                        el_type: elem.cmd,
                         volume: elem.params[0]
                       });
                       break;
-                    case "volinc":
+                    case "swing":
+                    case "gchord":
+                    case "bassprog":
+                    case "chordprog":
+                    case "bassvol":
+                    case "chordvol":
                       voices[voiceNumber].push({
-                        el_type: 'volinc',
-                        volume: elem.params[0]
+                        el_type: elem.cmd,
+                        param: elem.params[0]
                       });
                       break;
                     default:
@@ -13286,16 +13071,19 @@ var parseCommon = __webpack_require__(/*! ../parse/abc_common */ "./src/parse/ab
         if (voices[vv].length > insertPoint) {
           for (var w = 0; w < drumIntro; w++) {
             // If it is the last measure of intro, subtract the pickups.
-            if (pickups === 0 || w < drumIntro - 1) voices[vv].splice(insertPoint, 0, {
-              el_type: "note",
-              rest: {
-                type: "rest"
-              },
-              duration: measureLength
-            }, {
-              el_type: "bar"
-            });else {
+            if (pickups === 0 || w < drumIntro - 1) {
               voices[vv].splice(insertPoint, 0, {
+                el_type: "note",
+                rest: {
+                  type: "rest"
+                },
+                duration: measureLength
+              }, {
+                el_type: "bar"
+              });
+              insertPoint += 2;
+            } else {
+              voices[vv].splice(insertPoint++, 0, {
                 el_type: "note",
                 rest: {
                   type: "rest"
@@ -13304,6 +13092,19 @@ var parseCommon = __webpack_require__(/*! ../parse/abc_common */ "./src/parse/ab
               });
             }
           }
+          if (drumOffAfterIntro) {
+            drumOn = false;
+            voices[vv].splice(insertPoint++, 0, {
+              el_type: 'drum',
+              params: {
+                pattern: drumPattern,
+                bars: drumBars,
+                intro: drumIntro,
+                on: drumOn
+              }
+            });
+            drumOffAfterIntro = false;
+          }
         }
       }
     }
@@ -13499,6 +13300,589 @@ module.exports = centsToFactor;
 
 /***/ }),
 
+/***/ "./src/synth/chord-track.js":
+/*!**********************************!*\
+  !*** ./src/synth/chord-track.js ***!
+  \**********************************/
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+//
+// The algorithm for chords is:
+// - The chords are done in a separate track.
+// - If there are notes before the first chord, then put that much silence to start the track.
+// - The pattern of chord expression depends on the meter, and how many chords are in a measure.
+// - There is a possibility that a measure will have an incorrect number of beats, if that is the case, then
+// start the pattern anew on the next measure number.
+// - If a chord root is not A-G, then ignore it as if the chord wasn't there at all.
+// - If a chord modification isn't in our supported list, change it to a major triad.
+//
+// - There is a standard pattern of boom-chick for each time sig, or it can be overridden.
+// - For any unrecognized meter, play the full chord on each beat.
+//
+//	- If there is a chord specified that is not on a beat, move it earlier to the previous beat, unless there is already a chord on that beat.
+//	- Otherwise, move it later, unless there is already a chord on that beat.
+// 	- Otherwise, ignore it. (TODO-PER: expand this as more support is added.)
+//
+// If there is any note in the melody that has a rhythm head, then assume the melody controls the rhythm, so there is no chord added for that entire measure.
+
+var parseCommon = __webpack_require__(/*! ../parse/abc_common */ "./src/parse/abc_common.js");
+var ChordTrack = function ChordTrack(numVoices, chordsOff, midiOptions, meter) {
+  this.chordTrack = [];
+  this.chordTrackFinished = false;
+  this.chordChannel = numVoices; // first free channel for chords
+  this.currentChords = [];
+  this.lastChord;
+  this.chordLastBar;
+  this.chordsOff = !!chordsOff;
+  this.gChordTacet = this.chordsOff;
+  this.hasRhythmHead = false;
+  this.transpose = 0;
+  this.lastBarTime = 0;
+  this.meter = meter;
+  this.tempoChangeFactor = 1;
+  this.bassInstrument = midiOptions.bassprog && midiOptions.bassprog.length === 1 ? midiOptions.bassprog[0] : 0;
+  this.chordInstrument = midiOptions.chordprog && midiOptions.chordprog.length === 1 ? midiOptions.chordprog[0] : 0;
+  this.boomVolume = midiOptions.bassvol && midiOptions.bassvol.length === 1 ? midiOptions.bassvol[0] : 64;
+  this.chickVolume = midiOptions.chordvol && midiOptions.chordvol.length === 1 ? midiOptions.chordvol[0] : 48;
+  this.overridePattern = midiOptions.gchord ? parseGChord(midiOptions.gchord[0]) : undefined;
+};
+ChordTrack.prototype.setMeter = function (meter) {
+  this.meter = meter;
+};
+ChordTrack.prototype.setTempoChangeFactor = function (tempoChangeFactor) {
+  this.tempoChangeFactor = tempoChangeFactor;
+};
+ChordTrack.prototype.setLastBarTime = function (lastBarTime) {
+  this.lastBarTime = lastBarTime;
+};
+ChordTrack.prototype.setTranspose = function (transpose) {
+  this.transpose = transpose;
+};
+ChordTrack.prototype.setRhythmHead = function (isRhythmHead, elem) {
+  this.hasRhythmHead = isRhythmHead;
+  var ePitches = [];
+  if (isRhythmHead) {
+    if (this.lastChord && this.lastChord.chick) {
+      for (var i2 = 0; i2 < this.lastChord.chick.length; i2++) {
+        var note2 = parseCommon.clone(elem.pitches[0]);
+        note2.actualPitch = this.lastChord.chick[i2];
+        ePitches.push(note2);
+      }
+    }
+  }
+  return ePitches;
+};
+ChordTrack.prototype.barEnd = function (element) {
+  if (this.chordTrack.length > 0 && !this.chordTrackFinished) {
+    this.resolveChords(this.lastBarTime, timeToRealTime(element.time));
+    this.currentChords = [];
+  }
+  this.chordLastBar = this.lastChord;
+};
+ChordTrack.prototype.gChordOn = function (element) {
+  if (!this.chordsOff) this.gChordTacet = element.tacet;
+};
+ChordTrack.prototype.paramChange = function (element) {
+  switch (element.el_type) {
+    case "gchord":
+      this.overridePattern = parseGChord(element.param);
+      break;
+    case "bassprog":
+      this.bassInstrument = element.param;
+      break;
+    case "chordprog":
+      this.chordInstrument = element.param;
+      break;
+    case "bassvol":
+      this.boomVolume = element.param;
+      break;
+    case "chordvol":
+      this.chickVolume = element.param;
+      break;
+    default:
+      console.log("unhandled midi param", element);
+  }
+};
+ChordTrack.prototype.finish = function () {
+  if (!this.chordTrackEmpty())
+    // Don't do chords on more than one track, so turn off chord detection after we create it.
+    this.chordTrackFinished = true;
+};
+ChordTrack.prototype.addTrack = function (tracks) {
+  if (!this.chordTrackEmpty()) tracks.push(this.chordTrack);
+};
+ChordTrack.prototype.findChord = function (elem) {
+  if (this.gChordTacet) return 'break';
+
+  // TODO-PER: Just using the first chord if there are more than one.
+  if (this.chordTrackFinished || !elem.chord || elem.chord.length === 0) return null;
+
+  // Return the first annotation that is a regular chord: that is, it is in the default place or is a recognized "tacet" phrase.
+  for (var i = 0; i < elem.chord.length; i++) {
+    var ch = elem.chord[i];
+    if (ch.position === 'default') return ch.name;
+    if (this.breakSynonyms.indexOf(ch.name.toLowerCase()) >= 0) return 'break';
+  }
+  return null;
+};
+ChordTrack.prototype.interpretChord = function (name) {
+  // chords have the format:
+  // [root][acc][modifier][/][bass][acc]
+  // (The chord might be surrounded by parens. Just ignore them.)
+  // root must be present and must be from A-G.
+  // acc is optional and can be # or b
+  // The modifier can be a wide variety of things, like "maj7". As they are discovered, more are supported here.
+  // If there is a slash, then there is a bass note, which can be from A-G, with an optional acc.
+  // If the root is unrecognized, then "undefined" is returned and there is no chord.
+  // If the modifier is unrecognized, a major triad is returned.
+  // If the bass notes is unrecognized, it is ignored.
+  if (name.length === 0) return undefined;
+  if (name === 'break') return {
+    chick: []
+  };
+  var root = name.substring(0, 1);
+  if (root === '(') {
+    name = name.substring(1, name.length - 2);
+    if (name.length === 0) return undefined;
+    root = name.substring(0, 1);
+  }
+  var bass = this.basses[root];
+  if (!bass)
+    // If the bass note isn't listed, then this was an unknown root. Only A-G are accepted.
+    return undefined;
+  // Don't transpose the chords more than an octave.
+  var chordTranspose = this.transpose;
+  while (chordTranspose < -8) {
+    chordTranspose += 12;
+  }
+  while (chordTranspose > 8) {
+    chordTranspose -= 12;
+  }
+  bass += chordTranspose;
+  var bass2 = bass - 5; // The alternating bass is a 4th below
+  var chick;
+  if (name.length === 1) chick = this.chordNotes(bass, '');
+  var remaining = name.substring(1);
+  var acc = remaining.substring(0, 1);
+  if (acc === 'b' || acc === '♭') {
+    bass--;
+    bass2--;
+    remaining = remaining.substring(1);
+  } else if (acc === '#' || acc === '♯') {
+    bass++;
+    bass2++;
+    remaining = remaining.substring(1);
+  }
+  var arr = remaining.split('/');
+  chick = this.chordNotes(bass, arr[0]);
+  // If the 5th is altered then the bass is altered. Normally the bass is 7 from the root, so adjust if it isn't.
+  if (chick.length >= 3) {
+    var fifth = chick[2] - chick[0];
+    bass2 = bass2 + fifth - 7;
+  }
+  if (arr.length === 2) {
+    var explicitBass = this.basses[arr[1].substring(0, 1)];
+    if (explicitBass) {
+      var bassAcc = arr[1].substring(1);
+      var bassShift = {
+        '#': 1,
+        '♯': 1,
+        'b': -1,
+        '♭': -1
+      }[bassAcc] || 0;
+      bass = this.basses[arr[1].substring(0, 1)] + bassShift + chordTranspose;
+      bass2 = bass;
+    }
+  }
+  return {
+    boom: bass,
+    boom2: bass2,
+    chick: chick
+  };
+};
+ChordTrack.prototype.chordNotes = function (bass, modifier) {
+  var intervals = this.chordIntervals[modifier];
+  if (!intervals) {
+    if (modifier.slice(0, 2).toLowerCase() === 'ma' || modifier[0] === 'M') intervals = this.chordIntervals.M;else if (modifier[0] === 'm' || modifier[0] === '-') intervals = this.chordIntervals.m;else intervals = this.chordIntervals.M;
+  }
+  bass += 12; // the chord is an octave above the bass note.
+  var notes = [];
+  for (var i = 0; i < intervals.length; i++) {
+    notes.push(bass + intervals[i]);
+  }
+  return notes;
+};
+ChordTrack.prototype.writeNote = function (note, beatLength, volume, beat, noteLength, instrument) {
+  // undefined means there is a stop time.
+  if (note !== undefined) this.chordTrack.push({
+    cmd: 'note',
+    pitch: note,
+    volume: volume,
+    start: this.lastBarTime + beat * durationRounded(beatLength, this.tempoChangeFactor),
+    duration: durationRounded(noteLength, this.tempoChangeFactor),
+    gap: 0,
+    instrument: instrument
+  });
+};
+ChordTrack.prototype.chordTrackEmpty = function () {
+  var isEmpty = true;
+  for (var i = 0; i < this.chordTrack.length && isEmpty; i++) {
+    if (this.chordTrack[i].cmd === 'note') isEmpty = false;
+  }
+  return isEmpty;
+};
+ChordTrack.prototype.resolveChords = function (startTime, endTime) {
+  // If there is a rhythm head anywhere in the measure then don't add a separate rhythm track
+  if (this.hasRhythmHead) return;
+  var num = this.meter.num;
+  var den = this.meter.den;
+  var beatLength = 1 / den;
+  var noteLength = beatLength / 2;
+  var thisMeasureLength = parseInt(num, 10) / parseInt(den, 10);
+  var portionOfAMeasure = thisMeasureLength - (endTime - startTime) / this.tempoChangeFactor;
+  if (Math.abs(portionOfAMeasure) < 0.00001) portionOfAMeasure = 0;
+
+  // there wasn't a new chord this measure, so use the last chord declared.
+  // also the case where there is a chord declared in the measure, but not on its first beat.
+  if (this.currentChords.length === 0 || this.currentChords[0].beat !== 0) {
+    this.currentChords.unshift({
+      beat: 0,
+      chord: this.chordLastBar
+    });
+  }
+
+  //console.log(this.currentChords)
+  var currentChordsExpanded = expandCurrentChords(this.currentChords, 8 * num / den, beatLength);
+  //console.log(currentChordsExpanded)
+  var thisPattern = this.overridePattern ? this.overridePattern : this.rhythmPatterns[num + '/' + den];
+  if (portionOfAMeasure) {
+    thisPattern = [];
+    var beatsPresent = (endTime - startTime) / this.tempoChangeFactor * 8;
+    for (var p = 0; p < beatsPresent / 2; p += 2) {
+      thisPattern.push("chick");
+      thisPattern.push("");
+    }
+  }
+  if (!thisPattern) {
+    thisPattern = [];
+    for (var p = 0; p < 8 * num / den / 2; p++) {
+      thisPattern.push('chick');
+      thisPattern.push("");
+    }
+  }
+  var firstBoom = true;
+  // If the pattern is overridden, it might be longer than the length of a measure. If so, then ignore the rest of it
+  var minLength = Math.min(thisPattern.length, currentChordsExpanded.length);
+  for (var p = 0; p < minLength; p++) {
+    if (p > 0 && currentChordsExpanded[p - 1] && currentChordsExpanded[p] && currentChordsExpanded[p - 1].boom !== currentChordsExpanded[p].boom) firstBoom = true;
+    var type = thisPattern[p];
+    var isBoom = type.indexOf('boom') >= 0;
+    // If we changed chords at a time when we're not expecting a bass note, then add an extra bass note in.
+    var newBass = !isBoom && p !== 0 && (!currentChordsExpanded[p - 1] || currentChordsExpanded[p - 1].boom !== currentChordsExpanded[p].boom);
+    var pitches = resolvePitch(currentChordsExpanded[p], type, firstBoom, newBass);
+    if (isBoom) firstBoom = false;
+    for (var oo = 0; oo < pitches.length; oo++) {
+      this.writeNote(pitches[oo], 0.125, isBoom || newBass ? this.boomVolume : this.chickVolume, p, noteLength, isBoom || newBass ? this.bassInstrument : this.chordInstrument);
+      if (newBass) newBass = false;else isBoom = false; // only the first note in a chord is a bass note. This handles the case where bass and chord are played at the same time.
+    }
+  }
+
+  return;
+};
+ChordTrack.prototype.processChord = function (elem) {
+  if (this.chordTrackFinished) return;
+  var chord = this.findChord(elem);
+  if (chord) {
+    var c = this.interpretChord(chord);
+    // If this isn't a recognized chord, just completely ignore it.
+    if (c) {
+      // If we ever have a chord in this voice, then we add the chord track.
+      // However, if there are chords on more than one voice, then just use the first voice.
+      if (this.chordTrack.length === 0) {
+        this.chordTrack.push({
+          cmd: 'program',
+          channel: this.chordChannel,
+          instrument: this.chordInstrument
+        });
+      }
+      this.lastChord = c;
+      var barBeat = calcBeat(this.lastBarTime, timeToRealTime(elem.time));
+      this.currentChords.push({
+        chord: this.lastChord,
+        beat: barBeat,
+        start: timeToRealTime(elem.time)
+      });
+    }
+  }
+};
+function resolvePitch(currentChord, type, firstBoom, newBass) {
+  var ret = [];
+  if (!currentChord) return ret;
+  if (type.indexOf('boom') >= 0) ret.push(firstBoom ? currentChord.boom : currentChord.boom2);else if (newBass) ret.push(currentChord.boom);
+  if (type.indexOf('chick') >= 0) {
+    for (var i = 0; i < currentChord.chick.length; i++) {
+      ret.push(currentChord.chick[i]);
+    }
+  }
+  switch (type) {
+    case 'DO':
+      ret.push(currentChord.chick[0]);
+      break;
+    case 'MI':
+      ret.push(currentChord.chick[1]);
+      break;
+    case 'SOL':
+      ret.push(currentChord.chick[2]);
+      break;
+    case 'TI':
+      currentChord.chick.length > 3 ? ret.push(currentChord.chick[2]) : ret.push(currentChord.chick[0] + 12);
+      break;
+    case 'TOP':
+      currentChord.chick.length > 4 ? ret.push(currentChord.chick[2]) : ret.push(currentChord.chick[1] + 12);
+      break;
+    case 'do':
+      ret.push(currentChord.chick[0] + 12);
+      break;
+    case 'mi':
+      ret.push(currentChord.chick[1] + 12);
+      break;
+    case 'sol':
+      ret.push(currentChord.chick[2] + 12);
+      break;
+    case 'ti':
+      currentChord.chick.length > 3 ? ret.push(currentChord.chick[2] + 12) : ret.push(currentChord.chick[0] + 24);
+      break;
+    case 'top':
+      currentChord.chick.length > 4 ? ret.push(currentChord.chick[2] + 12) : ret.push(currentChord.chick[1] + 24);
+      break;
+  }
+  return ret;
+}
+function parseGChord(gchord) {
+  // TODO-PER: The spec is more complicated than this but for now this will not try to do anything with error cases like the wrong number of beats.
+  var pattern = [];
+  for (var i = 0; i < gchord.length; i++) {
+    var ch = gchord[i];
+    switch (ch) {
+      case 'z':
+        pattern.push('');
+        break;
+      case '2':
+        pattern.push('');
+        break;
+      // TODO-PER: This should extend the last note, but that's a small effect
+      case 'c':
+        pattern.push('chick');
+        break;
+      case 'b':
+        pattern.push('boom&chick');
+        break;
+      case 'f':
+        pattern.push('boom');
+        break;
+      case 'G':
+        pattern.push('DO');
+        break;
+      case 'H':
+        pattern.push('MI');
+        break;
+      case 'I':
+        pattern.push('SOL');
+        break;
+      case 'J':
+        pattern.push('TI');
+        break;
+      case 'K':
+        pattern.push('TOP');
+        break;
+      case 'g':
+        pattern.push('do');
+        break;
+      case 'h':
+        pattern.push('mi');
+        break;
+      case 'i':
+        pattern.push('sol');
+        break;
+      case 'j':
+        pattern.push('ti');
+        break;
+      case 'k':
+        pattern.push('top');
+        break;
+    }
+  }
+  return pattern;
+}
+
+// This returns an array that has a chord for each 1/8th note position in the current measure
+function expandCurrentChords(currentChords, num8thNotes, beatLength) {
+  beatLength = beatLength * 8; // this is expressed as a fraction, so that 0.25 is a quarter notes. We want it to be the number of 8th notes
+  var chords = [];
+  if (currentChords.length === 0) return chords;
+  var currentChord = currentChords[0].chord;
+  for (var i = 1; i < currentChords.length; i++) {
+    var current = currentChords[i];
+    while (chords.length < current.beat) {
+      chords.push(currentChord);
+    }
+    currentChord = current.chord;
+  }
+  while (chords.length < num8thNotes) {
+    chords.push(currentChord);
+  }
+  return chords;
+}
+function calcBeat(measureStart, currTime) {
+  var distanceFromStart = currTime - measureStart;
+  return distanceFromStart * 8;
+}
+ChordTrack.prototype.breakSynonyms = ['break', '(break)', 'no chord', 'n.c.', 'tacet'];
+ChordTrack.prototype.basses = {
+  'A': 33,
+  'B': 35,
+  'C': 36,
+  'D': 38,
+  'E': 40,
+  'F': 41,
+  'G': 43
+};
+ChordTrack.prototype.chordIntervals = {
+  // diminished (all flat 5 chords)
+  'dim': [0, 3, 6],
+  '°': [0, 3, 6],
+  '˚': [0, 3, 6],
+  'dim7': [0, 3, 6, 9],
+  '°7': [0, 3, 6, 9],
+  '˚7': [0, 3, 6, 9],
+  'ø7': [0, 3, 6, 10],
+  'm7(b5)': [0, 3, 6, 10],
+  'm7b5': [0, 3, 6, 10],
+  'm7♭5': [0, 3, 6, 10],
+  '-7(b5)': [0, 3, 6, 10],
+  '-7b5': [0, 3, 6, 10],
+  '7b5': [0, 4, 6, 10],
+  '7(b5)': [0, 4, 6, 10],
+  '7♭5': [0, 4, 6, 10],
+  '7(b9,b5)': [0, 4, 6, 10, 13],
+  '7b9,b5': [0, 4, 6, 10, 13],
+  '7(#9,b5)': [0, 4, 6, 10, 15],
+  '7#9b5': [0, 4, 6, 10, 15],
+  'maj7(b5)': [0, 4, 6, 11],
+  'maj7b5': [0, 4, 6, 11],
+  '13(b5)': [0, 4, 6, 10, 14, 21],
+  '13b5': [0, 4, 6, 10, 14, 21],
+  // minor (all normal 5, minor 3 chords)
+  'm': [0, 3, 7],
+  '-': [0, 3, 7],
+  'm6': [0, 3, 7, 9],
+  '-6': [0, 3, 7, 9],
+  'm7': [0, 3, 7, 10],
+  '-7': [0, 3, 7, 10],
+  '-(b6)': [0, 3, 7, 8],
+  '-b6': [0, 3, 7, 8],
+  '-6/9': [0, 3, 7, 9, 14],
+  '-7(b9)': [0, 3, 7, 10, 13],
+  '-7b9': [0, 3, 7, 10, 13],
+  '-maj7': [0, 3, 7, 11],
+  '-9+7': [0, 3, 7, 11, 13],
+  '-11': [0, 3, 7, 11, 14, 17],
+  'm11': [0, 3, 7, 11, 14, 17],
+  '-maj9': [0, 3, 7, 11, 14],
+  '-∆9': [0, 3, 7, 11, 14],
+  'mM9': [0, 3, 7, 11, 14],
+  // major (all normal 5, major 3 chords)
+  'M': [0, 4, 7],
+  '6': [0, 4, 7, 9],
+  '6/9': [0, 4, 7, 9, 14],
+  '6add9': [0, 4, 7, 9, 14],
+  '69': [0, 4, 7, 9, 14],
+  '7': [0, 4, 7, 10],
+  '9': [0, 4, 7, 10, 14],
+  '11': [0, 7, 10, 14, 17],
+  '13': [0, 4, 7, 10, 14, 21],
+  '7b9': [0, 4, 7, 10, 13],
+  '7♭9': [0, 4, 7, 10, 13],
+  '7(b9)': [0, 4, 7, 10, 13],
+  '7(#9)': [0, 4, 7, 10, 15],
+  '7#9': [0, 4, 7, 10, 15],
+  '(13)': [0, 4, 7, 10, 14, 21],
+  '7(9,13)': [0, 4, 7, 10, 14, 21],
+  '7(#9,b13)': [0, 4, 7, 10, 15, 20],
+  '7(#11)': [0, 4, 7, 10, 14, 18],
+  '7#11': [0, 4, 7, 10, 14, 18],
+  '7(b13)': [0, 4, 7, 10, 20],
+  '7b13': [0, 4, 7, 10, 20],
+  '9(#11)': [0, 4, 7, 10, 14, 18],
+  '9#11': [0, 4, 7, 10, 14, 18],
+  '13(#11)': [0, 4, 7, 10, 18, 21],
+  '13#11': [0, 4, 7, 10, 18, 21],
+  'maj7': [0, 4, 7, 11],
+  '∆7': [0, 4, 7, 11],
+  'Δ7': [0, 4, 7, 11],
+  'maj9': [0, 4, 7, 11, 14],
+  'maj7(9)': [0, 4, 7, 11, 14],
+  'maj7(11)': [0, 4, 7, 11, 17],
+  'maj7(#11)': [0, 4, 7, 11, 18],
+  'maj7(13)': [0, 4, 7, 14, 21],
+  'maj7(9,13)': [0, 4, 7, 11, 14, 21],
+  '7sus4': [0, 5, 7, 10],
+  'm7sus4': [0, 3, 7, 10, 17],
+  'sus4': [0, 5, 7],
+  'sus2': [0, 2, 7],
+  '7sus2': [0, 2, 7, 10],
+  '9sus4': [0, 5, 7, 10, 14],
+  '13sus4': [0, 5, 7, 10, 14, 21],
+  // augmented (all sharp 5 chords)
+  'aug7': [0, 4, 8, 10],
+  '+7': [0, 4, 8, 10],
+  '+': [0, 4, 8],
+  '7#5': [0, 4, 8, 10],
+  '7♯5': [0, 4, 8, 10],
+  '7+5': [0, 4, 8, 10],
+  '9#5': [0, 4, 8, 10, 14],
+  '9♯5': [0, 4, 8, 10, 14],
+  '9+5': [0, 4, 8, 10, 14],
+  '-7(#5)': [0, 3, 8, 10],
+  '-7#5': [0, 3, 8, 10],
+  '7(#5)': [0, 4, 8, 10],
+  '7(b9,#5)': [0, 4, 8, 10, 13],
+  '7b9#5': [0, 4, 8, 10, 13],
+  'maj7(#5)': [0, 4, 8, 11],
+  'maj7#5': [0, 4, 8, 11],
+  'maj7(#5,#11)': [0, 4, 8, 11, 18],
+  'maj7#5#11': [0, 4, 8, 11, 18],
+  '9(#5)': [0, 4, 8, 10, 14],
+  '13(#5)': [0, 4, 8, 10, 14, 21],
+  '13#5': [0, 4, 8, 10, 14, 21]
+};
+ChordTrack.prototype.rhythmPatterns = {
+  "2/2": ['boom', '', '', '', 'chick', '', '', ''],
+  "3/2": ['boom', '', '', '', 'chick', '', '', '', 'chick', '', '', ''],
+  "4/2": ['boom', '', '', '', 'chick', '', '', '', 'boom', '', '', '', 'chick', '', '', ''],
+  "2/4": ['boom', '', 'chick', ''],
+  "3/4": ['boom', '', 'chick', '', 'chick', ''],
+  "4/4": ['boom', '', 'chick', '', 'boom', '', 'chick', ''],
+  "5/4": ['boom', '', 'chick', '', 'chick', '', 'boom', '', 'chick', ''],
+  "6/4": ['boom', '', 'chick', '', 'boom', '', 'chick', '', 'boom', '', 'chick', ''],
+  "3/8": ['boom', '', 'chick'],
+  "6/8": ['boom', '', 'chick', 'boom', '', 'chick'],
+  "9/8": ['boom', '', 'chick', 'boom', '', 'chick', 'boom', '', 'chick'],
+  "12/8": ['boom', '', 'chick', 'boom', '', 'chick', 'boom', '', 'chick', 'boom', '', 'chick']
+};
+
+// TODO-PER: these are repeated in flattener. Can it be shared?
+
+function timeToRealTime(time) {
+  return time / 1000000;
+}
+function durationRounded(duration, tempoChangeFactor) {
+  return Math.round(duration * tempoChangeFactor * 1000000) / 1000000;
+}
+module.exports = ChordTrack;
+
+/***/ }),
+
 /***/ "./src/synth/create-note-map.js":
 /*!**************************************!*\
   !*** ./src/synth/create-note-map.js ***!
@@ -13525,13 +13909,14 @@ var createNoteMap = function createNoteMap(sequence) {
           // ev contains:
           // {"cmd":"note","pitch":72,"volume":95,"start":0.125,"duration":0.25,"instrument":0,"gap":0}
           // where start and duration are in whole notes, gap is in 1/1920 of a second (i.e. MIDI ticks)
+          var inst = ev.instrument !== undefined ? instrumentIndexToName[ev.instrument] : currentInstrument;
           if (ev.duration > 0) {
             var gap = ev.gap ? ev.gap : 0;
             var len = ev.duration;
             gap = Math.min(gap, len * 2 / 3);
             var obj = {
               pitch: ev.pitch,
-              instrument: currentInstrument,
+              instrument: inst,
               start: Math.round(ev.start * 1000000) / 1000000,
               end: Math.round((ev.start + len - gap) * 1000000) / 1000000,
               volume: ev.volume
@@ -13794,12 +14179,13 @@ function CreateSynth() {
   self.audioBuffers = []; // cache of the buffers so starting play can be fast.
   self.duration = undefined; // the duration of the tune in seconds.
   self.isRunning = false; // whether there is currently a sound buffer running.
-  //	self.options = undefined
+  self.options = undefined;
+  self.pickupLength = 0;
 
   // Load and cache all needed sounds
   self.init = function (options) {
     if (!options) options = {};
-    //		self.options = options
+    if (options.options) self.options = options.options;
     registerAudioContext(options.audioContext); // This works no matter what - if there is already an ac it is a nop; if the context is not passed in, then it creates one.
     var startTime = activeAudioContext().currentTime;
     self.debugCallback = options.debugCallback;
@@ -13868,12 +14254,14 @@ function CreateSynth() {
       self.flattened = options.visualObj.setUpAudio(params);
       var meter = options.visualObj.getMeterFraction();
       if (meter.den) self.meterSize = options.visualObj.getMeterFraction().num / options.visualObj.getMeterFraction().den;
+      self.pickupLength = options.visualObj.getPickupLength();
     } else if (options.sequence) self.flattened = options.sequence;else return Promise.reject(new Error("Must pass in either a visualObj or a sequence"));
     self.millisecondsPerMeasure = options.millisecondsPerMeasure ? options.millisecondsPerMeasure : options.visualObj ? options.visualObj.millisecondsPerMeasure(self.flattened.tempo) : 1000;
     self.beatsPerMeasure = options.visualObj ? options.visualObj.getBeatsPerMeasure() : 4;
     self.sequenceCallback = params.sequenceCallback;
     self.callbackContext = params.callbackContext;
     self.onEnded = params.onEnded;
+    self.meterFraction = options.visualObj.getMeterFraction();
     var allNotes = {};
     var cached = [];
     var errorNotes = [];
@@ -13884,14 +14272,15 @@ function CreateSynth() {
         if (event.pitch !== undefined) {
           var pitchNumber = event.pitch;
           var noteName = pitchToNoteName[pitchNumber];
+          var inst = event.instrument !== undefined ? instrumentIndexToName[event.instrument] : currentInstrument;
           if (noteName) {
-            if (!allNotes[currentInstrument]) allNotes[currentInstrument] = {};
-            if (!soundsCache[currentInstrument] || !soundsCache[currentInstrument][noteName]) allNotes[currentInstrument][noteName] = true;else {
-              var label2 = currentInstrument + ":" + noteName;
+            if (!allNotes[inst]) allNotes[inst] = {};
+            if (!soundsCache[inst] || !soundsCache[inst][noteName]) allNotes[inst][noteName] = true;else {
+              var label2 = inst + ":" + noteName;
               if (cached.indexOf(label2) < 0) cached.push(label2);
             }
           } else {
-            var label = currentInstrument + ":" + noteName;
+            var label = inst + ":" + noteName;
             console.log("Can't find note: ", pitchNumber, label);
             if (errorNotes.indexOf(label) < 0) errorNotes.push(label);
           }
@@ -14032,8 +14421,7 @@ function CreateSynth() {
       // There might be a previous run that needs to be turned off.
       self.stop();
       var noteMapTracks = createNoteMap(self.flattened);
-      // if (self.options.swing)
-      // 	addSwing(noteMapTracks, self.options.swing, self.beatsPerMeasure)
+      if (self.options.swing) addSwing(noteMapTracks, self.options.swing, self.meterFraction, self.pickupLength);
       if (self.sequenceCallback) self.sequenceCallback(noteMapTracks, self.callbackContext);
       var panDistances = setPan(noteMapTracks.length, self.pan);
 
@@ -14246,41 +14634,65 @@ function CreateSynth() {
       };
     }
   };
-
-  // // this is a first attempt at adding a little bit of swing to the output, but the algorithm isn't correct.
-  // function addSwing(noteMapTracks, swing, beatsPerMeasure) {
-  // 	console.log("addSwing", noteMapTracks, swing, beatsPerMeasure)
-  // 	// Swing should be between -0.9 and 0.9. Make sure the input is between them.
-  // 	// Then that is the percentage to add to the first beat, so a negative number moves the second beat earlier.
-  // 	// A value of zero is the same as no swing at all.
-  // 	// This only works when there are an even number of beats in a measure.
-  // 	if (beatsPerMeasure % 2 !== 0)
-  // 		return;
-  // 	swing = parseFloat(swing)
-  // 	if (isNaN(swing))
-  // 		return
-  // 	if (swing < -0.9)
-  // 		swing = -0.9
-  // 	if (swing > 0.9)
-  // 		swing = 0.9
-  // 	var beatLength = (1 / beatsPerMeasure)*2
-  // 	swing = beatLength * swing
-  // 	for (var t = 0; t < noteMapTracks.length; t++) {
-  // 		var track = noteMapTracks[t];
-  // 		for (var i = 0; i < track.length; i++) {
-  // 			var event = track[i];
-  // 			if (event.start % beatLength) {
-  // 				// This is the off beat
-  // 				event.start += swing;
-  // 			} else {
-  // 				// This is the beat
-  // 				event.end += swing;
-  // 			}
-  // 		}
-  // 	}
-  // }
+  function addSwing(noteMapTracks, swing, meterFraction, pickupLength) {
+    // we can only swing in X/4 and X/8 meters.
+    if (meterFraction.den != 4 && meterFraction.den != 8) return;
+    swing = parseFloat(swing);
+
+    // 50 (or less) is no swing, 
+    if (isNaN(swing) || swing <= 50) return;
+
+    // 66 is triplet swing 2:1, and 
+    // 60 is swing with a ratio of 3:2. 
+    // 75 is the maximum swing where the first eight is played as a dotted eight and the second as a sixteenth. 
+    if (swing > 75) swing = 75;
+
+    // convert the swing percentage to a percentage of increase for the first half of the beat
+    swing = swing / 50 - 1;
+
+    // The volume of the swung notes is increased by this factor
+    // could be also in the settings. Try out values such 0.1, 0.2
+    var volumeIncrease = 0.0;
+
+    // the beatLength in X/8 meters
+    var beatLength = 0.25;
+
+    // in X/8 meters the 16s swing so the beatLength is halved
+    if (meterFraction.den === 8) beatLength = beatLength / 2;
+
+    // duration of a half beat
+    var halfbeatLength = beatLength / 2;
+
+    // the extra duration of the first swung notes and the delay of the second notes
+    var swingDuration = halfbeatLength * swing;
+    for (var t = 0; t < noteMapTracks.length; t++) {
+      var track = noteMapTracks[t];
+      for (var i = 0; i < track.length; i++) {
+        var event = track[i];
+        if (
+        // is halfbeat
+        (event.start - pickupLength) % halfbeatLength == 0 && (event.start - pickupLength) % beatLength != 0 && (
+        // the previous note is on the beat or before OR there is no previous note 
+        i == 0 || track[i - 1].start <= track[i].start - halfbeatLength) && (
+        // the next note is on the beat or after OR there is no next note
+        i == track.length - 1 || track[i + 1].start >= track[i].start + halfbeatLength)) {
+          var oldEventStart = event.start;
+          event.start += swingDuration;
+
+          // Increase volume of swung notes
+          event.volume *= 1 + volumeIncrease;
+
+          // if there is a previous note ending at the start of this note, extend its end
+          // and decrease its volume
+          if (i > 0 && track[i - 1].end == oldEventStart) {
+            track[i - 1].end = event.start;
+            track[i - 1].volume *= 1 - volumeIncrease;
+          }
+        }
+      }
+    }
+  }
 }
-
 module.exports = CreateSynth;
 
 /***/ }),
@@ -15046,6 +15458,8 @@ function SynthController() {
   self.isLoading = false;
   self.load = function (selector, cursorControl, visualOptions) {
     if (!visualOptions) visualOptions = {};
+    if (visualOptions.displayPlay === undefined) visualOptions.displayPlay = true;
+    if (visualOptions.displayProgress === undefined) visualOptions.displayProgress = true;
     self.control = new CreateSynthControl(selector, {
       loopHandler: visualOptions.displayLoop ? self.toggleLoop : undefined,
       restartHandler: visualOptions.displayRestart ? self.restart : undefined,
@@ -15063,7 +15477,7 @@ function SynthController() {
   self.setTune = function (visualObj, userAction, audioParams) {
     self.visualObj = visualObj;
     self.disable(false);
-    self.options = audioParams;
+    self.options = audioParams ? audioParams : {};
     if (self.control) {
       self.pause();
       self.setProgress(0, 1);
@@ -15195,7 +15609,7 @@ function SynthController() {
   };
   self._randomAccess = function (ev) {
     var background = ev.target.classList.contains('abcjs-midi-progress-indicator') ? ev.target.parentNode : ev.target;
-    var percent = (ev.x - background.offsetLeft) / background.offsetWidth;
+    var percent = (ev.x - background.getBoundingClientRect().left) / background.offsetWidth;
     if (percent < 0) percent = 0;
     if (percent > 1) percent = 1;
     self.seek(percent);
@@ -15337,87 +15751,6 @@ module.exports = SynthSequence;
 
 /***/ }),
 
-/***/ "./src/tablatures/instruments/guitar/guitar-patterns.js":
-/*!**************************************************************!*\
-  !*** ./src/tablatures/instruments/guitar/guitar-patterns.js ***!
-  \**************************************************************/
-/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
-
-var StringPatterns = __webpack_require__(/*! ../string-patterns */ "./src/tablatures/instruments/string-patterns.js");
-function GuitarPatterns(plugin) {
-  this.tuning = plugin._super.params.tuning;
-  if (!this.tuning) {
-    this.tuning = ['E,', 'A,', 'D', 'G', 'B', 'e'];
-  }
-  plugin.tuning = this.tuning;
-  this.strings = new StringPatterns(plugin);
-}
-GuitarPatterns.prototype.notesToNumber = function (notes, graces) {
-  var converter = this.strings;
-  return converter.notesToNumber(notes, graces);
-};
-GuitarPatterns.prototype.stringToPitch = function (stringNumber) {
-  var converter = this.strings;
-  return converter.stringToPitch(stringNumber);
-};
-module.exports = GuitarPatterns;
-
-/***/ }),
-
-/***/ "./src/tablatures/instruments/guitar/tab-guitar.js":
-/*!*********************************************************!*\
-  !*** ./src/tablatures/instruments/guitar/tab-guitar.js ***!
-  \*********************************************************/
-/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
-
-/*
-Emit tab for Guitar staff
-*/
-var StringTablature = __webpack_require__(/*! ../string-tablature */ "./src/tablatures/instruments/string-tablature.js");
-var TabCommon = __webpack_require__(/*! ../../tab-common */ "./src/tablatures/tab-common.js");
-var TabRenderer = __webpack_require__(/*! ../../tab-renderer */ "./src/tablatures/tab-renderer.js");
-var GuitarPatterns = __webpack_require__(/*! ./guitar-patterns */ "./src/tablatures/instruments/guitar/guitar-patterns.js");
-
-/**
-* upon init mainly store provided instances for later usage
-* @param {*} abcTune  the parsed tune AST tree
-*  @param {*} tuneNumber  the parsed tune AST tree
-* @param {*} params  complementary args provided to Tablature Plugin
-*/
-Plugin.prototype.init = function (abcTune, tuneNumber, params) {
-  var _super = new TabCommon(abcTune, tuneNumber, params);
-  this._super = _super;
-  this.abcTune = abcTune;
-  this.linePitch = 3;
-  this.nbLines = 6;
-  this.isTabBig = true;
-  this.capo = params.capo;
-  this.transpose = params.visualTranspose;
-  this.tablature = new StringTablature(this.nbLines, this.linePitch);
-  var semantics = new GuitarPatterns(this);
-  this.semantics = semantics;
-};
-Plugin.prototype.render = function (renderer, line, staffIndex) {
-  if (this._super.inError) return;
-  if (this.tablature.bypass(line)) return;
-  var rndrer = new TabRenderer(this, renderer, line, staffIndex);
-  rndrer.doLayout();
-};
-function Plugin() {}
-
-//
-// Tablature plugin definition
-//
-var AbcGuitarTab = function AbcGuitarTab() {
-  return {
-    name: 'GuitarTab',
-    tablature: Plugin
-  };
-};
-module.exports = AbcGuitarTab;
-
-/***/ }),
-
 /***/ "./src/tablatures/instruments/string-patterns.js":
 /*!*******************************************************!*\
   !*** ./src/tablatures/instruments/string-patterns.js ***!
@@ -15658,6 +15991,17 @@ StringPatterns.prototype.tabInfos = function (plugin) {
   return '';
 };
 
+// MAE 27 Nov 2023
+StringPatterns.prototype.suppress = function (plugin) {
+  var _super = plugin._super;
+  var suppress = _super.params.suppress;
+  if (suppress) {
+    return true;
+  }
+  return false;
+};
+// MAE 27 Nov 2023 End
+
 /**
  * Common patterns for all string instruments
  * @param {} plugin
@@ -16032,16 +16376,43 @@ module.exports = TabNotes;
 
 /***/ }),
 
-/***/ "./src/tablatures/instruments/violin/tab-violin.js":
-/*!*********************************************************!*\
-  !*** ./src/tablatures/instruments/violin/tab-violin.js ***!
-  \*********************************************************/
+/***/ "./src/tablatures/instruments/tab-string-patterns.js":
+/*!***********************************************************!*\
+  !*** ./src/tablatures/instruments/tab-string-patterns.js ***!
+  \***********************************************************/
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+var StringPatterns = __webpack_require__(/*! ./string-patterns */ "./src/tablatures/instruments/string-patterns.js");
+function TabStringPatterns(plugin, defaultTuning) {
+  this.tuning = plugin._super.params.tuning;
+  if (!this.tuning) {
+    this.tuning = defaultTuning;
+  }
+  plugin.tuning = this.tuning;
+  this.strings = new StringPatterns(plugin);
+}
+TabStringPatterns.prototype.notesToNumber = function (notes, graces) {
+  var converter = this.strings;
+  return converter.notesToNumber(notes, graces);
+};
+TabStringPatterns.prototype.stringToPitch = function (stringNumber) {
+  var converter = this.strings;
+  return converter.stringToPitch(stringNumber);
+};
+module.exports = TabStringPatterns;
+
+/***/ }),
+
+/***/ "./src/tablatures/instruments/tab-string.js":
+/*!**************************************************!*\
+  !*** ./src/tablatures/instruments/tab-string.js ***!
+  \**************************************************/
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
-var StringTablature = __webpack_require__(/*! ../string-tablature */ "./src/tablatures/instruments/string-tablature.js");
-var TabCommon = __webpack_require__(/*! ../../tab-common */ "./src/tablatures/tab-common.js");
-var TabRenderer = __webpack_require__(/*! ../../tab-renderer */ "./src/tablatures/tab-renderer.js");
-var ViolinPatterns = __webpack_require__(/*! ./violin-patterns */ "./src/tablatures/instruments/violin/violin-patterns.js");
+var StringTablature = __webpack_require__(/*! ./string-tablature */ "./src/tablatures/instruments/string-tablature.js");
+var TabCommon = __webpack_require__(/*! ../tab-common */ "./src/tablatures/tab-common.js");
+var TabRenderer = __webpack_require__(/*! ../tab-renderer */ "./src/tablatures/tab-renderer.js");
+var TabStringPatterns = __webpack_require__(/*! ./tab-string-patterns */ "./src/tablatures/instruments/tab-string-patterns.js");
 
 /**
  * upon init mainly store provided instances for later usage
@@ -16049,17 +16420,19 @@ var ViolinPatterns = __webpack_require__(/*! ./violin-patterns */ "./src/tablatu
 *  @param {*} tuneNumber  the parsed tune AST tree
  * @param {*} params  complementary args provided to Tablature Plugin
  */
-Plugin.prototype.init = function (abcTune, tuneNumber, params) {
+Plugin.prototype.init = function (abcTune, tuneNumber, params, staffNumber, tabSettings) {
   var _super = new TabCommon(abcTune, tuneNumber, params);
   this.abcTune = abcTune;
   this._super = _super;
   this.linePitch = 3;
-  this.nbLines = 4;
-  this.isTabBig = false;
+  this.nbLines = tabSettings.defaultTuning.length;
+  this.isTabBig = tabSettings.isTabBig;
+  this.tabSymbolOffset = tabSettings.tabSymbolOffset;
   this.capo = params.capo;
   this.transpose = params.visualTranspose;
+  this.hideTabSymbol = params.hideTabSymbol;
   this.tablature = new StringTablature(this.nbLines, this.linePitch);
-  var semantics = new ViolinPatterns(this);
+  var semantics = new TabStringPatterns(this, tabSettings.defaultTuning);
   this.semantics = semantics;
 };
 Plugin.prototype.render = function (renderer, line, staffIndex) {
@@ -16073,40 +16446,13 @@ function Plugin() {}
 //
 // Tablature plugin definition
 //
-var AbcViolinTab = function AbcViolinTab() {
+var AbcStringTab = function AbcStringTab() {
   return {
-    name: 'ViolinTab',
+    name: 'StringTab',
     tablature: Plugin
   };
 };
-module.exports = AbcViolinTab;
-
-/***/ }),
-
-/***/ "./src/tablatures/instruments/violin/violin-patterns.js":
-/*!**************************************************************!*\
-  !*** ./src/tablatures/instruments/violin/violin-patterns.js ***!
-  \**************************************************************/
-/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
-
-var StringPatterns = __webpack_require__(/*! ../string-patterns */ "./src/tablatures/instruments/string-patterns.js");
-function ViolinPatterns(plugin) {
-  this.tuning = plugin._super.params.tuning;
-  if (!this.tuning) {
-    this.tuning = ['G,', 'D', 'A', 'e'];
-  }
-  plugin.tuning = this.tuning;
-  this.strings = new StringPatterns(plugin);
-}
-ViolinPatterns.prototype.notesToNumber = function (notes, graces) {
-  var converter = this.strings;
-  return converter.notesToNumber(notes, graces);
-};
-ViolinPatterns.prototype.stringToPitch = function (stringNumber) {
-  var converter = this.strings;
-  return converter.stringToPitch(stringNumber);
-};
-module.exports = ViolinPatterns;
+module.exports = AbcStringTab;
 
 /***/ }),
 
@@ -16175,13 +16521,20 @@ function buildTabAbsolute(plugin, absX, relX) {
     icon: tabIcon,
     Ypos: tabYPos
   };
-  var tabAbsolute = new AbsoluteElement(element, 0, 0, "symbol", 0);
-  tabAbsolute.x = absX;
-  var tabRelative = new RelativeElement(tabIcon, 0, 0, 7.5, "tab");
-  tabRelative.x = relX;
-  tabAbsolute.children.push(tabRelative);
-  if (tabAbsolute.abcelem.el_type == 'tab') {
-    tabRelative.pitch = tabYPos;
+
+  // Offset the TAB symbol position if specified in the tab description
+  tabYPos += plugin.tabSymbolOffset;
+
+  // For tablature like whistle tab where you want the TAB symbol hidden
+  if (!plugin.hideTabSymbol) {
+    var tabAbsolute = new AbsoluteElement(element, 0, 0, "symbol", 0);
+    tabAbsolute.x = absX;
+    var tabRelative = new RelativeElement(tabIcon, 0, 0, 7.5, "tab");
+    tabRelative.x = relX;
+    tabAbsolute.children.push(tabRelative);
+    if (tabAbsolute.abcelem.el_type == 'tab') {
+      tabRelative.pitch = tabYPos;
+    }
   }
   return tabAbsolute;
 }
@@ -16498,12 +16851,23 @@ function buildTabName(self, dest) {
   var controller = self.renderer.controller;
   var textSize = controller.getTextSize;
   var tabName = stringSemantics.tabInfos(self.plugin);
-  var size = textSize.calc(tabName, 'tablabelfont', 'text instrumentname');
-  dest.tabNameInfos = {
-    textSize: size,
-    name: tabName
-  };
-  return size.height;
+  var suppress = stringSemantics.suppress(self.plugin);
+  var doDraw = true;
+  if (suppress) {
+    doDraw = false;
+  }
+  if (doDraw) {
+    var size = textSize.calc(tabName, 'tablabelfont', 'text instrumentname');
+    dest.tabNameInfos = {
+      textSize: {
+        height: size.height,
+        width: size.width
+      },
+      name: tabName
+    };
+    return size.height;
+  }
+  return 0;
 }
 
 /**
@@ -16675,8 +17039,10 @@ TabRenderer.prototype.doLayout = function () {
     if (ii > 0) tabVoice.duplicate = true;
     var nameHeight = buildTabName(this, tabVoice) / spacing.STEP;
     nameHeight = Math.max(nameHeight, 1); // If there is no label for the tab line, then there needs to be a little padding
-    staffGroup.staffs[this.staffIndex].top += nameHeight;
-    staffGroup.height += nameHeight * spacing.STEP;
+    // This was pushing down the top staff by the tab label height
+    //staffGroup.staffs[this.staffIndex].top += nameHeight;
+    staffGroup.staffs[this.staffIndex].top += 1;
+    staffGroup.height += nameHeight;
     tabVoice.staff = staffGroupInfos;
     var tabVoiceIndex = voices.length;
     voices.splice(voices.length, 0, tabVoice);
@@ -16822,6 +17188,7 @@ var AbstractEngraver = function AbstractEngraver(getTextSize, tuneNumber, option
   this.percmap = options.percmap;
   this.initialClef = options.initialClef;
   this.jazzchords = !!options.jazzchords;
+  this.accentAbove = !!options.accentAbove;
   this.germanAlphabet = !!options.germanAlphabet;
   this.reset();
 };
@@ -17618,7 +17985,10 @@ AbstractEngraver.prototype.createNote = function (elem, nostem, isSingleLineStaf
     roomtaken += this.addGraceNotes(elem, voice, abselem, notehead, this.stemHeight * this.voiceScale, this.isBagpipes, roomtaken);
   }
   if (elem.decoration) {
-    this.decoration.createDecoration(voice, elem.decoration, abselem.top, notehead ? notehead.w : 0, abselem, roomtaken, dir, abselem.bottom, elem.positioning, this.hasVocals);
+    // TODO-PER: nostem is true if this is beamed. In that case we don't know where to place the decoration yet so just make a guess. This should be refactored to not place decorations until after the beams are determined.
+    // This should probably be combined with moveDecorations()
+    var bottom = nostem ? Math.min(-3, abselem.bottom - 6) : abselem.bottom;
+    this.decoration.createDecoration(voice, elem.decoration, abselem.top, notehead ? notehead.w : 0, abselem, roomtaken, dir, bottom, elem.positioning, this.hasVocals, this.accentAbove);
   }
   if (elem.barNumber) {
     abselem.addFixed(new RelativeElement(elem.barNumber, -10, 0, 0, {
@@ -17790,7 +18160,7 @@ AbstractEngraver.prototype.createBarLine = function (voice, elem, isFirstStaff)
     abselem.addRight(anchor);
   }
   if (elem.decoration) {
-    this.decoration.createDecoration(voice, elem.decoration, 12, thick ? 3 : 1, abselem, 0, "down", 2, elem.positioning, this.hasVocals);
+    this.decoration.createDecoration(voice, elem.decoration, 12, thick ? 3 : 1, abselem, 0, "down", 2, elem.positioning, this.hasVocals, this.accentAbove);
   }
   if (thick) {
     dx += 4; //3 hardcoded;
@@ -17860,100 +18230,121 @@ var addChord = function addChord(getTextSize, abselem, elem, roomTaken, roomTake
   for (var i = 0; i < elem.chord.length; i++) {
     var pos = elem.chord[i].position;
     var rel_position = elem.chord[i].rel_position;
-    var chords = elem.chord[i].name.split("\n");
-    for (var j = chords.length - 1; j >= 0; j--) {
-      // parse these in opposite order because we place them from bottom to top.
-      var chord = chords[j];
-      var x = 0;
-      var y;
-      var font;
-      var klass;
-      if (pos === "left" || pos === "right" || pos === "below" || pos === "above" || !!rel_position) {
-        font = 'annotationfont';
-        klass = "annotation";
-      } else {
-        font = 'gchordfont';
-        klass = "chord";
-        chord = translateChord(chord, jazzchords, germanAlphabet);
-      }
-      var attr = getTextSize.attr(font, klass);
-      var dim = getTextSize.calc(chord, font, klass);
-      var chordWidth = dim.width;
-      var chordHeight = dim.height / spacing.STEP;
-      switch (pos) {
-        case "left":
-          roomTaken += chordWidth + 7;
-          x = -roomTaken; // TODO-PER: This is just a guess from trial and error
-          y = elem.averagepitch;
-          abselem.addExtra(new RelativeElement(chord, x, chordWidth + 4, y, {
-            type: "text",
-            height: chordHeight,
-            dim: attr,
-            position: "left"
-          }));
-          break;
-        case "right":
-          roomTakenRight += 4;
-          x = roomTakenRight; // TODO-PER: This is just a guess from trial and error
-          y = elem.averagepitch;
-          abselem.addRight(new RelativeElement(chord, x, chordWidth + 4, y, {
-            type: "text",
-            height: chordHeight,
-            dim: attr,
-            position: "right"
-          }));
-          break;
-        case "below":
-          // setting the y-coordinate to undefined for now: it will be overwritten later on, after we figure out what the highest element on the line is.
-          abselem.addRight(new RelativeElement(chord, 0, 0, undefined, {
+    var isAnnotation = pos === "left" || pos === "right" || pos === "below" || pos === "above" || !!rel_position;
+    var font;
+    var klass;
+    if (isAnnotation) {
+      font = 'annotationfont';
+      klass = "abcjs-annotation";
+    } else {
+      font = 'gchordfont';
+      klass = "abcjs-chord";
+    }
+    var attr = getTextSize.attr(font, klass);
+    var name = elem.chord[i].name;
+    var ret;
+    //console.log("chord",name)
+    if (typeof name === "string") {
+      ret = chordString(name, pos, rel_position, isAnnotation, font, klass, attr, getTextSize, abselem, elem, roomTaken, roomTakenRight, noteheadWidth, jazzchords, germanAlphabet);
+      roomTaken = ret.roomTaken;
+      roomTakenRight = ret.roomTakenRight;
+    } else {
+      for (var j = 0; j < name.length; j++) {
+        ret = chordString(name[j].text, pos, rel_position, isAnnotation, font, klass, attr, getTextSize, abselem, elem, roomTaken, roomTakenRight, noteheadWidth, jazzchords, germanAlphabet);
+        roomTaken = ret.roomTaken;
+        roomTakenRight = ret.roomTakenRight;
+      }
+    }
+  }
+  return {
+    roomTaken: roomTaken,
+    roomTakenRight: roomTakenRight
+  };
+};
+function chordString(chordString, pos, rel_position, isAnnotation, font, klass, attr, getTextSize, abselem, elem, roomTaken, roomTakenRight, noteheadWidth, jazzchords, germanAlphabet) {
+  var chords = chordString.split("\n");
+  for (var j = chords.length - 1; j >= 0; j--) {
+    // parse these in opposite order because we place them from bottom to top.
+    var chord = chords[j];
+    var x = 0;
+    var y;
+    if (!isAnnotation) chord = translateChord(chord, jazzchords, germanAlphabet);
+    var dim = getTextSize.calc(chord, font, klass);
+    var chordWidth = dim.width;
+    var chordHeight = dim.height / spacing.STEP;
+    switch (pos) {
+      case "left":
+        roomTaken += chordWidth + 7;
+        x = -roomTaken; // TODO-PER: This is just a guess from trial and error
+        y = elem.averagepitch;
+        abselem.addExtra(new RelativeElement(chord, x, chordWidth + 4, y, {
+          type: "text",
+          height: chordHeight,
+          dim: attr,
+          position: "left"
+        }));
+        break;
+      case "right":
+        roomTakenRight += 4;
+        x = roomTakenRight; // TODO-PER: This is just a guess from trial and error
+        y = elem.averagepitch;
+        abselem.addRight(new RelativeElement(chord, x, chordWidth + 4, y, {
+          type: "text",
+          height: chordHeight,
+          dim: attr,
+          position: "right"
+        }));
+        break;
+      case "below":
+        // setting the y-coordinate to undefined for now: it will be overwritten later on, after we figure out what the highest element on the line is.
+        abselem.addRight(new RelativeElement(chord, 0, 0, undefined, {
+          type: "text",
+          position: "below",
+          height: chordHeight,
+          dim: attr,
+          realWidth: chordWidth
+        }));
+        break;
+      case "above":
+        // setting the y-coordinate to undefined for now: it will be overwritten later on, after we figure out what the highest element on the line is.
+        abselem.addRight(new RelativeElement(chord, 0, 0, undefined, {
+          type: "text",
+          position: "above",
+          height: chordHeight,
+          dim: attr,
+          realWidth: chordWidth
+        }));
+        break;
+      default:
+        if (rel_position) {
+          var relPositionY = rel_position.y + 3 * spacing.STEP; // TODO-PER: this is a fudge factor to make it line up with abcm2ps
+          abselem.addRight(new RelativeElement(chord, x + rel_position.x, 0, elem.minpitch + relPositionY / spacing.STEP, {
+            position: "relative",
             type: "text",
-            position: "below",
             height: chordHeight,
-            dim: attr,
-            realWidth: chordWidth
+            dim: attr
           }));
-          break;
-        case "above":
+        } else {
           // setting the y-coordinate to undefined for now: it will be overwritten later on, after we figure out what the highest element on the line is.
-          abselem.addRight(new RelativeElement(chord, 0, 0, undefined, {
-            type: "text",
-            position: "above",
-            height: chordHeight,
-            dim: attr,
-            realWidth: chordWidth
-          }));
-          break;
-        default:
-          if (rel_position) {
-            var relPositionY = rel_position.y + 3 * spacing.STEP; // TODO-PER: this is a fudge factor to make it line up with abcm2ps
-            abselem.addRight(new RelativeElement(chord, x + rel_position.x, 0, elem.minpitch + relPositionY / spacing.STEP, {
-              position: "relative",
-              type: "text",
+          var pos2 = 'above';
+          if (elem.positioning && elem.positioning.chordPosition) pos2 = elem.positioning.chordPosition;
+          if (pos2 !== 'hidden') {
+            abselem.addCentered(new RelativeElement(chord, noteheadWidth / 2, chordWidth, undefined, {
+              type: "chord",
+              position: pos2,
               height: chordHeight,
-              dim: attr
+              dim: attr,
+              realWidth: chordWidth
             }));
-          } else {
-            // setting the y-coordinate to undefined for now: it will be overwritten later on, after we figure out what the highest element on the line is.
-            var pos2 = 'above';
-            if (elem.positioning && elem.positioning.chordPosition) pos2 = elem.positioning.chordPosition;
-            if (pos2 !== 'hidden') {
-              abselem.addCentered(new RelativeElement(chord, noteheadWidth / 2, chordWidth, undefined, {
-                type: "chord",
-                position: pos2,
-                height: chordHeight,
-                dim: attr,
-                realWidth: chordWidth
-              }));
-            }
           }
-      }
+        }
     }
   }
   return {
     roomTaken: roomTaken,
     roomTakenRight: roomTakenRight
   };
-};
+}
 module.exports = addChord;
 
 /***/ }),
@@ -17982,10 +18373,11 @@ function addTextIf(rows, params, getTextSize) {
     font: params.font,
     anchor: params.anchor,
     startChar: params.info.startChar,
-    endChar: params.info.endChar
+    endChar: params.info.endChar,
+    'dominant-baseline': params['dominant-baseline']
   };
   if (params.absElemType) attr.absElemType = params.absElemType;
-  if (!params.inGroup) attr.klass = params.klass;
+  if (!params.inGroup && params.klass) attr.klass = params.klass;
   if (params.name) attr.name = params.name;
   rows.push(attr);
   // If there are blank lines they won't be counted by getTextSize, so just get the height of one line and multiply
@@ -18441,10 +18833,10 @@ var Decoration = function Decoration() {
   this.minTop = 12; // TODO-PER: this is assuming a 5-line staff. Pass that info in.
   this.minBottom = 0;
 };
-var closeDecoration = function closeDecoration(voice, decoration, pitch, width, abselem, roomtaken, dir, minPitch) {
+var closeDecoration = function closeDecoration(voice, decoration, pitch, width, abselem, roomtaken, dir, minPitch, accentAbove) {
   var yPos;
   for (var i = 0; i < decoration.length; i++) {
-    if (decoration[i] === "staccato" || decoration[i] === "tenuto" || decoration[i] === "accent") {
+    if (decoration[i] === "staccato" || decoration[i] === "tenuto" || decoration[i] === "accent" && !accentAbove) {
       var symbol = "scripts." + decoration[i];
       if (decoration[i] === "accent") symbol = "scripts.sforzato";
       if (yPos === undefined) yPos = dir === "down" ? pitch + 2 : minPitch - 2;else yPos = dir === "down" ? yPos + 2 : yPos - 2;
@@ -18553,7 +18945,7 @@ var compoundDecoration = function compoundDecoration(decoration, pitch, width, a
     }
   }
 };
-var stackedDecoration = function stackedDecoration(decoration, width, abselem, yPos, positioning, minTop, minBottom) {
+var stackedDecoration = function stackedDecoration(decoration, width, abselem, yPos, positioning, minTop, minBottom, accentAbove) {
   function incrementPlacement(placement, height) {
     if (placement === 'above') yPos.above += height;else yPos.below -= height;
   }
@@ -18591,7 +18983,8 @@ var stackedDecoration = function stackedDecoration(decoration, width, abselem, y
     y = placement === 'above' ? y + height / 2 : y - height / 2; // Center the element vertically.
     abselem.addFixedX(new RelativeElement(symbol, deltaX, glyphs.getSymbolWidth(symbol), y, {
       klass: 'ornament',
-      thickness: glyphs.symbolHeightInPitches(symbol)
+      thickness: glyphs.symbolHeightInPitches(symbol),
+      position: placement
     }));
     incrementPlacement(placement, height);
   }
@@ -18692,6 +19085,12 @@ var stackedDecoration = function stackedDecoration(decoration, width, abselem, y
       case "mark":
         abselem.klass = "mark";
         break;
+      case "accent":
+        if (accentAbove) {
+          symbolDecoration("scripts.sforzato", positioning);
+          hasOne = true;
+        }
+        break;
     }
   }
   return hasOne;
@@ -18766,7 +19165,7 @@ Decoration.prototype.dynamicDecoration = function (voice, decoration, abselem, p
     voice.addOther(new GlissandoElem(glissando.start, glissando.stop));
   }
 };
-Decoration.prototype.createDecoration = function (voice, decoration, pitch, width, abselem, roomtaken, dir, minPitch, positioning, hasVocals) {
+Decoration.prototype.createDecoration = function (voice, decoration, pitch, width, abselem, roomtaken, dir, minPitch, positioning, hasVocals, accentAbove) {
   if (!positioning) positioning = {
     ornamentPosition: 'above',
     volumePosition: hasVocals ? 'above' : 'below',
@@ -18778,14 +19177,15 @@ Decoration.prototype.createDecoration = function (voice, decoration, pitch, widt
   compoundDecoration(decoration, pitch, width, abselem, dir);
 
   // treat staccato, accent, and tenuto first (may need to shift other markers)
-  var yPos = closeDecoration(voice, decoration, pitch, width, abselem, roomtaken, dir, minPitch);
+  var yPos = closeDecoration(voice, decoration, pitch, width, abselem, roomtaken, dir, minPitch, accentAbove);
   // yPos is an object containing 'above' and 'below'. That is the placement of the next symbol on either side.
 
   yPos.above = Math.max(yPos.above, this.minTop);
-  var hasOne = stackedDecoration(decoration, width, abselem, yPos, positioning.ornamentPosition, this.minTop, this.minBottom);
-  if (hasOne) {
-    //			abselem.top = Math.max(yPos.above + 3, abselem.top); // TODO-PER: Not sure why we need this fudge factor.
-  }
+  yPos.below = Math.min(yPos.below, minPitch);
+  var hasOne = stackedDecoration(decoration, width, abselem, yPos, positioning.ornamentPosition, this.minTop, minPitch, accentAbove);
+  //if (hasOne) {
+  //			abselem.top = Math.max(yPos.above + 3, abselem.top); // TODO-PER: Not sure why we need this fudge factor.
+  //}
   leftDecoration(decoration, abselem, roomtaken);
 };
 module.exports = Decoration;
@@ -19145,94 +19545,109 @@ module.exports = BeamElem;
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
 var addTextIf = __webpack_require__(/*! ../add-text-if */ "./src/write/creation/add-text-if.js");
-function BottomText(metaText, width, isPrint, paddingLeft, spacing, getTextSize) {
+var richText = __webpack_require__(/*! ./rich-text */ "./src/write/creation/elements/rich-text.js");
+function BottomText(metaText, width, isPrint, paddingLeft, spacing, shouldAddClasses, getTextSize) {
   this.rows = [];
-  if (metaText.unalignedWords && metaText.unalignedWords.length > 0) this.unalignedWords(metaText.unalignedWords, paddingLeft, spacing, getTextSize);
-  this.extraText(metaText, paddingLeft, spacing, getTextSize);
+  if (metaText.unalignedWords && metaText.unalignedWords.length > 0) this.unalignedWords(metaText.unalignedWords, paddingLeft, spacing, shouldAddClasses, getTextSize);
+  this.extraText(metaText, paddingLeft, spacing, shouldAddClasses, getTextSize);
   if (metaText.footer && isPrint) this.footer(metaText.footer, width, paddingLeft, getTextSize);
 }
-BottomText.prototype.unalignedWords = function (unalignedWords, paddingLeft, spacing, getTextSize) {
-  var klass = 'meta-bottom unaligned-words';
+BottomText.prototype.unalignedWords = function (unalignedWords, marginLeft, spacing, shouldAddClasses, getTextSize) {
+  var klass = shouldAddClasses ? 'abcjs-unaligned-words' : '';
   var defFont = 'wordsfont';
-  this.rows.push({
-    startGroup: "unalignedWords",
-    klass: 'abcjs-meta-bottom abcjs-unaligned-words',
-    name: "words"
-  });
   var space = getTextSize.calc("i", defFont, klass);
   this.rows.push({
     move: spacing.words
   });
-  for (var j = 0; j < unalignedWords.length; j++) {
-    if (unalignedWords[j] === '') this.rows.push({
-      move: space.height
-    });else if (typeof unalignedWords[j] === 'string') {
-      addTextIf(this.rows, {
-        marginLeft: paddingLeft,
-        text: unalignedWords[j],
+  addMultiLine(this.rows, '', unalignedWords, marginLeft, defFont, "unalignedWords", "unalignedWords", klass, "unalignedWords", spacing, shouldAddClasses, getTextSize);
+  this.rows.push({
+    move: space.height
+  });
+};
+function addSingleLine(rows, preface, text, marginLeft, klass, shouldAddClasses, getTextSize) {
+  if (text) {
+    if (preface) {
+      if (typeof text === 'string') text = preface + text;else text = [{
+        text: preface
+      }].concat(text);
+    }
+    klass = shouldAddClasses ? 'abcjs-extra-text ' + klass : '';
+    richText(rows, text, 'historyfont', klass, "description", marginLeft, {
+      absElemType: "extraText",
+      anchor: 'start'
+    }, getTextSize);
+  }
+}
+function addMultiLine(rows, preface, content, marginLeft, defFont, absElemType, groupName, klass, name, spacing, shouldAddClasses, getTextSize) {
+  if (content) {
+    klass = shouldAddClasses ? 'abcjs-extra-text ' + klass : '';
+    var size = getTextSize.calc("A", defFont, klass);
+    if (typeof content === 'string') {
+      if (preface) content = preface + "\n" + content;
+      addTextIf(rows, {
+        marginLeft: marginLeft,
+        text: content,
         font: defFont,
-        klass: klass,
-        inGroup: true,
-        name: "words"
+        absElemType: "extraText",
+        name: name,
+        'dominant-baseline': 'middle',
+        klass: klass
       }, getTextSize);
+      //rows.push({move: size.height*3/4})
     } else {
-      var largestY = 0;
-      var offsetX = 0;
-      for (var k = 0; k < unalignedWords[j].length; k++) {
-        var thisWord = unalignedWords[j][k];
-        var font = thisWord.font ? thisWord.font : defFont;
-        this.rows.push({
-          left: paddingLeft + offsetX,
-          text: thisWord.text,
-          font: font,
+      rows.push({
+        startGroup: groupName,
+        klass: klass,
+        name: name
+      });
+      rows.push({
+        move: spacing.info
+      });
+      if (preface) {
+        addTextIf(rows, {
+          marginLeft: marginLeft,
+          text: preface,
+          font: defFont,
+          absElemType: "extraText",
+          name: name,
+          'dominant-baseline': 'middle'
+        }, getTextSize);
+        rows.push({
+          move: size.height * 3 / 4
+        });
+      }
+      for (var j = 0; j < content.length; j++) {
+        richText(rows, content[j], defFont, '', name, marginLeft, {
           anchor: 'start'
+        }, getTextSize);
+        // TODO-PER: Hack! the string and rich lines should have used up the same amount of space without this.
+        if (j < content.length - 1 && typeof content[j] === 'string' && typeof content[j + 1] !== 'string') rows.push({
+          move: size.height * 3 / 4
         });
-        var size = getTextSize.calc(thisWord.text, defFont, klass);
-        largestY = Math.max(largestY, size.height);
-        offsetX += size.width;
-        // If the phrase ends in a space, then that is not counted in the width, so we need to add that in ourselves.
-        if (thisWord.text[thisWord.text.length - 1] === ' ') {
-          offsetX += space.width;
-        }
       }
-      this.rows.push({
-        move: largestY
+      rows.push({
+        endGroup: groupName,
+        absElemType: absElemType,
+        startChar: -1,
+        endChar: -1,
+        name: name
+      });
+      rows.push({
+        move: size.height
       });
     }
   }
-  this.rows.push({
-    move: space.height * 2
-  });
-  this.rows.push({
-    endGroup: "unalignedWords",
-    absElemType: "unalignedWords",
-    startChar: -1,
-    endChar: -1,
-    name: "unalignedWords"
-  });
-};
-BottomText.prototype.extraText = function (metaText, marginLeft, spacing, getTextSize) {
-  var extraText = "";
-  if (metaText.book) extraText += "Book: " + metaText.book + "\n";
-  if (metaText.source) extraText += "Source: " + metaText.source + "\n";
-  if (metaText.discography) extraText += "Discography: " + metaText.discography + "\n";
-  if (metaText.notes) extraText += "Notes: " + metaText.notes + "\n";
-  if (metaText.transcription) extraText += "Transcription: " + metaText.transcription + "\n";
-  if (metaText.history) extraText += "History: " + metaText.history + "\n";
-  if (metaText['abc-copyright']) extraText += "Copyright: " + metaText['abc-copyright'] + "\n";
-  if (metaText['abc-creator']) extraText += "Creator: " + metaText['abc-creator'] + "\n";
-  if (metaText['abc-edited-by']) extraText += "Edited By: " + metaText['abc-edited-by'] + "\n";
-  if (extraText.length > 0) {
-    addTextIf(this.rows, {
-      marginLeft: marginLeft,
-      text: extraText,
-      font: 'historyfont',
-      klass: 'meta-bottom extra-text',
-      marginTop: spacing.info,
-      absElemType: "extraText",
-      name: "description"
-    }, getTextSize);
-  }
+}
+BottomText.prototype.extraText = function (metaText, marginLeft, spacing, shouldAddClasses, getTextSize) {
+  addSingleLine(this.rows, "Book: ", metaText.book, marginLeft, 'abcjs-book', shouldAddClasses, getTextSize);
+  addSingleLine(this.rows, "Source: ", metaText.source, marginLeft, 'abcjs-source', shouldAddClasses, getTextSize);
+  addSingleLine(this.rows, "Discography: ", metaText.discography, marginLeft, 'abcjs-discography', shouldAddClasses, getTextSize);
+  addMultiLine(this.rows, 'Notes:', metaText.notes, marginLeft, 'historyfont', "extraText", "notes", 'abcjs-notes', "description", spacing, shouldAddClasses, getTextSize);
+  addSingleLine(this.rows, "Transcription: ", metaText.transcription, marginLeft, 'abcjs-transcription', shouldAddClasses, getTextSize);
+  addMultiLine(this.rows, "History:", metaText.history, marginLeft, 'historyfont', "extraText", "history", 'abcjs-history', "description", spacing, shouldAddClasses, getTextSize);
+  addSingleLine(this.rows, "Copyright: ", metaText['abc-copyright'], marginLeft, 'abcjs-copyright', shouldAddClasses, getTextSize);
+  addSingleLine(this.rows, "Creator: ", metaText['abc-creator'], marginLeft, 'abcjs-creator', shouldAddClasses, getTextSize);
+  addSingleLine(this.rows, "Edited By: ", metaText['abc-edited-by'], marginLeft, 'abcjs-edited-by', shouldAddClasses, getTextSize);
 };
 BottomText.prototype.footer = function (footer, width, paddingLeft, getTextSize) {
   var klass = 'header meta-bottom';
@@ -19574,6 +19989,76 @@ module.exports = RelativeElement;
 
 /***/ }),
 
+/***/ "./src/write/creation/elements/rich-text.js":
+/*!**************************************************!*\
+  !*** ./src/write/creation/elements/rich-text.js ***!
+  \**************************************************/
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+var addTextIf = __webpack_require__(/*! ../add-text-if */ "./src/write/creation/add-text-if.js");
+function richText(rows, str, defFont, klass, name, paddingLeft, attr, getTextSize) {
+  var space = getTextSize.calc("i", defFont, klass);
+  if (str === '') {
+    rows.push({
+      move: space.height
+    });
+  } else {
+    if (typeof str === 'string') {
+      addTextIf(rows, {
+        marginLeft: paddingLeft,
+        text: str,
+        font: defFont,
+        klass: klass,
+        marginTop: attr.marginTop,
+        anchor: attr.anchor,
+        absElemType: attr.absElemType,
+        info: attr.info,
+        name: name
+      }, getTextSize);
+      return;
+    }
+    if (attr.marginTop) rows.push({
+      move: attr.marginTop
+    });
+    var largestY = 0;
+    var gap = 0;
+    var row = {
+      left: paddingLeft,
+      anchor: attr.anchor,
+      phrases: []
+    };
+    if (klass) row.klass = klass;
+    rows.push(row);
+    for (var k = 0; k < str.length; k++) {
+      var thisWord = str[k];
+      var font = thisWord.font ? thisWord.font : getTextSize.attr(defFont, klass).font;
+      var phrase = {
+        content: thisWord.text
+      };
+      if (font) phrase.attrs = {
+        "font-family": getTextSize.getFamily(font.face),
+        "font-size": font.size,
+        "font-weight": font.weight,
+        "font-style": font.style,
+        "font-decoration": font.decoration
+      };
+      //if (thisWord.text) {
+      row.phrases.push(phrase);
+      var size = getTextSize.calc(thisWord.text, font, klass);
+      largestY = Math.max(largestY, size.height);
+      if (thisWord.text[thisWord.text.length - 1] === ' ') {
+        gap = space.width;
+      }
+    }
+    rows.push({
+      move: largestY
+    });
+  }
+}
+module.exports = richText;
+
+/***/ }),
+
 /***/ "./src/write/creation/elements/separator.js":
 /*!**************************************************!*\
   !*** ./src/write/creation/elements/separator.js ***!
@@ -19966,6 +20451,23 @@ TieElem.prototype.calcSlurY = function () {
       this.endY = midPoint;
       this.endX += Math.round(this.anchor2.w / 2); // When going to the middle of the stem, bump the line to the right a little bit to make it look right.
     } else this.endY = this.above && beamInterferes ? this.anchor2.highestVert : this.anchor2.pitch;
+    if (this.anchor1.scalex === 1) {
+      // Need a way to tell if this is a grace note - if so then keep the slur as close as possible. TODO-PER-HACK: this should be more declaratively determined.
+      var hasBeam1 = !!this.anchor1.parent.beam;
+      var hasBeam2 = !!this.anchor2.parent.beam;
+      if (hasBeam1) {
+        var isLastInBeam = this.anchor1.parent === this.anchor1.parent.beam.elems[this.anchor1.parent.beam.elems.length - 1];
+        if (!isLastInBeam) {
+          if (this.above) this.startY = this.anchor1.parent.fixed.t;else this.startY = this.anchor1.parent.fixed.b;
+        }
+      }
+      if (hasBeam2) {
+        var isFirstInBeam = this.anchor2.parent === this.anchor2.parent.beam.elems[0];
+        if (!isFirstInBeam) {
+          if (this.above) this.endY = this.anchor2.parent.fixed.t;else this.endY = this.anchor2.parent.fixed.b;
+        }
+      }
+    }
   } else if (this.anchor1) {
     this.startY = this.endY = this.anchor1.pitch;
   } else if (this.anchor2) {
@@ -19998,7 +20500,8 @@ module.exports = TieElem;
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
 var addTextIf = __webpack_require__(/*! ../add-text-if */ "./src/write/creation/add-text-if.js");
-function TopText(metaText, metaTextInfo, formatting, lines, width, isPrint, paddingLeft, spacing, getTextSize) {
+var richText = __webpack_require__(/*! ./rich-text */ "./src/write/creation/elements/rich-text.js");
+function TopText(metaText, metaTextInfo, formatting, lines, width, isPrint, paddingLeft, spacing, shouldAddClasses, getTextSize) {
   this.rows = [];
   if (metaText.header && isPrint) {
     // Note: whether there is a header or not doesn't change any other positioning, so this doesn't change the Y-coordinate.
@@ -20043,31 +20546,23 @@ function TopText(metaText, metaTextInfo, formatting, lines, width, isPrint, padd
   var tAnchor = formatting.titleleft ? 'start' : 'middle';
   var tLeft = formatting.titleleft ? paddingLeft : paddingLeft + width / 2;
   if (metaText.title) {
-    addTextIf(this.rows, {
-      marginLeft: tLeft,
-      text: metaText.title,
-      font: 'titlefont',
-      klass: 'title meta-top',
+    var klass = shouldAddClasses ? 'abcjs-title' : '';
+    richText(this.rows, metaText.title, "titlefont", klass, 'title', tLeft, {
       marginTop: spacing.title,
       anchor: tAnchor,
       absElemType: "title",
-      info: metaTextInfo.title,
-      name: "title"
+      info: metaTextInfo.title
     }, getTextSize);
   }
   if (lines.length) {
     var index = 0;
     while (index < lines.length && lines[index].subtitle) {
-      addTextIf(this.rows, {
-        marginLeft: tLeft,
-        text: lines[index].subtitle.text,
-        font: 'subtitlefont',
-        klass: 'text meta-top subtitle',
+      var klass = shouldAddClasses ? 'abcjs-text abcjs-subtitle' : '';
+      richText(this.rows, lines[index].subtitle.text, "subtitlefont", klass, 'subtitle', tLeft, {
         marginTop: spacing.subtitle,
         anchor: tAnchor,
         absElemType: "subtitle",
-        info: lines[index].subtitle,
-        name: "subtitle"
+        info: lines[index].subtitle
       }, getTextSize);
       index++;
     }
@@ -20078,54 +20573,68 @@ function TopText(metaText, metaTextInfo, formatting, lines, width, isPrint, padd
     });
     if (metaText.rhythm && metaText.rhythm.length > 0) {
       var noMove = !!(metaText.composer || metaText.origin);
+      var klass = shouldAddClasses ? 'abcjs-rhythm' : '';
       addTextIf(this.rows, {
         marginLeft: paddingLeft,
         text: metaText.rhythm,
         font: 'infofont',
-        klass: 'meta-top rhythm',
+        klass: klass,
         absElemType: "rhythm",
         noMove: noMove,
         info: metaTextInfo.rhythm,
         name: "rhythm"
       }, getTextSize);
     }
-    var composerLine = "";
-    if (metaText.composer) composerLine += metaText.composer;
-    if (metaText.origin) composerLine += ' (' + metaText.origin + ')';
-    if (composerLine.length > 0) {
-      addTextIf(this.rows, {
-        marginLeft: paddingLeft + width,
-        text: composerLine,
-        font: 'composerfont',
-        klass: 'meta-top composer',
+    var hasSimpleComposerLine = true;
+    if (metaText.composer && typeof metaText.composer !== 'string') hasSimpleComposerLine = false;
+    if (metaText.origin && typeof metaText.origin !== 'string') hasSimpleComposerLine = false;
+    var composerLine = metaText.composer ? metaText.composer : '';
+    if (metaText.origin) {
+      if (typeof composerLine === 'string' && typeof metaText.origin === 'string') composerLine += ' (' + metaText.origin + ')';else if (typeof composerLine === 'string' && typeof metaText.origin !== 'string') {
+        composerLine = [{
+          text: composerLine
+        }];
+        composerLine.push({
+          text: " ("
+        });
+        composerLine = composerLine.concat(metaText.origin);
+        composerLine.push({
+          text: ")"
+        });
+      } else {
+        composerLine.push({
+          text: " ("
+        });
+        composerLine = composerLine.concat(metaText.origin);
+        composerLine.push({
+          text: ")"
+        });
+      }
+    }
+    if (composerLine) {
+      var klass = shouldAddClasses ? 'abcjs-composer' : '';
+      richText(this.rows, composerLine, 'composerfont', klass, "composer", paddingLeft + width, {
         anchor: "end",
         absElemType: "composer",
         info: metaTextInfo.composer,
-        name: "composer"
+        ingroup: true
       }, getTextSize);
     }
   }
   if (metaText.author && metaText.author.length > 0) {
-    addTextIf(this.rows, {
-      marginLeft: paddingLeft + width,
-      text: metaText.author,
-      font: 'composerfont',
-      klass: 'meta-top author',
+    var klass = shouldAddClasses ? 'abcjs-author' : '';
+    richText(this.rows, metaText.author, 'composerfont', klass, "author", paddingLeft + width, {
       anchor: "end",
       absElemType: "author",
-      info: metaTextInfo.author,
-      name: "author"
+      info: metaTextInfo.author
     }, getTextSize);
   }
   if (metaText.partOrder && metaText.partOrder.length > 0) {
-    addTextIf(this.rows, {
-      marginLeft: paddingLeft,
-      text: metaText.partOrder,
-      font: 'partsfont',
-      klass: 'meta-top part-order',
+    var klass = shouldAddClasses ? 'abcjs-part-order' : '';
+    richText(this.rows, metaText.partOrder, 'partsfont', klass, "part-order", paddingLeft, {
       absElemType: "partOrder",
       info: metaTextInfo.partOrder,
-      name: "part-order"
+      anchor: 'start'
     }, getTextSize);
   }
 }
@@ -20671,7 +21180,7 @@ var glyphs = {
     h: 7.515
   },
   ',': {
-    d: [['M', 1.32, -3.36], ['c', 0.57, -0.15, 1.17, 0.03, 1.59, 0.45], ['c', 0.45, 0.45, 0.60, 0.96, 0.51, 1.89], ['c', -0.09, 1.23, -0.42, 2.46, -0.99, 3.93], ['c', -0.30, 0.72, -0.72, 1.62, -0.78, 1.68], ['c', -0.18, 0.21, -0.51, 0.18, -0.66, -0.06], ['c', -0.03, -0.06, -0.06, -0.15, -0.06, -0.18], ['c', 0.00, -0.06, 0.12, -0.33, 0.24, -0.63], ['c', 0.84, -1.80, 1.02, -2.61, 0.69, -3.24], ['c', -0.12, -0.24, -0.27, -0.36, -0.75, -0.60], ['c', -0.36, -0.15, -0.42, -0.21, -0.60, -0.39], ['c', -0.69, -0.69, -0.69, -1.71, 0.00, -2.40], ['c', 0.21, -0.21, 0.51, -0.39, 0.81, -0.45], ['z']],
+    d: [['M', 1.85, -3.36], ['c', 0.57, -0.15, 1.17, 0.03, 1.59, 0.45], ['c', 0.45, 0.45, 0.60, 0.96, 0.51, 1.89], ['c', -0.09, 1.23, -0.42, 2.46, -0.99, 3.93], ['c', -0.30, 0.72, -0.72, 1.62, -0.78, 1.68], ['c', -0.18, 0.21, -0.51, 0.18, -0.66, -0.06], ['c', -0.03, -0.06, -0.06, -0.15, -0.06, -0.18], ['c', 0.00, -0.06, 0.12, -0.33, 0.24, -0.63], ['c', 0.84, -1.80, 1.02, -2.61, 0.69, -3.24], ['c', -0.12, -0.24, -0.27, -0.36, -0.75, -0.60], ['c', -0.36, -0.15, -0.42, -0.21, -0.60, -0.39], ['c', -0.69, -0.69, -0.69, -1.71, 0.00, -2.40], ['c', 0.21, -0.21, 0.51, -0.39, 0.81, -0.45], ['z']],
     w: 3.452,
     h: 8.143
   },
@@ -20940,7 +21449,10 @@ function drawAbsolute(renderer, params, bartop, selectables, staffPos) {
         drawTempo(renderer, child);
         break;
       default:
-        drawRelativeElement(renderer, child, bartop);
+        var el = drawRelativeElement(renderer, child, bartop);
+        if (child.type === "symbol" && child.c && child.c.indexOf('notehead') >= 0) {
+          el.setAttribute('class', 'abcjs-notehead');
+        }
     }
   }
   var klass = params.type;
@@ -21243,7 +21755,9 @@ var spacing = __webpack_require__(/*! ../helpers/spacing */ "./src/write/helpers
 var Selectables = __webpack_require__(/*! ./selectables */ "./src/write/draw/selectables.js");
 function draw(renderer, classes, abcTune, width, maxWidth, responsive, scale, selectTypes, tuneNumber, lineOffset) {
   var selectables = new Selectables(renderer.paper, selectTypes, tuneNumber);
-  renderer.paper.openGroup();
+  var groupClasses = {};
+  if (classes.shouldAddClasses) groupClasses.klass = "abcjs-meta-top";
+  renderer.paper.openGroup(groupClasses);
   renderer.moveY(renderer.padding.top);
   nonMusic(renderer, abcTune.topText, selectables);
   renderer.paper.closeGroup();
@@ -21253,7 +21767,8 @@ function draw(renderer, classes, abcTune, width, maxWidth, responsive, scale, se
     classes.incrLine();
     var abcLine = abcTune.lines[line];
     if (abcLine.staff) {
-      renderer.paper.openGroup();
+      if (classes.shouldAddClasses) groupClasses.klass = "abcjs-staff-wrapper abcjs-l" + classes.lineNumber;
+      renderer.paper.openGroup(groupClasses);
       if (abcLine.vskip) {
         renderer.moveY(abcLine.vskip);
       }
@@ -21263,14 +21778,16 @@ function draw(renderer, classes, abcTune, width, maxWidth, responsive, scale, se
       staffgroups.push(staffgroup);
       renderer.paper.closeGroup();
     } else if (abcLine.nonMusic) {
-      renderer.paper.openGroup();
+      if (classes.shouldAddClasses) groupClasses.klass = "abcjs-non-music";
+      renderer.paper.openGroup(groupClasses);
       nonMusic(renderer, abcLine.nonMusic, selectables);
       renderer.paper.closeGroup();
     }
   }
   classes.reset();
   if (abcTune.bottomText && abcTune.bottomText.rows && abcTune.bottomText.rows.length > 0) {
-    renderer.paper.openGroup();
+    if (classes.shouldAddClasses) groupClasses.klass = "abcjs-meta-bottom";
+    renderer.paper.openGroup(groupClasses);
     renderer.moveY(24); // TODO-PER: Empirically discovered. What variable should this be?
     nonMusic(renderer, abcTune.bottomText, selectables);
     renderer.paper.closeGroup();
@@ -21554,12 +22071,14 @@ function nonMusic(renderer, obj, selectables) {
       renderer.absolutemoveY(row.absmove);
     } else if (row.move) {
       renderer.moveY(row.move);
-    } else if (row.text) {
+    } else if (row.text || row.phrases) {
       var x = row.left ? row.left : 0;
       var el = renderText(renderer, {
         x: x,
         y: renderer.y,
         text: row.text,
+        phrases: row.phrases,
+        'dominant-baseline': row['dominant-baseline'],
         type: row.font,
         klass: row.klass,
         name: row.name,
@@ -21841,7 +22360,7 @@ function drawRelativeElement(renderer, params, bartop) {
     case "tabNumber":
       var hAnchor = "middle";
       var tabFont = "tabnumberfont";
-      var tabClass = 'tab-number';
+      var tabClass = 'abcjs-tab-number';
       if (params.isGrace) {
         tabFont = "tabgracefont";
         y += 2.5;
@@ -22548,7 +23067,6 @@ function drawTempo(renderer, params) {
       klass: 'abcjs-tempo',
       anchor: "start",
       noClass: true,
-      "dominant-baseline": "ideographic",
       name: "pre"
     }, true);
     size = renderer.controller.getTextSize.calc(params.tempo.preString, 'tempofont', 'tempo', text);
@@ -22608,6 +23126,13 @@ module.exports = drawTempo;
 var roundNumber = __webpack_require__(/*! ./round-number */ "./src/write/draw/round-number.js");
 function renderText(renderer, params, alreadyInGroup) {
   var y = params.y;
+
+  // TODO-PER: Probably need to merge the regular text and rich text better. At the least, rich text loses the font box.
+  if (params.phrases) {
+    //richTextLine = function (phrases, x, y, klass, anchor, target)
+    var elem = renderer.paper.richTextLine(params.phrases, params.x, params.y, params.klass, params.anchor);
+    return elem;
+  }
   if (params.lane) {
     var laneMargin = params.dim.font.size * 0.25;
     y += (params.dim.font.size + laneMargin) * params.lane;
@@ -22618,6 +23143,7 @@ function renderText(renderer, params, alreadyInGroup) {
     hash.attr["class"] = params.klass;
   } else hash = renderer.controller.getFontAndAttr.calc(params.type, params.klass);
   if (params.anchor) hash.attr["text-anchor"] = params.anchor;
+  if (params['dominant-baseline']) hash.attr["dominant-baseline"] = params['dominant-baseline'];
   hash.attr.x = params.x;
   hash.attr.y = y;
   if (!params.centerVertically) hash.attr.y += hash.font.size;
@@ -22991,6 +23517,7 @@ var GetFontAndAttr = __webpack_require__(/*! ./helpers/get-font-and-attr */ "./s
 var GetTextSize = __webpack_require__(/*! ./helpers/get-text-size */ "./src/write/helpers/get-text-size.js");
 var draw = __webpack_require__(/*! ./draw/draw */ "./src/write/draw/draw.js");
 var tablatures = __webpack_require__(/*! ../api/abc_tablatures */ "./src/api/abc_tablatures.js");
+var findSelectableElement = __webpack_require__(/*! ./interactive/find-selectable-element */ "./src/write/interactive/find-selectable-element.js");
 
 /**
  * @class
@@ -23006,6 +23533,7 @@ var tablatures = __webpack_require__(/*! ../api/abc_tablatures */ "./src/api/abc
  */
 var EngraverController = function EngraverController(paper, params) {
   params = params || {};
+  this.findSelectableElement = findSelectableElement;
   this.oneSvgPerLine = params.oneSvgPerLine;
   this.selectionColor = params.selectionColor;
   this.dragColor = params.dragColor ? params.dragColor : params.selectionColor;
@@ -23014,6 +23542,7 @@ var EngraverController = function EngraverController(paper, params) {
   this.responsive = params.responsive;
   this.space = 3 * spacing.SPACE;
   this.initialClef = params.initialClef;
+  this.timeBasedLayout = params.timeBasedLayout;
   this.expandToWidest = !!params.expandToWidest;
   this.scale = params.scale ? parseFloat(params.scale) : 0;
   this.classes = new Classes({
@@ -23036,6 +23565,7 @@ var EngraverController = function EngraverController(paper, params) {
   this.renderer.setPaddingOverride(params);
   if (params.showDebug) this.renderer.showDebug = params.showDebug;
   if (params.jazzchords) this.jazzchords = params.jazzchords;
+  if (params.accentAbove) this.accentAbove = params.accentAbove;
   if (params.germanAlphabet) this.germanAlphabet = params.germanAlphabet;
   if (params.lineThickness) this.lineThickness = params.lineThickness;
   this.renderer.controller = this; // TODO-GD needed for highlighting
@@ -23087,11 +23617,12 @@ EngraverController.prototype.getMeasureWidths = function (abcTune) {
   this.reset();
   this.getFontAndAttr = new GetFontAndAttr(abcTune.formatting, this.classes);
   this.getTextSize = new GetTextSize(this.getFontAndAttr, this.renderer.paper);
+  var origJazzChords = this.jazzchords;
   this.setupTune(abcTune, 0);
   this.constructTuneElements(abcTune);
   // layout() sets the x-coordinate of the abcTune element here:
   // abcTune.lines[0].staffGroup.voices[0].children[0].x
-  layout(this.renderer, abcTune, 0, this.space);
+  layout(this.renderer, abcTune, 0, this.space, this.timeBasedLayout);
   var ret = [];
   var section;
   var needNewSection = true;
@@ -23130,11 +23661,13 @@ EngraverController.prototype.getMeasureWidths = function (abcTune) {
       //section.height += calcHeight(abcLine.staffGroup) * spacing.STEP;
     } else needNewSection = true;
   }
+  this.jazzchords = origJazzChords;
   return ret;
 };
 EngraverController.prototype.setupTune = function (abcTune, tuneNumber) {
   this.classes.reset();
   if (abcTune.formatting.jazzchords !== undefined) this.jazzchords = abcTune.formatting.jazzchords;
+  if (abcTune.formatting.accentAbove !== undefined) this.accentAbove = abcTune.formatting.accentAbove;
   this.renderer.newTune(abcTune);
   this.engraver = new AbstractEngraver(this.getTextSize, tuneNumber, {
     bagpipes: abcTune.formatting.bagpipes,
@@ -23144,6 +23677,8 @@ EngraverController.prototype.setupTune = function (abcTune, tuneNumber) {
     percmap: abcTune.formatting.percmap,
     initialClef: this.initialClef,
     jazzchords: this.jazzchords,
+    timeBasedLayout: this.timeBasedLayout,
+    accentAbove: this.accentAbove,
     germanAlphabet: this.germanAlphabet
   });
   this.engraver.setStemHeight(this.renderer.spacing.stemHeight);
@@ -23162,7 +23697,7 @@ EngraverController.prototype.setupTune = function (abcTune, tuneNumber) {
   return scale;
 };
 EngraverController.prototype.constructTuneElements = function (abcTune) {
-  abcTune.topText = new TopText(abcTune.metaText, abcTune.metaTextInfo, abcTune.formatting, abcTune.lines, this.width, this.renderer.isPrint, this.renderer.padding.left, this.renderer.spacing, this.getTextSize);
+  abcTune.topText = new TopText(abcTune.metaText, abcTune.metaTextInfo, abcTune.formatting, abcTune.lines, this.width, this.renderer.isPrint, this.renderer.padding.left, this.renderer.spacing, this.classes.shouldAddClasses, this.getTextSize);
 
   // Generate the raw staff line data
   var i;
@@ -23189,20 +23724,49 @@ EngraverController.prototype.constructTuneElements = function (abcTune) {
       abcLine.nonMusic = new Separator(abcLine.separator.spaceAbove, abcLine.separator.lineLength, abcLine.separator.spaceBelow);
     }
   }
-  abcTune.bottomText = new BottomText(abcTune.metaText, this.width, this.renderer.isPrint, this.renderer.padding.left, this.renderer.spacing, this.getTextSize);
+  abcTune.bottomText = new BottomText(abcTune.metaText, this.width, this.renderer.isPrint, this.renderer.padding.left, this.renderer.spacing, this.classes.shouldAddClasses, this.getTextSize);
 };
 EngraverController.prototype.engraveTune = function (abcTune, tuneNumber, lineOffset) {
+  var origJazzChords = this.jazzchords;
   var scale = this.setupTune(abcTune, tuneNumber);
 
   // Create all of the element objects that will appear on the page.
   this.constructTuneElements(abcTune);
 
+  //Set the top text now that we know the width
+
   // Do all the positioning, both horizontally and vertically
-  var maxWidth = layout(this.renderer, abcTune, this.width, this.space, this.expandToWidest);
+  var maxWidth = layout(this.renderer, abcTune, this.width, this.space, this.expandToWidest, this.timeBasedLayout);
 
   //Set the top text now that we know the width
   if (this.expandToWidest && maxWidth > this.width + 1) {
-    abcTune.topText = new TopText(abcTune.metaText, abcTune.metaTextInfo, abcTune.formatting, abcTune.lines, maxWidth, this.renderer.isPrint, this.renderer.padding.left, this.renderer.spacing, this.getTextSize);
+    abcTune.topText = new TopText(abcTune.metaText, abcTune.metaTextInfo, abcTune.formatting, abcTune.lines, maxWidth, this.renderer.isPrint, this.renderer.padding.left, this.renderer.spacing, this.classes.shouldAddClasses, this.getTextSize);
+    if (abcTune.lines && abcTune.lines.length > 0) {
+      var nlines = abcTune.lines.length;
+      for (var i = 0; i < nlines; ++i) {
+        var entry = abcTune.lines[i];
+        if (entry.nonMusic) {
+          if (entry.nonMusic.rows && entry.nonMusic.rows.length > 0) {
+            var nRows = entry.nonMusic.rows.length;
+            for (var j = 0; j < nRows; ++j) {
+              var thisRow = entry.nonMusic.rows[j];
+              // Recenter the element if it's a subtitle or centered text 
+              if (thisRow.left) {
+                if (entry.subtitle) {
+                  thisRow.left = maxWidth / 2 + this.renderer.padding.left;
+                } else {
+                  if (entry.text && entry.text.length > 0) {
+                    if (entry.text[0].center) {
+                      thisRow.left = maxWidth / 2 + this.renderer.padding.left;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
   }
 
   // Deal with tablature for staff
@@ -23216,13 +23780,14 @@ EngraverController.prototype.engraveTune = function (abcTune, tuneNumber, lineOf
   this.selectables = ret.selectables;
   if (this.oneSvgPerLine) {
     var div = this.renderer.paper.svg.parentNode;
-    this.svgs = splitSvgIntoLines(this.renderer, div, abcTune.metaText.title, this.responsive);
+    this.svgs = splitSvgIntoLines(this.renderer, div, abcTune.metaText.title, this.responsive, scale);
   } else {
     this.svgs = [this.renderer.paper.svg];
   }
   setupSelection(this, this.svgs);
+  this.jazzchords = origJazzChords;
 };
-function splitSvgIntoLines(renderer, output, title, responsive) {
+function splitSvgIntoLines(renderer, output, title, responsive, scale) {
   // Each line is a top level <g> in the svg. To split it into separate
   // svgs iterate through each of those and put them in a new svg. Since
   // they are placed absolutely, the viewBox needs to be manipulated to
@@ -23245,7 +23810,7 @@ function splitSvgIntoLines(renderer, output, title, responsive) {
     var height = box.height + gapBetweenLines;
     var wrapper = document.createElement("div");
     var divStyles = "overflow: hidden;";
-    if (responsive !== 'resize') divStyles += "height:" + height + "px;";
+    if (responsive !== 'resize') divStyles += "height:" + height * scale + "px;";
     wrapper.setAttribute("style", divStyles);
     var svg = duplicateSvg(source);
     var fullTitle = "Sheet Music for \"" + title + "\" section " + (i + 1);
@@ -23368,7 +23933,7 @@ Classes.prototype.generate = function (c) {
   if (!this.shouldAddClasses) return "";
   var ret = [];
   if (c && c.length > 0) ret.push(c);
-  if (c === "tab-number")
+  if (c === "abcjs-tab-number")
     // TODO-PER-HACK! straighten out the tablature
     return ret.join(' ');
   if (c === "text instrument-name") return "abcjs-text abcjs-instrument-name";
@@ -23409,6 +23974,12 @@ GetFontAndAttr.prototype.updateFonts = function (fontOverrides) {
   if (fontOverrides.annotationfont) this.formatting.annotationfont = fontOverrides.annotationfont;
   if (fontOverrides.vocalfont) this.formatting.vocalfont = fontOverrides.vocalfont;
 };
+GetFontAndAttr.prototype.getFamily = function (type) {
+  if (type[0] === '"' && type[type.length - 1] === '"') {
+    return type.substring(1, type.length - 1);
+  }
+  return type;
+};
 GetFontAndAttr.prototype.calc = function (type, klass) {
   var font;
   if (typeof type === 'string') {
@@ -23441,7 +24012,7 @@ GetFontAndAttr.prototype.calc = function (type, klass) {
   var attr = {
     "font-size": font.size,
     'font-style': font.style,
-    "font-family": font.face,
+    "font-family": this.getFamily(font.face),
     'font-weight': font.weight,
     'text-decoration': font.decoration,
     'class': this.classes.generate(klass)
@@ -23471,6 +24042,12 @@ GetTextSize.prototype.updateFonts = function (fontOverrides) {
 GetTextSize.prototype.attr = function (type, klass) {
   return this.getFontAndAttr.calc(type, klass);
 };
+GetTextSize.prototype.getFamily = function (type) {
+  if (type[0] === '"' && type[type.length - 1] === '"') {
+    return type.substring(1, type.length - 1);
+  }
+  return type;
+};
 GetTextSize.prototype.calc = function (text, type, klass, el) {
   var hash;
   // This can be passed in either a string or a font. If it is a string it names one of the standard fonts.
@@ -23486,7 +24063,7 @@ GetTextSize.prototype.calc = function (text, type, klass, el) {
       attr: {
         "font-size": type.size,
         "font-style": type.style,
-        "font-family": type.face,
+        "font-family": this.getFamily(type.face),
         "font-weight": type.weight,
         "text-decoration": type.decoration,
         "class": this.getFontAndAttr.classes.generate(klass)
@@ -23560,6 +24137,98 @@ module.exports = spacing;
 
 /***/ }),
 
+/***/ "./src/write/interactive/create-analysis.js":
+/*!**************************************************!*\
+  !*** ./src/write/interactive/create-analysis.js ***!
+  \**************************************************/
+/***/ (function(module) {
+
+function findNumber(klass, match, target, name) {
+  if (klass.indexOf(match) === 0) {
+    var value = klass.replace(match, '');
+    var num = parseInt(value, 10);
+    if ('' + num === value) target[name] = num;
+  }
+}
+function createAnalysis(target, ev) {
+  var classes = [];
+  if (target.absEl.elemset) {
+    var classObj = {};
+    for (var j = 0; j < target.absEl.elemset.length; j++) {
+      var es = target.absEl.elemset[j];
+      if (es) {
+        var klass = es.getAttribute("class").split(' ');
+        for (var k = 0; k < klass.length; k++) {
+          classObj[klass[k]] = true;
+        }
+      }
+    }
+    for (var kk = 0; kk < Object.keys(classObj).length; kk++) {
+      classes.push(Object.keys(classObj)[kk]);
+    }
+  }
+  var analysis = {};
+  for (var ii = 0; ii < classes.length; ii++) {
+    findNumber(classes[ii], "abcjs-v", analysis, "voice");
+    findNumber(classes[ii], "abcjs-l", analysis, "line");
+    findNumber(classes[ii], "abcjs-m", analysis, "measure");
+  }
+  if (target.staffPos) analysis.staffPos = target.staffPos;
+  var closest = ev.target;
+  while (closest && closest.dataset && !closest.dataset.name && closest.tagName.toLowerCase() !== 'svg') {
+    closest = closest.parentNode;
+  }
+  var parent = ev.target;
+  while (parent && parent.dataset && !parent.dataset.index && parent.tagName.toLowerCase() !== 'svg') {
+    parent = parent.parentNode;
+  }
+  if (parent && parent.dataset) {
+    analysis.name = parent.dataset.name;
+    analysis.clickedName = closest.dataset.name;
+    analysis.parentClasses = parent.classList;
+  }
+  if (closest && closest.classList) analysis.clickedClasses = closest.classList;
+  analysis.selectableElement = target.svgEl;
+  return {
+    classes: classes,
+    analysis: analysis
+  };
+}
+module.exports = createAnalysis;
+
+/***/ }),
+
+/***/ "./src/write/interactive/find-selectable-element.js":
+/*!**********************************************************!*\
+  !*** ./src/write/interactive/find-selectable-element.js ***!
+  \**********************************************************/
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+var createAnalysis = __webpack_require__(/*! ./create-analysis */ "./src/write/interactive/create-analysis.js");
+function findSelectableElement(event) {
+  var selectable = event;
+  while (selectable && selectable.attributes && selectable.tagName.toLowerCase() !== 'svg' && !selectable.attributes.selectable) {
+    selectable = selectable.parentNode;
+  }
+  if (selectable && selectable.attributes && selectable.attributes.selectable) {
+    var index = selectable.attributes['data-index'].nodeValue;
+    if (index) {
+      index = parseInt(index, 10);
+      if (index >= 0 && index < this.selectables.length) {
+        var element = this.selectables[index];
+        var ret = createAnalysis(element, event);
+        ret.index = index;
+        ret.element = element;
+        return ret;
+      }
+    }
+  }
+  return null;
+}
+module.exports = findSelectableElement;
+
+/***/ }),
+
 /***/ "./src/write/interactive/highlight.js":
 /*!********************************************!*\
   !*** ./src/write/interactive/highlight.js ***!
@@ -23583,6 +24252,7 @@ module.exports = highlight;
 /***/ (function(module, __unused_webpack_exports, __webpack_require__) {
 
 var spacing = __webpack_require__(/*! ../helpers/spacing */ "./src/write/helpers/spacing.js");
+var createAnalysis = __webpack_require__(/*! ./create-analysis */ "./src/write/interactive/create-analysis.js");
 function setupSelection(engraver, svgs) {
   engraver.rangeHighlight = rangeHighlight;
   if (engraver.dragging) {
@@ -23888,44 +24558,9 @@ function setSelection(dragIndex) {
   }
 }
 function notifySelect(target, dragStep, dragMax, dragIndex, ev) {
-  var classes = [];
-  if (target.absEl.elemset) {
-    var classObj = {};
-    for (var j = 0; j < target.absEl.elemset.length; j++) {
-      var es = target.absEl.elemset[j];
-      if (es) {
-        var klass = es.getAttribute("class").split(' ');
-        for (var k = 0; k < klass.length; k++) {
-          classObj[klass[k]] = true;
-        }
-      }
-    }
-    for (var kk = 0; kk < Object.keys(classObj).length; kk++) {
-      classes.push(Object.keys(classObj)[kk]);
-    }
-  }
-  var analysis = {};
-  for (var ii = 0; ii < classes.length; ii++) {
-    findNumber(classes[ii], "abcjs-v", analysis, "voice");
-    findNumber(classes[ii], "abcjs-l", analysis, "line");
-    findNumber(classes[ii], "abcjs-m", analysis, "measure");
-  }
-  if (target.staffPos) analysis.staffPos = target.staffPos;
-  var closest = ev.target;
-  while (closest && closest.dataset && !closest.dataset.name && closest.tagName.toLowerCase() !== 'svg') {
-    closest = closest.parentNode;
-  }
-  var parent = ev.target;
-  while (parent && parent.dataset && !parent.dataset.index && parent.tagName.toLowerCase() !== 'svg') {
-    parent = parent.parentNode;
-  }
-  if (parent && parent.dataset) {
-    analysis.name = parent.dataset.name;
-    analysis.clickedName = closest.dataset.name;
-    analysis.parentClasses = parent.classList;
-  }
-  if (closest && closest.classList) analysis.clickedClasses = closest.classList;
-  analysis.selectableElement = target.svgEl;
+  var ret = createAnalysis(target, ev);
+  var classes = ret.classes;
+  var analysis = ret.analysis;
   for (var i = 0; i < this.listeners.length; i++) {
     this.listeners[i](target.absEl.abcelem, target.absEl.tuneNumber, classes.join(' '), analysis, {
       step: dragStep,
@@ -23935,13 +24570,6 @@ function notifySelect(target, dragStep, dragMax, dragIndex, ev) {
     }, ev);
   }
 }
-function findNumber(klass, match, target, name) {
-  if (klass.indexOf(match) === 0) {
-    var value = klass.replace(match, '');
-    var num = parseInt(value, 10);
-    if ('' + num === value) target[name] = num;
-  }
-}
 function clearSelection() {
   for (var i = 0; i < this.selected.length; i++) {
     this.selected[i].unhighlight(undefined, this.renderer.foregroundColor);
@@ -24296,6 +24924,94 @@ module.exports = getLeftEdgeOfStaff;
 
 /***/ }),
 
+/***/ "./src/write/layout/layout-in-grid.js":
+/*!********************************************!*\
+  !*** ./src/write/layout/layout-in-grid.js ***!
+  \********************************************/
+/***/ (function(module, __unused_webpack_exports, __webpack_require__) {
+
+var getLeftEdgeOfStaff = __webpack_require__(/*! ./get-left-edge-of-staff */ "./src/write/layout/get-left-edge-of-staff.js");
+function layoutInGrid(renderer, staffGroup, timeBasedLayout) {
+  var leftEdge = getLeftEdgeOfStaff(renderer, staffGroup.getTextSize, staffGroup.voices, staffGroup.brace, staffGroup.bracket);
+  var ret = getTotalDuration(staffGroup, timeBasedLayout.minPadding);
+  var totalDuration = ret.totalDuration;
+  var minSpacing = ret.minSpacing;
+  var totalWidth = minSpacing * totalDuration;
+  if (timeBasedLayout.minWidth) totalWidth = Math.max(totalWidth, timeBasedLayout.minWidth);
+  var leftAlignPadding = timeBasedLayout.minPadding ? timeBasedLayout.minPadding / 2 : 2; // If the padding isn't specified still give it some
+
+  staffGroup.startx = leftEdge;
+  staffGroup.w = totalWidth + leftEdge;
+  for (var i = 0; i < staffGroup.voices.length; i++) {
+    var voice = staffGroup.voices[i];
+    voice.startx = leftEdge;
+    voice.w = totalWidth + leftEdge;
+    var x = leftEdge;
+    var afterFixedLeft = false;
+    var durationUnit = 0;
+    for (var j = 0; j < voice.children.length; j++) {
+      var child = voice.children[j];
+      if (!afterFixedLeft) {
+        if (child.duration !== 0) {
+          // We got to the first music element on the line
+          afterFixedLeft = true;
+          durationUnit = (totalWidth + leftEdge - x) / totalDuration;
+          staffGroup.gridStart = x;
+        } else {
+          // We are still doing the preliminary stuff - clef, time sig, etc.
+          child.x = x;
+          x += child.w + child.minspacing;
+        }
+      }
+      if (afterFixedLeft) {
+        if (timeBasedLayout.align === 'center') child.x = x + child.duration * durationUnit / 2 - child.w / 2;else {
+          // left align with padding - but no padding for barlines, they should be right aligned.
+          // TODO-PER: it looks better to move bar lines one pixel to right. Not sure why.
+          if (child.duration === 0) {
+            child.x = x + 1 - child.w;
+          } else {
+            // child.extraw has the width of the accidentals - push the note to the right to take that into consideration. It will be 0 if there is nothing to the left.
+            child.x = x + leftAlignPadding - child.extraw;
+          }
+        }
+        x += child.duration * durationUnit;
+      }
+      for (var k = 0; k < child.children.length; k++) {
+        var grandchild = child.children[k];
+        // some elements don't have a dx - Tempo, for instance
+        var dx = grandchild.dx ? grandchild.dx : 0;
+        grandchild.x = child.x + dx;
+      }
+    }
+    staffGroup.gridEnd = x;
+  }
+  return totalWidth;
+}
+function getTotalDuration(staffGroup, timeBasedLayout) {
+  var maxSpacing = 0;
+  var maxCount = 0;
+  for (var i = 0; i < staffGroup.voices.length; i++) {
+    var count = 0;
+    var voice = staffGroup.voices[i];
+    for (var j = 0; j < voice.children.length; j++) {
+      var element = voice.children[j];
+      count += element.duration;
+      if (element.duration) {
+        var width = (element.w + timeBasedLayout) / element.duration;
+        maxSpacing = Math.max(maxSpacing, width);
+      }
+    }
+    maxCount = Math.max(maxCount, count);
+  }
+  return {
+    totalDuration: maxCount,
+    minSpacing: maxSpacing
+  };
+}
+module.exports = layoutInGrid;
+
+/***/ }),
+
 /***/ "./src/write/layout/layout.js":
 /*!************************************!*\
   !*** ./src/write/layout/layout.js ***!
@@ -24306,7 +25022,12 @@ var layoutVoice = __webpack_require__(/*! ./voice */ "./src/write/layout/voice.j
 var setUpperAndLowerElements = __webpack_require__(/*! ./set-upper-and-lower-elements */ "./src/write/layout/set-upper-and-lower-elements.js");
 var layoutStaffGroup = __webpack_require__(/*! ./staff-group */ "./src/write/layout/staff-group.js");
 var getLeftEdgeOfStaff = __webpack_require__(/*! ./get-left-edge-of-staff */ "./src/write/layout/get-left-edge-of-staff.js");
-var layout = function layout(renderer, abctune, width, space, expandToWidest) {
+var layoutInGrid = __webpack_require__(/*! ./layout-in-grid */ "./src/write/layout/layout-in-grid.js");
+
+// This sets the "x" attribute on all the children in abctune.lines
+// It also sets the "w" and "startx" attributes on "voices"
+// It also sets the "w" and "startx" attributes on "voices.children"
+var layout = function layout(renderer, abctune, width, space, expandToWidest, timeBasedLayout) {
   var i;
   var abcLine;
   // Adjust the x-coordinates to their absolute positions
@@ -24315,7 +25036,8 @@ var layout = function layout(renderer, abctune, width, space, expandToWidest) {
     abcLine = abctune.lines[i];
     if (abcLine.staff) {
       // console.log("=== line", i)
-      var thisWidth = setXSpacing(renderer, maxWidth, space, abcLine.staffGroup, abctune.formatting, i === abctune.lines.length - 1, false);
+      var thisWidth;
+      if (timeBasedLayout !== undefined) thisWidth = layoutInGrid(renderer, abcLine.staffGroup, timeBasedLayout);else thisWidth = setXSpacing(renderer, maxWidth, space, abcLine.staffGroup, abctune.formatting, i === abctune.lines.length - 1, false);
       // console.log(thisWidth, maxWidth)
       if (Math.round(thisWidth) > Math.round(maxWidth)) {
         // to take care of floating point weirdness
@@ -24350,40 +25072,34 @@ var layout = function layout(renderer, abctune, width, space, expandToWidest) {
 var setXSpacing = function setXSpacing(renderer, width, space, staffGroup, formatting, isLastLine, debug) {
   var leftEdge = getLeftEdgeOfStaff(renderer, staffGroup.getTextSize, staffGroup.voices, staffGroup.brace, staffGroup.bracket);
   var newspace = space;
+  //dumpGroup("before", staffGroup)
   for (var it = 0; it < 8; it++) {
     // TODO-PER: shouldn't need multiple passes, but each pass gets it closer to the right spacing. (Only affects long lines: normal lines break out of this loop quickly.)
     // console.log("iteration", it)
-    // dumpGroup("before", staffGroup)
-    var ret = layoutStaffGroup(newspace, renderer, debug, staffGroup, leftEdge);
-    // dumpGroup("after",staffGroup)
+    var ret = layoutStaffGroup(newspace, renderer.minPadding, debug, staffGroup, leftEdge);
     newspace = calcHorizontalSpacing(isLastLine, formatting.stretchlast, width + renderer.padding.left, staffGroup.w, newspace, ret.spacingUnits, ret.minSpace, renderer.padding.left + renderer.padding.right);
     if (debug) console.log("setXSpace", it, staffGroup.w, newspace, staffGroup.minspace);
     if (newspace === null) break;
   }
+  //dumpGroup("after",staffGroup)
   centerWholeRests(staffGroup.voices);
   return staffGroup.w - leftEdge;
 };
-
-// function dumpGroup(label, staffGroup) {
-// 	var output = {
-// 		line: staffGroup.line,
-// 		w: staffGroup.w,
-// 		voice: {
-// 			i: staffGroup.voices[0].i,
-// 			minx: staffGroup.voices[0].minx,
-// 			nextx: staffGroup.voices[0].nextx,
-// 			spacingduration: staffGroup.voices[0].spacingduration,
-// 			w: staffGroup.voices[0].w,
-// 			children: [],
-// 		}
-// 	}
-// 	for (var i = 0; i < staffGroup.voices[0].children.length; i++) {
-// 		var child = staffGroup.voices[0].children[i]
-// 		output.voice.children.push({ fixedW: child.fixed.w, w: child.w, x: child.x, type: child.type })
-// 	}
-// 	console.log(label,output)
-// }
-
+function replacer(key, value) {
+  // Filtering out properties
+  if (key === 'parent') {
+    return 'parent';
+  }
+  if (key === 'beam') {
+    return 'beam';
+  }
+  return value;
+}
+function dumpGroup(label, staffGroup) {
+  console.log("=================== " + label + " =========================");
+  console.log(staffGroup);
+  console.log(JSON.stringify(staffGroup, replacer, "\t"));
+}
 function calcHorizontalSpacing(isLastLine, stretchLast, targetWidth, lineWidth, spacing, spacingUnits, minSpace, padding) {
   if (isLastLine) {
     if (stretchLast === undefined) {
@@ -24514,6 +25230,7 @@ var setUpperAndLowerElements = function setUpperAndLowerElements(renderer, staff
       var addedSpace = minSpacingInPitches - forcedSpacingBetween;
       if (addedSpace > 0) staff.top += addedSpace;
     }
+    staff.top += renderer.spacing.staffTopMargin / spacing.STEP;
     lastStaffBottom = 2 - staff.bottom; // the staff starts at position 2 and the bottom variable is negative. Therefore to find out how large the bottom is, we reverse the sign of the bottom, and add the 2 in.
 
     // Now we need a little margin on the top, so we'll just throw that in.
@@ -24672,7 +25389,7 @@ function checkLastBarX(voices) {
     }
   }
 }
-var layoutStaffGroup = function layoutStaffGroup(spacing, renderer, debug, staffGroup, leftEdge) {
+var layoutStaffGroup = function layoutStaffGroup(spacing, minPadding, debug, staffGroup, leftEdge) {
   var epsilon = 0.0000001; // Fudging for inexactness of floating point math.
   var spacingunits = 0; // number of times we will have ended up using the spacing distance (as opposed to fixed width distances)
   var minspace = 1000; // a big number to start off with - used to find out what the smallest space between two notes is -- GD 2014.1.7
@@ -24728,7 +25445,7 @@ var layoutStaffGroup = function layoutStaffGroup(spacing, renderer, debug, staff
       if (v.voicenumber === 0) lastTopVoice = i;
       var topVoice = lastTopVoice !== undefined && currentvoices[lastTopVoice].voicenumber !== v.voicenumber ? currentvoices[lastTopVoice] : undefined;
       if (!isSameStaff(v, topVoice)) topVoice = undefined;
-      var voicechildx = layoutVoiceElements.layoutOneItem(x, spacing, v, renderer.minPadding, topVoice);
+      var voicechildx = layoutVoiceElements.layoutOneItem(x, spacing, v, minPadding, topVoice);
       var dx = voicechildx - x;
       if (dx > 0) {
         x = voicechildx; //update x
@@ -24954,7 +25671,7 @@ VoiceElement.shiftRight = function (dx, voice) {
 
 // call when spacingduration has been updated
 VoiceElement.updateNextX = function (x, spacing, voice) {
-  voice.nextx = x + spacing * Math.sqrt(voice.spacingduration * 8);
+  voice.nextx = x + spacing * this.getSpacingUnits(voice);
 };
 VoiceElement.updateIndices = function (voice) {
   if (!this.layoutEnded(voice)) {
@@ -25019,7 +25736,7 @@ function moveDecorations(beam) {
       var top = yAtNote(child, beam);
       for (var i = 0; i < child.children.length; i++) {
         var el = child.children[i];
-        if (el.klass === 'ornament') {
+        if (el.klass === 'ornament' && el.position !== 'below') {
           if (el.bottom - padding < top) {
             var distance = top - el.bottom + padding; // Find the distance that it needs to move and add a little margin so the element doesn't touch the beam.
             el.bottom += distance;
@@ -25223,6 +25940,7 @@ Renderer.prototype.initVerticalSpace = function () {
     // Set the slur height factor.
     staffSeparation: 61.33,
     // Do not put a staff system closer than <unit> from the previous system.
+    staffTopMargin: 0,
     stemHeight: 26.67 + 10,
     // Set the stem height.
     subtitle: 3.78,
@@ -25274,6 +25992,7 @@ Renderer.prototype.setVerticalSpace = function (formatting) {
   if (formatting.musicspace !== undefined) this.spacing.music = formatting.musicspace * 4 / 3;
   if (formatting.titlespace !== undefined) this.spacing.title = formatting.titlespace * 4 / 3;
   if (formatting.sysstaffsep !== undefined) this.spacing.systemStaffSeparation = formatting.sysstaffsep * 4 / 3;
+  if (formatting.stafftopmargin !== undefined) this.spacing.staffTopMargin = formatting.stafftopmargin * 4 / 3;
   if (formatting.subtitlespace !== undefined) this.spacing.subtitle = formatting.subtitlespace * 4 / 3;
   if (formatting.topspace !== undefined) this.spacing.top = formatting.topspace * 4 / 3;
   if (formatting.vocalspace !== undefined) this.spacing.vocal = formatting.vocalspace * 4 / 3;
@@ -25484,6 +26203,28 @@ Svg.prototype.text = function (text, attr, target) {
   if (target) target.appendChild(el);else this.append(el);
   return el;
 };
+Svg.prototype.richTextLine = function (phrases, x, y, klass, anchor, target) {
+  var el = document.createElementNS(svgNS, 'text');
+  el.setAttribute("stroke", "none");
+  el.setAttribute("class", klass);
+  el.setAttribute("x", x);
+  el.setAttribute("y", y);
+  el.setAttribute("text-anchor", anchor);
+  el.setAttribute("dominant-baseline", "middle");
+  for (var i = 0; i < phrases.length; i++) {
+    var phrase = phrases[i];
+    var tspan = document.createElementNS(svgNS, 'tspan');
+    var attrs = Object.keys(phrase.attrs);
+    for (var j = 0; j < attrs.length; j++) {
+      var value = phrase.attrs[attrs[j]];
+      if (value !== '') tspan.setAttribute(attrs[j], value);
+    }
+    tspan.textContent = phrase.content;
+    el.appendChild(tspan);
+  }
+  if (target) target.appendChild(el);else this.append(el);
+  return el;
+};
 Svg.prototype.guessWidth = function (text, attr) {
   var svg = this.createDummySvg();
   var el = this.text(text, attr, svg);
@@ -25635,7 +26376,7 @@ module.exports = Svg;
   \********************/
 /***/ (function(module) {
 
-var version = '6.2.3';
+var version = '6.4.0';
 module.exports = version;
 
 /***/ })