abcjs-rails 2.3 → 3.0

data/app/assets/javascripts/abcjs/data/abc_tune.js

@@ -371,17 +371,36 @@ window.ABCJS.data.Tune = function() {
 			//}
 		}
 
+		function getNextMusicLine(lines, currentLine) {
+			currentLine++;
+			while (lines.length > currentLine) {
+				if (lines[currentLine].staff)
+					return lines[currentLine];
+			}
+			return null;
+		}
+
 		for (this.lineNum = 0; this.lineNum < this.lines.length; this.lineNum++) {
-			if (this.lines[this.lineNum].staff) for (this.staffNum = 0; this.staffNum < this.lines[this.lineNum].staff.length; this.staffNum++) {
-				if (this.lines[this.lineNum].staff[this.staffNum].clef)
-					fixClefPlacement(this.lines[this.lineNum].staff[this.staffNum].clef);
-				for (this.voiceNum = 0; this.voiceNum < this.lines[this.lineNum].staff[this.staffNum].voices.length; this.voiceNum++) {
-//					var el = this.getLastNote();
-//					if (el) el.end_beam = true;
-					cleanUpSlursInLine(this.lines[this.lineNum].staff[this.staffNum].voices[this.voiceNum]);
-					for (var j = 0; j < this.lines[this.lineNum].staff[this.staffNum].voices[this.voiceNum].length; j++)
-						if (this.lines[this.lineNum].staff[this.staffNum].voices[this.voiceNum][j].el_type === 'clef')
-							fixClefPlacement(this.lines[this.lineNum].staff[this.staffNum].voices[this.voiceNum][j]);
+			var staff = this.lines[this.lineNum].staff;
+			if (staff) {
+				for (this.staffNum = 0; this.staffNum < staff.length; this.staffNum++) {
+					if (staff[this.staffNum].clef)
+						fixClefPlacement(staff[this.staffNum].clef);
+					for (this.voiceNum = 0; this.voiceNum < staff[this.staffNum].voices.length; this.voiceNum++) {
+						var voice = staff[this.staffNum].voices[this.voiceNum];
+						cleanUpSlursInLine(voice);
+						for (var j = 0; j < voice.length; j++) {
+							if (voice[j].el_type === 'clef')
+								fixClefPlacement(voice[j]);
+						}
+						if (voice[voice.length-1].barNumber) {
+							// Don't hang a bar number on the last bar line: it should go on the next line.
+							var nextLine = getNextMusicLine(this.lines, this.lineNum);
+							if (nextLine)
+								nextLine.staff[0].barNumber = voice[voice.length-1].barNumber;
+							delete voice[voice.length-1].barNumber;
+						}
+					}
 				}
 			}
 		}
@@ -534,46 +553,48 @@ window.ABCJS.data.Tune = function() {
 		// Clone the object because it will be sticking around for the next line and we don't want the extra fields in it.
 		var hashParams = window.ABCJS.parse.clone(hashParams2);
 
-		// If this is a clef type, then we replace the working clef on the line. This is kept separate from
-		// the clef in case there is an inline clef field. We need to know what the current position for
-		// the note is.
-		if (type === 'clef')
-			this.lines[this.lineNum].staff[this.staffNum].workingClef = hashParams;
-
-		// If this is the first item in this staff, then we might have to initialize the staff, first.
-		if (this.lines[this.lineNum].staff.length <= this.staffNum) {
-			this.lines[this.lineNum].staff[this.staffNum] = {};
-			this.lines[this.lineNum].staff[this.staffNum].clef = window.ABCJS.parse.clone(this.lines[this.lineNum].staff[0].clef);
-			this.lines[this.lineNum].staff[this.staffNum].key = window.ABCJS.parse.clone(this.lines[this.lineNum].staff[0].key);
-			this.lines[this.lineNum].staff[this.staffNum].meter = window.ABCJS.parse.clone(this.lines[this.lineNum].staff[0].meter);
-			this.lines[this.lineNum].staff[this.staffNum].workingClef = window.ABCJS.parse.clone(this.lines[this.lineNum].staff[0].workingClef);
-			this.lines[this.lineNum].staff[this.staffNum].voices = [[]];
-		}
-
-		// These elements should not be added twice, so if the element exists on this line without a note or bar before it, just replace the staff version.
-		var voice = this.lines[this.lineNum].staff[this.staffNum].voices[this.voiceNum];
-		for (var i = 0; i < voice.length; i++) {
-			if (voice[i].el_type === 'note' || voice[i].el_type === 'bar') {
-				hashParams.el_type = type;
-				hashParams.startChar = startChar;
-				hashParams.endChar = endChar;
-				if (impliedNaturals)
-					hashParams.accidentals = impliedNaturals.concat(hashParams.accidentals);
-				voice.push(hashParams);
-				return;
+		if (this.lines[this.lineNum].staff) { // be sure that we are on a music type line before doing the following.
+			// If this is a clef type, then we replace the working clef on the line. This is kept separate from
+			// the clef in case there is an inline clef field. We need to know what the current position for
+			// the note is.
+			if (type === 'clef')
+				this.lines[this.lineNum].staff[this.staffNum].workingClef = hashParams;
+
+			// If this is the first item in this staff, then we might have to initialize the staff, first.
+			if (this.lines[this.lineNum].staff.length <= this.staffNum) {
+				this.lines[this.lineNum].staff[this.staffNum] = {};
+				this.lines[this.lineNum].staff[this.staffNum].clef = window.ABCJS.parse.clone(this.lines[this.lineNum].staff[0].clef);
+				this.lines[this.lineNum].staff[this.staffNum].key = window.ABCJS.parse.clone(this.lines[this.lineNum].staff[0].key);
+				this.lines[this.lineNum].staff[this.staffNum].meter = window.ABCJS.parse.clone(this.lines[this.lineNum].staff[0].meter);
+				this.lines[this.lineNum].staff[this.staffNum].workingClef = window.ABCJS.parse.clone(this.lines[this.lineNum].staff[0].workingClef);
+				this.lines[this.lineNum].staff[this.staffNum].voices = [[]];
 			}
-			if (voice[i].el_type === type) {
-				hashParams.el_type = type;
-				hashParams.startChar = startChar;
-				hashParams.endChar = endChar;
-				if (impliedNaturals)
-					hashParams.accidentals = impliedNaturals.concat(hashParams.accidentals);
-				voice[i] = hashParams;
-				return;
+
+			// These elements should not be added twice, so if the element exists on this line without a note or bar before it, just replace the staff version.
+			var voice = this.lines[this.lineNum].staff[this.staffNum].voices[this.voiceNum];
+			for (var i = 0; i < voice.length; i++) {
+				if (voice[i].el_type === 'note' || voice[i].el_type === 'bar') {
+					hashParams.el_type = type;
+					hashParams.startChar = startChar;
+					hashParams.endChar = endChar;
+					if (impliedNaturals)
+						hashParams.accidentals = impliedNaturals.concat(hashParams.accidentals);
+					voice.push(hashParams);
+					return;
+				}
+				if (voice[i].el_type === type) {
+					hashParams.el_type = type;
+					hashParams.startChar = startChar;
+					hashParams.endChar = endChar;
+					if (impliedNaturals)
+						hashParams.accidentals = impliedNaturals.concat(hashParams.accidentals);
+					voice[i] = hashParams;
+					return;
+				}
 			}
+			// We didn't see either that type or a note, so replace the element to the staff.
+			this.lines[this.lineNum].staff[this.staffNum][type] = hashParams2;
 		}
-		// We didn't see either that type or a note, so replace the element to the staff.
-		this.lines[this.lineNum].staff[this.staffNum][type] = hashParams2;
 	};
 
 	this.getNumLines = function() {
@@ -675,6 +696,7 @@ window.ABCJS.data.Tune = function() {
 			if (params.bracket) This.lines[This.lineNum].staff[This.staffNum].bracket = params.bracket;
 			if (params.brace) This.lines[This.lineNum].staff[This.staffNum].brace = params.brace;
 			if (params.connectBarLines) This.lines[This.lineNum].staff[This.staffNum].connectBarLines = params.connectBarLines;
+			if (params.barNumber) This.lines[This.lineNum].staff[This.staffNum].barNumber = params.barNumber;
 			createVoice(params);
 			// Some stuff just happens for the first voice
 			if (params.part)

data/app/assets/javascripts/abcjs/edit/abc_editor.js

@@ -112,6 +112,7 @@ window.ABCJS.edit.EditArea.prototype.getElem = function() {
 //		canvas_id: or paper_id: HTML id to draw in. If not present, then the drawing happens just below the editor.
 //		generate_midi: if present, then midi is generated.
 //		midi_id: if present, the HTML id to place the midi control. Otherwise it is placed in the same div as the paper.
+//		midi_download_id: if present, the HTML id to place the midi download link. Otherwise it is placed in the same div as the paper.
 //		generate_warnings: if present, then parser warnings are displayed on the page.
 //		warnings_id: if present, the HTML id to place the warnings. Otherwise they are placed in the same div as the paper.
 //		onchange: if present, the callback function to call whenever there has been a change.
@@ -172,15 +173,25 @@ window.ABCJS.Editor = function(editarea, params) {
     this.div = document.createElement("DIV");
     this.editarea.getElem().parentNode.insertBefore(this.div, this.editarea.getElem());
   }
-  
-  if (params.generate_midi || params.midi_id) {
-    if (params.midi_id) {
-      this.mididiv = document.getElementById(params.midi_id);
-    } else {
-      this.mididiv = this.div;
-    }
-  }
-  
+
+	// If the user wants midi, then store the elements that it will be written to. The element could either be passed in as an id,
+	// an element, or nothing. If nothing is passed in, then just put the midi on top of the generated music.
+	if (params.generate_midi) {
+		this.midiParams = params.midi_options || {};
+		if (this.midiParams.generateDownload) {
+			if (typeof params.midi_download_id === 'string')
+				this.downloadMidi = document.getElementById(params.midi_download_id);
+			else if (params.midi_download_id) // assume, if the var is not a string it is an element. If not, it will crash soon enough.
+				this.downloadMidi = params.midi_download_id;
+		}
+		if (this.midiParams.generateInline !== false) { // The default for this is true, so undefined is also true.
+			if (typeof params.midi_id === 'string')
+				this.inlineMidi = document.getElementById(params.midi_id);
+			else if (params.midi_id) // assume, if the var is not a string it is an element. If not, it will crash soon enough.
+				this.inlineMidi = params.midi_id;
+		}
+	}
+
   if (params.generate_warnings || params.warnings_id) {
     if (params.warnings_id) {
       this.warningsdiv = document.getElementById(params.warnings_id);
@@ -190,7 +201,6 @@ window.ABCJS.Editor = function(editarea, params) {
   }
   
   this.parserparams = params.parser_options || {};
-  this.midiparams = params.midi_options || {};
   this.onchangeCallback = params.onchange;
 
   this.engraverparams = params.render_options || {};
@@ -247,8 +257,10 @@ window.ABCJS.Editor.prototype.renderTune = function(abc, params, div) {
 
 window.ABCJS.Editor.prototype.modelChanged = function() {
   if (this.tunes === undefined) {
-    if (this.mididiv !== undefined && this.mididiv !== this.div)
-		this.mididiv.innerHTML = "";
+    if (this.downloadMidi !== undefined)
+		this.downloadMidi.innerHTML = "";
+    if (this.inlineMidi !== undefined)
+		this.inlineMidi.innerHTML = "";
     this.div.innerHTML = "";
 	return;
   }
@@ -262,19 +274,51 @@ window.ABCJS.Editor.prototype.modelChanged = function() {
   this.engraver_controller = new ABCJS.write.EngraverController(paper, this.engraverparams);
   this.engraver_controller.engraveABC(this.tunes);
 	this.tunes[0].engraver = this.engraver_controller;	// TODO-PER: We actually want an output object for each tune, not the entire controller. When refactoring, don't save data in the controller.
-  if (window.ABCJS.midi && this.mididiv) {
-//    if (this.mididiv !== this.div)
-//		this.mididiv.innerHTML = "";
-	  var midi = window.ABCJS.midi.create(this.tunes[0], this.midiParams); //TODO handle multiple tunes
-	  var title = this.tunes[0].metaText && this.tunes[0].metaText.title ? this.tunes[0].metaText.title : 'Untitled';
-	  var linkTitle = "Download MIDI for \"" + title +  "\"";
-	  if (title)
-		  title = title.toLowerCase().replace(/'/g, '').replace(/\W/g, '_').replace(/__/g, '_');
-	  this.mididiv.innerHTML = '<a download="' + title + '.midi" href="' + midi + '">' + linkTitle + '</a>';
-//	  var midiwriter = new ABCJS.midi.MidiWriter(this.mididiv,this.midiparams);
-//    midiwriter.addListener(this.engraver_controller);
-//    midiwriter.writeABC(this.tunes[0]); //TODO handle multiple tunes
-  }
+	var downloadMidiHtml = "";
+	var inlineMidiHtml = "";
+	if (this.midiParams && !this.midiPause) {
+		for (var i = 0; i < this.tunes.length; i++) {
+			var midi = window.ABCJS.midi.create(this.tunes[i], this.midiParams);
+
+			if (this.midiParams.generateInline && this.midiParams.generateDownload) {
+				downloadMidiHtml += window.ABCJS.midi.generateMidiDownloadLink(this.tunes[i], this.midiParams, midi.download, i);
+				inlineMidiHtml += window.ABCJS.midi.generateMidiControls(this.tunes[i], this.midiParams, midi.inline, i);
+			} else if (this.midiParams.generateInline)
+				inlineMidiHtml += window.ABCJS.midi.generateMidiControls(this.tunes[i], this.midiParams, midi, i);
+			else
+				downloadMidiHtml += window.ABCJS.midi.generateMidiDownloadLink(this.tunes[i], this.midiParams, midi, i);
+		}
+		if (this.midiParams.generateDownload) {
+			if (this.downloadMidi)
+				this.downloadMidi.innerHTML = downloadMidiHtml;
+			else
+				this.div.innerHTML += downloadMidiHtml;
+		}
+		var find = function(element, cls) {
+			var els = element.getElementsByClassName(cls);
+			if (els.length === 0)
+				return null;
+			return els[0];
+		};
+		if (this.midiParams.generateInline) {
+			var inlineDiv;
+			if (this.inlineMidi) {
+				this.inlineMidi.innerHTML = inlineMidiHtml;
+				inlineDiv = this.inlineMidi;
+			} else {
+				this.div.innerHTML += inlineMidiHtml;
+				inlineDiv = this.div;
+			}
+			if (this.midiParams.animate || this.midiParams.listener) {
+				for (i = 0; i < this.tunes.length; i++) {
+					var parent = find(inlineDiv, "abcjs-midi-" + i);
+					parent.abcjsTune = this.tunes[i];
+					parent.abcjsListener = this.midiParams.listener;
+					parent.abcjsAnimate = this.midiParams.animate;
+				}
+			}
+		}
+	}
   if (this.warningsdiv) {
     this.warningsdiv.innerHTML = (this.warnings) ? this.warnings.join("<br />") : "No errors";
   } 
@@ -311,11 +355,13 @@ window.ABCJS.Editor.prototype.parseABC = function() {
   var tunebook = new ABCJS.TuneBook(t);
   
   this.tunes = [];
+  this.startPos = [];
   this.warnings = [];
   for (var i=0; i<tunebook.tunes.length; i++) {
     var abcParser = new window.ABCJS.parse.Parse();
-    abcParser.parse(tunebook.tunes[i].abc, this.parserparams); //TODO handle multiple tunes
+    abcParser.parse(tunebook.tunes[i].abc, this.parserparams);
     this.tunes[i] = abcParser.getTune();
+	  this.startPos[i] = tunebook.tunes[i].startPos;
     var warnings = abcParser.getWarnings() || [];
     for (var j=0; j<warnings.length; j++) {
       this.warnings.push(warnings[j]);
@@ -398,8 +444,11 @@ window.ABCJS.Editor.prototype.isDirty = function() {
 	return this.editarea.initialText !== this.editarea.getString();
 };
 
-window.ABCJS.Editor.prototype.highlight = function(abcelem) {
-  this.editarea.setSelection(abcelem.startChar, abcelem.endChar);
+window.ABCJS.Editor.prototype.highlight = function(abcelem, tuneNumber) {
+	// TODO-PER: The marker appears to get off by one for each tune parsed. I'm not sure why, but adding the tuneNumber in corrects it for the time being.
+	var offset = (tuneNumber !== undefined) ? this.startPos[tuneNumber] + tuneNumber : 0;
+
+  this.editarea.setSelection(offset + abcelem.startChar, offset + abcelem.endChar);
 };
 
 window.ABCJS.Editor.prototype.pause = function(shouldPause) {
@@ -409,13 +458,5 @@ window.ABCJS.Editor.prototype.pause = function(shouldPause) {
 };
 
 window.ABCJS.Editor.prototype.pauseMidi = function(shouldPause) {
-	if (shouldPause && this.mididiv) {
-		this.mididivSave = this.mididiv;
-		this.addClassName(this.mididiv, 'hidden');
-		this.mididiv = null;
-	} else if (!shouldPause && this.mididivSave) {
-		this.mididiv = this.mididivSave;
-		this.removeClassName(this.mididiv, 'hidden');
-		this.mididivSave = null;
-	}
+	this.midiPause = shouldPause;
 };

data/app/assets/javascripts/abcjs/midi/abc_midi_controls.js

@@ -0,0 +1,513 @@
+//    abc_midi_controls.js: Handle the visual part of playing MIDI
+//    Copyright (C) 2010,2016 Gregory Dyke (gregdyke at gmail dot com) and Paul Rosen
+//
+//    This program is free software: you can redistribute it and/or modify
+//    it under the terms of the GNU General Public License as published by
+//    the Free Software Foundation, either version 3 of the License, or
+//    (at your option) any later version.
+//
+//    This program is distributed in the hope that it will be useful,
+//    but WITHOUT ANY WARRANTY; without even the implied warranty of
+//    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+//    GNU General Public License for more details.
+//
+//    You should have received a copy of the GNU General Public License
+//    along with this program.  If not, see <http://www.gnu.org/licenses/>.
+
+/*globals MIDI */
+if (!window.ABCJS)
+	window.ABCJS = {};
+
+if (!window.ABCJS.midi)
+	window.ABCJS.midi = {};
+
+(function() {
+	"use strict";
+	function isFunction(functionToCheck) {
+		var getType = {};
+		return functionToCheck && getType.toString.call(functionToCheck) === '[object Function]';
+	}
+
+	window.ABCJS.midi.generateMidiDownloadLink = function(tune, midiParams, midi, index) {
+		var html = '<div class="download-midi midi-' + index + '">';
+		if (midiParams.preTextDownload)
+			html += midiParams.preTextDownload;
+		var title = tune.metaText && tune.metaText.title ? tune.metaText.title : 'Untitled';
+		var label;
+		if (midiParams.downloadLabel && isFunction(midiParams.downloadLabel))
+			label = midiParams.downloadLabel(tune, index);
+		else if (midiParams.downloadLabel)
+			label = midiParams.downloadLabel.replace(/%T/, title);
+		else
+			label = "Download MIDI for \"" + title + "\"";
+		title = title.toLowerCase().replace(/'/g, '').replace(/\W/g, '_').replace(/__/g, '_');
+		html += '<a download="' + title + '.midi" href="' + midi + '">' + label + '</a>';
+		if (midiParams.postTextDownload)
+			html += midiParams.postTextDownload;
+		return html + "</div>";
+	};
+
+	function preprocessLabel(label, title) {
+		return label.replace(/%T/g, title);
+	}
+
+	window.ABCJS.midi.generateMidiControls = function(tune, midiParams, midi, index) {
+		if (window.ABCJS.midiInlineInitialized === 'failed')
+			return '<div class="abcjs-inline-midi abcjs-midi-' + index + '">ERROR</div>';
+		if (window.ABCJS.midiInlineInitialized === 'not loaded')
+			return '<div class="abcjs-inline-midi abcjs-midi-' + index + '">MIDI NOT PRESENT</div>';
+
+		var title = tune.metaText && tune.metaText.title ? tune.metaText.title : 'Untitled';
+		var options = midiParams.inlineControls || {};
+		if (options.standard === undefined) options.standard = true;
+
+		if (options.tooltipSelection === undefined) options.tooltipSelection = "Click to toggle play selection/play all.";
+		if (options.tooltipLoop === undefined) options.tooltipLoop = "Click to toggle play once/repeat.";
+		if (options.tooltipReset === undefined) options.tooltipReset = "Click to go to beginning.";
+		if (options.tooltipPlay === undefined) options.tooltipPlay = "Click to play/pause.";
+		if (options.tooltipProgress === undefined) options.tooltipProgress = "Click to change the playback position.";
+		if (options.tooltipTempo === undefined) options.tooltipTempo = "Change the playback speed.";
+
+		var style = "";
+		if (options.hide)
+			style = 'style="display:none;"';
+		var html = '<div class="abcjs-inline-midi abcjs-midi-' + index + '" ' + style + '>';
+		html += '<span class="abcjs-data" style="display:none;">' + JSON.stringify(midi) + '</span>';
+		if (midiParams.preTextInline)
+			html += '<span class="abcjs-midi-pre">' + preprocessLabel(midiParams.preTextInline, title) + '</span>';
+
+		if (options.selectionToggle)
+			html += '<button class="abcjs-midi-selection abcjs-btn" title="' + options.tooltipSelection + '"></button>';
+		if (options.loopToggle)
+			html += '<button class="abcjs-midi-loop abcjs-btn" title="' + options.tooltipLoop + '"></button>';
+		if (options.standard)
+			html += '<button class="abcjs-midi-reset abcjs-btn" title="' + options.tooltipReset + '"></button><button class="abcjs-midi-start abcjs-btn" title="' + options.tooltipPlay + '"></button><button class="abcjs-midi-progress-background" title="' + options.tooltipProgress + '"><span class="abcjs-midi-progress-indicator"></span></button><span class="abcjs-midi-clock"> 0:00</span>';
+		if (options.tempo) {
+			var startTempo = tune && tune.metaText && tune.metaText.tempo ? tune.metaText.tempo.bpm : 180;
+			html += '<span class="abcjs-tempo-wrapper"><input class="abcjs-midi-tempo" value="100" type="number" min="1" max="300" data-start-tempo="' + startTempo + '" title="' + options.tooltipTempo + '" />% (<span class="abcjs-midi-current-tempo">' + startTempo + '</span> BPM)</span>';
+		}
+
+		if (midiParams.postTextInline)
+			html += '<span class="abcjs-midi-post">' + preprocessLabel(midiParams.postTextInline, title) + '</span>';
+		return html + "</div>";
+	};
+
+	// The default location for the sound font files. Simply set this to a different value if the files are served in a different place.
+	window.ABCJS.midi.soundfontUrl = "/soundfont/";
+
+	function hasClass(element, cls) {
+		if (!element)
+			return false;
+		return (' ' + element.className + ' ').indexOf(' ' + cls + ' ') > -1;
+	}
+
+	function addClass(element, cls) {
+		if (!element)
+			return;
+		if (!hasClass(element, cls))
+			element.className = element.className + " " + cls;
+	}
+
+	function removeClass(element, cls) {
+		if (!element)
+			return;
+		element.className = element.className.replace(cls, "").trim().replace("  ", " ");
+	}
+
+	function toggleClass(element, cls) {
+		if (!element)
+			return;
+		if (hasClass(element, cls))
+			removeClass(element, cls);
+		else
+			addClass(element, cls);
+	}
+
+	function closest(element, cls) {
+		// This finds the closest parent that contains the class passed in.
+		if (!element)
+			return null;
+		while (element !== document.body) {
+			if (hasClass(element, cls))
+				return element;
+			element = element.parentNode;
+		}
+		return null;
+	}
+
+	function find(element, cls) {
+		if (!element)
+			return null;
+		var els = element.getElementsByClassName(cls);
+		if (els.length === 0)
+			return null;
+		return els[0];
+	}
+
+	function addLoadEvent(func) {
+		var oldOnLoad = window.onload;
+		if (typeof window.onload !== 'function') {
+			window.onload = func;
+		} else {
+			window.onload = function() {
+				if (oldOnLoad) {
+					oldOnLoad();
+				}
+				func();
+			};
+		}
+	}
+
+	var midiJsInitialized = false;
+
+	function afterSetup(timeWarp, data, onSuccess) {
+		MIDI.player.currentTime = 0;
+		MIDI.player.warp = timeWarp;
+
+		MIDI.player.load({ events: data });
+		onSuccess();
+	}
+
+	function setCurrentMidiTune(timeWarp, data, onSuccess) {
+		if (!midiJsInitialized) {
+			MIDI.setup({
+				debug: true,
+				soundfontUrl: window.ABCJS.midi.soundfontUrl
+			}).then(function() {
+				midiJsInitialized = true;
+				afterSetup(timeWarp, data, onSuccess);
+			});
+		} else {
+			afterSetup(timeWarp, data, onSuccess);
+		}
+	}
+
+	function startCurrentlySelectedTune() {
+		MIDI.player.start(MIDI.player.currentTime);
+	}
+
+	function stopCurrentlyPlayingTune() {
+		MIDI.player.stop();
+	}
+
+	function pauseCurrentlyPlayingTune() {
+		MIDI.player.pause();
+	}
+
+	function setMidiCallback(midiJsListener) {
+		MIDI.player.setAnimation(midiJsListener);
+	}
+
+	function jumpToMidiPosition(play, offset, width) {
+		var ratio = offset / width;
+		var endTime = MIDI.player.duration; // MIDI.Player.endTime;
+		if (play)
+			pauseCurrentlyPlayingTune();
+		MIDI.player.currentTime = endTime * ratio;
+		if (play)
+			startCurrentlySelectedTune();
+	}
+
+	function setTimeWarp(percent) {
+		// Time warp is a multiplier: the larger the number, the longer the time. Therefore,
+		// it is opposite of the percentage. That is, playing at 50% is actually multiplying the time by 2.
+		MIDI.player.warp = (percent > 0) ? 100 / percent : 1;
+	}
+
+	function loadMidi(target, onSuccess) {
+		var dataEl = find(target, "abcjs-data");
+		var data = JSON.parse(dataEl.innerHTML);
+
+		// See if the tempo changer is present, and use that tempo if so.
+		var timeWarp = 1;
+		var tempoEl = find(target, "abcjs-midi-tempo");
+		if (tempoEl) {
+			// Time warp is a multiplier: the larger the number, the longer the time. Therefore,
+			// it is opposite of the percentage. That is, playing at 50% is actually multiplying the time by 2.
+			var percent = parseInt(tempoEl.value, 10);
+			if (percent > 0)
+				timeWarp = 100 / percent;
+		}
+		setCurrentMidiTune(timeWarp, data, onSuccess);
+	}
+
+	function deselectMidiControl() {
+		var otherMidi = find(document, "abcjs-midi-current");
+		if (otherMidi) {
+			stopCurrentlyPlayingTune();
+			removeClass(otherMidi, "abcjs-midi-current");
+			var otherMidiStart = find(otherMidi, "abcjs-midi-start");
+			removeClass(otherMidiStart, "abcjs-pushed");
+		}
+	}
+
+	var lastNow;
+	//var tempSelection = 109;
+
+	function midiJsListener(position) {
+		// { currentTime: in seconds, duration: total length in seconds, progress: percent between 0 and 1 }
+		var midiControl;
+		if (position.duration > 0 && lastNow !== position.progress) {
+			lastNow = position.progress;
+			midiControl = find(document, "abcjs-midi-current");
+			if (midiControl) {
+				var progressBackground = find(midiControl, "abcjs-midi-progress-background");
+				var totalWidth = progressBackground.offsetWidth;
+				var progressIndicator = find(midiControl, "abcjs-midi-progress-indicator");
+				var scaled = totalWidth * lastNow; // The number of pixels
+				progressIndicator.style.left = scaled + "px";
+				var clock = find(midiControl, "abcjs-midi-clock");
+				if (clock) {
+					var seconds = Math.floor(position.currentTime);
+					var minutes = Math.floor(seconds / 60);
+					seconds = seconds % 60;
+					if (seconds < 10) seconds = "0" + seconds;
+					if (minutes < 10) minutes = " " + minutes;
+					clock.innerHTML = minutes + ":" + seconds;
+				}
+				if (midiControl.abcjsListener)
+					midiControl.abcjsListener(midiControl, position);
+				//if (midiControl.abcjsAnimate) {
+				//	if (currentNote.velocity > 0) {
+				//		midiControl.abcjsTune.engraver.rangeHighlight(tempSelection, tempSelection + 1);
+				//		tempSelection++;
+				//		if (tempSelection > 343)
+				//			tempSelection = 109;
+				//	}
+				//}
+			}
+		}
+		if (position.progress === 1) {
+			// The playback is stopping. We need to either indicate that
+			// it has stopped, or start over at the beginning.
+			midiControl = find(document, "abcjs-midi-current");
+			var loopControl = find(midiControl, "abcjs-midi-loop");
+
+			var finishedResetting = function() {
+				if (loopControl && hasClass(loopControl, "abcjs-pushed")) {
+					onStart(find(midiControl, "abcjs-midi-start"));
+				}
+			};
+
+			// midi.js is not quite finished: it still will process the last event, so we wait a minimum amount of time
+			// before doing another action.
+			setTimeout(function() {
+				doReset(midiControl, finishedResetting);
+			}, 1);
+		}
+	}
+
+	//function midiJsListener(currentNote, b, c) {
+	//	console.log("listener ==>", currentNote, b, c);
+	//	return;
+	//	// { currentTime, duration, progress }
+	//	// currentNote is a hash containing: { channel, end, message, note, now, velocity }
+	//	var midiControl;
+	//	if (currentNote.end > 0 && lastNow !== currentNote.now) {
+	//		lastNow = currentNote.now;
+	//		var currentPosition = currentNote.now / currentNote.end; // This returns a number between 0 and 1.
+	//		midiControl = find(document, "abcjs-midi-current");
+	//		if (midiControl) {
+	//			var progressBackground = find(midiControl, "abcjs-midi-progress-background");
+	//			var totalWidth = progressBackground.offsetWidth;
+	//			var progressIndicator = find(midiControl, "abcjs-midi-progress-indicator");
+	//			var scaled = totalWidth * currentPosition; // The number of pixels
+	//			progressIndicator.style.left = scaled + "px";
+	//			var clock = find(midiControl, "abcjs-midi-clock");
+	//			if (clock) {
+	//				var seconds = Math.floor(currentNote.now / 1000);
+	//				var minutes = Math.floor(seconds / 60);
+	//				seconds = seconds % 60;
+	//				if (seconds < 10) seconds = "0" + seconds;
+	//				if (minutes < 10) minutes = " " + minutes;
+	//				clock.innerHTML = minutes + ":" + seconds;
+	//			}
+	//			if (midiControl.abcjsListener)
+	//				midiControl.abcjsListener(midiControl, currentNote);
+	//			if (midiControl.abcjsAnimate) {
+	//				if (currentNote.velocity > 0) {
+	//					midiControl.abcjsTune.engraver.rangeHighlight(tempSelection, tempSelection + 1);
+	//					tempSelection++;
+	//					if (tempSelection > 343)
+	//						tempSelection = 109;
+	//				}
+	//			}
+	//		}
+	//	}
+	//	if (currentNote.now === currentNote.end) {
+	//		// The playback is stopping. We need to either indicate that
+	//		// it has stopped, or start over at the beginning.
+	//		midiControl = find(document, "abcjs-midi-current");
+	//		var loopControl = find(midiControl, "abcjs-midi-loop");
+	//
+	//		var finishedResetting = function() {
+	//			if (loopControl && hasClass(loopControl, "abcjs-pushed")) {
+	//				onStart(find(midiControl, "abcjs-midi-start"));
+	//			}
+	//		};
+	//
+	//		// midi.js is not quite finished: it still will process the last event, so we wait a minimum amount of time
+	//		// before doing another action.
+	//		setTimeout(function() {
+	//			doReset(midiControl, finishedResetting);
+	//		}, 1);
+	//	}
+	//}
+	//
+	function onStart(target) {
+		// If this midi is already playing,
+		if (hasClass(target, 'abcjs-pushed')) {
+			// Stop it.
+			pauseCurrentlyPlayingTune();
+			// Change the element so that the start icon is shown.
+			removeClass(target, "abcjs-pushed");
+		} else { // Else,
+			// If some other midi is running, turn it off.
+			var parent = closest(target, "abcjs-inline-midi");
+			// If this is the current midi, just continue.
+			if (hasClass(parent, "abcjs-midi-current"))
+			// Start this tune playing from wherever it had stopped.
+				startCurrentlySelectedTune();
+			else {
+				deselectMidiControl();
+
+				// else, load this midi from scratch.
+				var onSuccess = function() {
+					startCurrentlySelectedTune();
+					addClass(parent, 'abcjs-midi-current');
+				};
+				loadMidi(parent, onSuccess);
+			}
+			// Change the element so that the pause icon is shown.
+			addClass(target, "abcjs-pushed");
+		}
+		// This replaces the old callback. It really only needs to be called once, but it doesn't hurt to set it every time.
+		setMidiCallback(midiJsListener);
+	}
+
+	window.ABCJS.midi.startPlaying = function(target) {
+		onStart(target);
+	};
+
+	window.ABCJS.midi.stopPlaying = function() {
+		stopCurrentlyPlayingTune();
+	};
+
+	function onSelection(target) {
+		toggleClass(target, 'abcjs-pushed');
+	}
+
+	function onLoop(target) {
+		toggleClass(target, 'abcjs-pushed');
+	}
+
+	function doReset(target, callback) {
+		var parent = closest(target, "abcjs-inline-midi");
+
+		function onSuccess() {
+			addClass(parent, 'abcjs-midi-current');
+			var progressIndicator = find(parent, "abcjs-midi-progress-indicator");
+			progressIndicator.style.left = "0px";
+			var clock = find(parent, "abcjs-midi-clock");
+			clock.innerHTML = " 0:00";
+			if (callback)
+				callback();
+		}
+
+		// If the tune is playing, stop it.
+		deselectMidiControl();
+		loadMidi(parent, onSuccess);
+	}
+
+	function onReset(target) {
+		var parent = closest(target, "abcjs-inline-midi");
+		var playEl = find(parent, "abcjs-midi-start");
+		var play = hasClass(playEl, "abcjs-pushed");
+		function keepPlaying() {
+			if (play) {
+				startCurrentlySelectedTune();
+				addClass(playEl, 'abcjs-pushed');
+			}
+		}
+		if (hasClass(parent, "abcjs-midi-current")) // Only listen to the reset for the currently playing tune.
+			doReset(target, keepPlaying);
+	}
+
+	function relMouseX(target, event) {
+		var totalOffsetX = 0;
+
+		do {
+			totalOffsetX += target.offsetLeft - target.scrollLeft;
+			target = target.offsetParent;
+		}
+		while (target);
+
+		return event.pageX - totalOffsetX;
+	}
+
+	function onProgress(target, event) {
+		var parent = closest(target, "abcjs-inline-midi");
+		if (hasClass(parent, "abcjs-midi-current")) {
+			var play = find(parent, "abcjs-midi-start");
+			play = hasClass(play, "abcjs-pushed");
+			var width = target.offsetWidth;
+			var offset = relMouseX(target, event);
+			jumpToMidiPosition(play, offset, width);
+		}
+	}
+
+	function onTempo(el) {
+		var percent = parseInt(el.value, 10);
+		var startTempo = parseInt(el.getAttribute("data-start-tempo"), 10);
+
+		while (el && !hasClass(el, 'abcjs-midi-current-tempo')) {
+			el = el.nextSibling;
+		}
+		el.innerHTML = Math.floor(percent * startTempo / 100);
+		setTimeWarp(percent);
+	}
+
+	function addDelegates() {
+		document.body.addEventListener("click", function(event) {
+			event = event || window.event;
+			var target = event.target || event.srcElement;
+			while (target && target !== document.body) {
+				if (hasClass(target, 'abcjs-midi-start')) {
+					onStart(target, event);
+					return;
+				} else if (hasClass(target, 'abcjs-midi-selection')) {
+					onSelection(target, event);
+					return;
+				} else if (hasClass(target, 'abcjs-midi-loop')) {
+					onLoop(target, event);
+					return;
+				} else if (hasClass(target, 'abcjs-midi-reset')) {
+					onReset(target, event);
+					return;
+				} else if (hasClass(target, 'abcjs-midi-progress-background')) {
+					onProgress(target, event);
+					return;
+				}
+				target = target.parentNode;
+			}
+		});
+		document.body.addEventListener("change", function(event) {
+			event = event || window.event;
+			var target = event.target || event.srcElement;
+			while (target !== document.body) {
+				if (hasClass(target, 'abcjs-midi-tempo'))
+					onTempo(target, event);
+				target = target.parentNode;
+			}
+		});
+		if (window.MIDI === undefined) {
+			window.ABCJS.midi.midiInlineInitialized = 'not loaded';
+			var els = document.getElementsByClassName('abcjs-inline-midi');
+			for (var i = 0; i < els.length; i++)
+				els[i].innerHTML = "MIDI NOT PRESENT";
+		}
+	}
+
+	addLoadEvent(addDelegates);
+
+})();