schierlm/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Simple example of MIDI search for Musipedia using Web MIDI API

Live example
Download HTML

  
## index-de.html
<html>
<meta charset="UTF-8">
<style type="text/css">
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

dl.form dt {
	font-weight: bold;
	float: left;
	clear: left;
	width: 15em;
}

dl.form dd {
	margin-left: 15em;
	margin-bottom: 1em;
}

dl.form input, dl.form select {
	width: 20em;
}

dl.form textarea {
	width: 20em;
	height: 5em;
}
</style>
<script src="http://cwilso.github.io/WebMIDIAPIShim/lib/WebMIDIAPI.js"></script>
<script src="midipiano.js"></script>
<body>
<div id="midijs" style="display:none">
<form action="http://www.musipedia.org/search.0.html">
<input type="hidden" name="sourceid" value="flash">
<input type="hidden" name="tx_mpsearch_pi1[submit_button]" value="Search">
<dl class="form">
<dt>MIDI Input:</dt><dd><select id="midiin" onchange="midiInChanged();"><option value="">(please select)</option></select></dd>
<dt>MIDI Passthrough:</dt><dd><select id="midithru" onchange="midiThruChanged();"><option value="">(None)</option><option value="M">Monosynth</option></select></dd>
<dt>Notes:</dt><dd>
	<textarea id="notesoutput" readonly></textarea>
	<input id="searchnotes" type="hidden" name="tx_mpsearch_pi1[pc]" value="hum 0-96-1">
	<br />
	<input type="button" onclick="clearNotes();" value="Clear">
</dd>
<dt>Search:</dt><dd><select name="coll"><option value="m">Musipedia</option><option value="w">Web</option></select></dd>
<dt>Keywords:</dt><dd><input type="text" name="filtertext" value=""></dd>
<dt>Look for matches:</dt><dd><select name="onlymatchfrom"><option value="0">only at the very beginning of the tune.</option><option value="-1">anywhere in the piece.</option><option value="0.3">only near the beginning.</option></select></dd>
<dt>Pitch/Rhythm:</dt><dd><input type="range" name="rvp" min="0" max="1" step="0.01" value="0.5"></dd>
</dl>
<input type="submit" value="Search">
</form>
</div>
<p>If you cannot see any controls here, please allow MIDI access. This page requires Google Chrome 43 or newer.</p>
</body>
</html>

## index.html
<html>
<meta charset="UTF-8">
<style type="text/css">
body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
}

dl.form dt {
	font-weight: bold;
	float: left;
	clear: left;
	width: 15em;
}

dl.form dd {
	margin-left: 15em;
	margin-bottom: 1em;
}

dl.form input, dl.form select {
	width: 20em;
}

dl.form textarea {
	width: 20em;
	height: 5em;
}
</style>
<script src="http://cwilso.github.io/WebMIDIAPIShim/lib/WebMIDIAPI.js"></script>
<script src="midipiano.js"></script>
<body>
<div id="midijs" style="display:none">
<form action="http://www.musipedia.org/search.0.html">
<input type="hidden" name="sourceid" value="flash">
<input type="hidden" name="tx_mpsearch_pi1[submit_button]" value="Search">
<dl class="form">
<dt>MIDI Input:</dt><dd><select id="midiin" onchange="midiInChanged();"><option value="">(please select)</option></select></dd>
<dt>MIDI Passthrough:</dt><dd><select id="midithru" onchange="midiThruChanged();"><option value="">(None)</option><option value="M">Monosynth</option></select></dd>
<dt>Notes:</dt><dd>
	<textarea id="notesoutput" readonly></textarea>
	<input id="searchnotes" type="hidden" name="tx_mpsearch_pi1[pc]" value="hum 0-96-1">
	<br />
	<input type="button" onclick="clearNotes();" value="Clear">
</dd>
<dt>Search:</dt><dd><select name="coll"><option value="m">Musipedia</option><option value="w">Web</option></select></dd>
<dt>Keywords:</dt><dd><input type="text" name="filtertext" value=""></dd>
<dt>Look for matches:</dt><dd><select name="onlymatchfrom"><option value="0">only at the very beginning of the tune.</option><option value="-1">anywhere in the piece.</option><option value="0.3">only near the beginning.</option></select></dd>
<dt>Pitch/Rhythm:</dt><dd><input type="range" name="rvp" min="0" max="1" step="0.01" value="0.5"></dd>
</dl>
<input type="submit" value="Search">
</form>
</div>
<p>If you cannot see any controls here, please allow MIDI access. This page requires Google Chrome 43 or newer.</p>
</body>
</html>

## midipiano.js
var midi = null;
var midiIn = null;
var midiThru = noOutputSend;
var notes = [];
var openNotes = {};
var firstTimeStamp = 0;

navigator.requestMIDIAccess().then(onMIDISuccess, function() {});

function onMIDISuccess(midiAccess) {
	document.getElementById("midijs").style.display="block";
	midi = midiAccess;
	midiAccess.inputs.forEach( function( port, key ) {
		var opt = document.createElement("option");
		opt.value = key;
		opt.text = port.name;
		document.getElementById("midiin").appendChild(opt);
	});
	midiAccess.outputs.forEach( function( port, key ) {
		var opt = document.createElement("option");
		opt.value = key;
		opt.text = port.name;
		document.getElementById("midithru").appendChild(opt);
	});
}

function midiInChanged() {
	if (midiIn) {
		midiIn.onmidimessage = function() {};
	}
	midiIn = midi.inputs.get(document.getElementById("midiin").value);
	if (midiIn) {
		midiIn.onmidimessage = addNote;
	}
}

function midiThruChanged() {
	var output = midi.outputs.get(document.getElementById("midithru").value);
	if (output != null) {
		midiThru = function(data, timestamp) {
			output.send(data, timestamp);
		};
	} else if (document.getElementById("midithru").value == "M") {
		if (oscillator == null)
			loadMonosynth();
		midiThru = monosynthSend;
	} else {
		midiThru = noOutputSend;
	}
}

function noOutputSend(data, timestamp) {}

function updateNotes() {
	var sb = "";
	var now = new Date().getTime();
	var url = "hum ";
	for (var i = 0; i < notes.length; i++) {
		var n = notes[i];
		sb += "#" + n.n + "(" + n.t + '-' + (n.o || "?") + ") ";
		if (i != 0)
			url += "/";
		url += n.t + "-" + n.n + "-" + ((n.o || now) - n.t);
	}
	document.getElementById("notesoutput").value = sb;
	document.getElementById("notesoutput").scrollTop = 1000000;
	document.getElementById("searchnotes").value = url
}

function clearNotes() {
	notes = [];
	openNotes = {};
	updateNotes();
}

function addNote(event) {
	midiThru(event.data, event.timestamp);
	console.log(event);
	var cmd = event.data[0] & 0xf0;
	if (cmd == 0x90 || cmd == 0x80) {
		var currentTimeStamp = new Date().getTime();
		var midiNote = event.data[1];
		if (notes.length == 0)
			firstTimeStamp = currentTimeStamp;
		if (openNotes["n"+midiNote]) {
			openNotes["n"+midiNote].o = currentTimeStamp - firstTimeStamp;
			delete openNotes["n"+midiNote];
		}
		if (cmd == 0x90 && event.data[2] != 0) {
			var n = {t: currentTimeStamp - firstTimeStamp, n: midiNote};
			openNotes["n"+midiNote] = n;
			notes.push(n);
		}
		updateNotes();
	}
}


/* Code below is based on <https://github.com/cwilso/monosynth/>.
   Copyright 2013 Chris Wilson
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at
       http://www.apache.org/licenses/LICENSE-2.0
   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
*/
var context=null;		// the Web Audio "context" object
var oscillator=null;	// the single oscillator
var envelope=null;		// the envelope for the single oscillator
var attack=0.05;			// attack speed
var release=0.05;		// release speed
var portamento=0.05;	// portamento/glide speed
var activeNotes = [];	// the stack of actively-pressed keys

function loadMonosynth() {
	// patch up prefixes
	window.AudioContext=window.AudioContext||window.webkitAudioContext;
	context = new AudioContext();
	// set up the basic oscillator chain, muted to begin with.
	oscillator = context.createOscillator();
	oscillator.frequency.setValueAtTime(110, 0);
	envelope = context.createGain();
	oscillator.connect(envelope);
	envelope.connect(context.destination);
	envelope.gain.value = 0.0;  // Mute the sound
	oscillator.start(0);  // Go ahead and start up the oscillator
}

function monosynthSend(data, timestamp) {
	// Mask off the lower nibble (MIDI channel, which we don't care about)
	switch (data[0] & 0xf0) {
		case 0x90:
			if (data[2]!=0) {  // if velocity != 0, this is a note-on message
				noteOn(data[1]);
				return;
			}
			// if velocity == 0, fall thru: it's a note-off.  MIDI's weird, ya'll.
		case 0x80:
			noteOff(data[1]);
			return;
	}
}

function frequencyFromNoteNumber( note ) {
	return 440 * Math.pow(2,(note-69)/12);
}

function noteOn(noteNumber) {
	activeNotes.push( noteNumber );
	oscillator.frequency.cancelScheduledValues(0);
	oscillator.frequency.setTargetAtTime( frequencyFromNoteNumber(noteNumber), 0, portamento );
	envelope.gain.cancelScheduledValues(0);
	envelope.gain.setTargetAtTime(1.0, 0, attack);
}

function noteOff(noteNumber) {
	var position = activeNotes.indexOf(noteNumber);
	if (position!=-1) {
		activeNotes.splice(position,1);
	}
	if (activeNotes.length==0) {	// shut off the envelope
		envelope.gain.cancelScheduledValues(0);
		envelope.gain.setTargetAtTime(0.0, 0, release );
	} else {
		oscillator.frequency.cancelScheduledValues(0);
		oscillator.frequency.setTargetAtTime( frequencyFromNoteNumber(activeNotes[activeNotes.length-1]), 0, portamento );
	}
}
	<html>
	<meta charset="UTF-8">
	<style type="text/css">
	body {
	font-family: Verdana, Arial, Helvetica, sans-serif;
	}

	dl.form dt {
	font-weight: bold;
	float: left;
	clear: left;
	width: 15em;
	}

	dl.form dd {
	margin-left: 15em;
	margin-bottom: 1em;
	}

	dl.form input, dl.form select {
	width: 20em;
	}

	dl.form textarea {
	width: 20em;
	height: 5em;
	}
	</style>
	<script src="http://cwilso.github.io/WebMIDIAPIShim/lib/WebMIDIAPI.js"></script>
	<script src="midipiano.js"></script>
	<body>
	<div id="midijs" style="display:none">
	<form action="http://www.musipedia.org/search.0.html">
	<input type="hidden" name="sourceid" value="flash">
	<input type="hidden" name="tx_mpsearch_pi1[submit_button]" value="Search">
	<dl class="form">
	<dt>MIDI Input:</dt><dd><select id="midiin" onchange="midiInChanged();"><option value="">(please select)</option></select></dd>
	<dt>MIDI Passthrough:</dt><dd><select id="midithru" onchange="midiThruChanged();"><option value="">(None)</option><option value="M">Monosynth</option></select></dd>
	<dt>Notes:</dt><dd>
	<textarea id="notesoutput" readonly></textarea>
	<input id="searchnotes" type="hidden" name="tx_mpsearch_pi1[pc]" value="hum 0-96-1">
	<br />
	<input type="button" onclick="clearNotes();" value="Clear">
	</dd>
	<dt>Search:</dt><dd><select name="coll"><option value="m">Musipedia</option><option value="w">Web</option></select></dd>
	<dt>Keywords:</dt><dd><input type="text" name="filtertext" value=""></dd>
	<dt>Look for matches:</dt><dd><select name="onlymatchfrom"><option value="0">only at the very beginning of the tune.</option><option value="-1">anywhere in the piece.</option><option value="0.3">only near the beginning.</option></select></dd>
	<dt>Pitch/Rhythm:</dt><dd><input type="range" name="rvp" min="0" max="1" step="0.01" value="0.5"></dd>
	</dl>
	<input type="submit" value="Search">
	</form>
	</div>
	<p>If you cannot see any controls here, please allow MIDI access. This page requires Google Chrome 43 or newer.</p>
	</body>
	</html>
	var midi = null;
	var midiIn = null;
	var midiThru = noOutputSend;
	var notes = [];
	var openNotes = {};
	var firstTimeStamp = 0;

	navigator.requestMIDIAccess().then(onMIDISuccess, function() {});

	function onMIDISuccess(midiAccess) {
	document.getElementById("midijs").style.display="block";
	midi = midiAccess;
	midiAccess.inputs.forEach( function( port, key ) {
	var opt = document.createElement("option");
	opt.value = key;
	opt.text = port.name;
	document.getElementById("midiin").appendChild(opt);
	});
	midiAccess.outputs.forEach( function( port, key ) {
	var opt = document.createElement("option");
	opt.value = key;
	opt.text = port.name;
	document.getElementById("midithru").appendChild(opt);
	});
	}

	function midiInChanged() {
	if (midiIn) {
	midiIn.onmidimessage = function() {};
	}
	midiIn = midi.inputs.get(document.getElementById("midiin").value);
	if (midiIn) {
	midiIn.onmidimessage = addNote;
	}
	}

	function midiThruChanged() {
	var output = midi.outputs.get(document.getElementById("midithru").value);
	if (output != null) {
	midiThru = function(data, timestamp) {
	output.send(data, timestamp);
	};
	} else if (document.getElementById("midithru").value == "M") {
	if (oscillator == null)
	loadMonosynth();
	midiThru = monosynthSend;
	} else {
	midiThru = noOutputSend;
	}
	}

	function noOutputSend(data, timestamp) {}

	function updateNotes() {
	var sb = "";
	var now = new Date().getTime();
	var url = "hum ";
	for (var i = 0; i < notes.length; i++) {
	var n = notes[i];
	sb += "#" + n.n + "(" + n.t + '-' + (n.o \|\| "?") + ") ";
	if (i != 0)
	url += "/";
	url += n.t + "-" + n.n + "-" + ((n.o \|\| now) - n.t);
	}
	document.getElementById("notesoutput").value = sb;
	document.getElementById("notesoutput").scrollTop = 1000000;
	document.getElementById("searchnotes").value = url
	}

	function clearNotes() {
	notes = [];
	openNotes = {};
	updateNotes();
	}

	function addNote(event) {
	midiThru(event.data, event.timestamp);
	console.log(event);
	var cmd = event.data[0] & 0xf0;
	if (cmd == 0x90 \|\| cmd == 0x80) {
	var currentTimeStamp = new Date().getTime();
	var midiNote = event.data[1];
	if (notes.length == 0)
	firstTimeStamp = currentTimeStamp;
	if (openNotes["n"+midiNote]) {
	openNotes["n"+midiNote].o = currentTimeStamp - firstTimeStamp;
	delete openNotes["n"+midiNote];
	}
	if (cmd == 0x90 && event.data[2] != 0) {
	var n = {t: currentTimeStamp - firstTimeStamp, n: midiNote};
	openNotes["n"+midiNote] = n;
	notes.push(n);
	}
	updateNotes();
	}
	}



	/* Code below is based on <https://github.com/cwilso/monosynth/>.
	Copyright 2013 Chris Wilson
	Licensed under the Apache License, Version 2.0 (the "License");
	you may not use this file except in compliance with the License.
	You may obtain a copy of the License at
	http://www.apache.org/licenses/LICENSE-2.0
	Unless required by applicable law or agreed to in writing, software
	distributed under the License is distributed on an "AS IS" BASIS,
	WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	See the License for the specific language governing permissions and
	limitations under the License.
	*/
	var context=null; // the Web Audio "context" object
	var oscillator=null; // the single oscillator
	var envelope=null; // the envelope for the single oscillator
	var attack=0.05; // attack speed
	var release=0.05; // release speed
	var portamento=0.05; // portamento/glide speed
	var activeNotes = []; // the stack of actively-pressed keys

	function loadMonosynth() {
	// patch up prefixes
	window.AudioContext=window.AudioContext\|\|window.webkitAudioContext;
	context = new AudioContext();
	// set up the basic oscillator chain, muted to begin with.
	oscillator = context.createOscillator();
	oscillator.frequency.setValueAtTime(110, 0);
	envelope = context.createGain();
	oscillator.connect(envelope);
	envelope.connect(context.destination);
	envelope.gain.value = 0.0; // Mute the sound
	oscillator.start(0); // Go ahead and start up the oscillator
	}

	function monosynthSend(data, timestamp) {
	// Mask off the lower nibble (MIDI channel, which we don't care about)
	switch (data[0] & 0xf0) {
	case 0x90:
	if (data[2]!=0) { // if velocity != 0, this is a note-on message
	noteOn(data[1]);
	return;
	}
	// if velocity == 0, fall thru: it's a note-off. MIDI's weird, ya'll.
	case 0x80:
	noteOff(data[1]);
	return;
	}
	}

	function frequencyFromNoteNumber( note ) {
	return 440 * Math.pow(2,(note-69)/12);
	}

	function noteOn(noteNumber) {
	activeNotes.push( noteNumber );
	oscillator.frequency.cancelScheduledValues(0);
	oscillator.frequency.setTargetAtTime( frequencyFromNoteNumber(noteNumber), 0, portamento );
	envelope.gain.cancelScheduledValues(0);
	envelope.gain.setTargetAtTime(1.0, 0, attack);
	}

	function noteOff(noteNumber) {
	var position = activeNotes.indexOf(noteNumber);
	if (position!=-1) {
	activeNotes.splice(position,1);
	}
	if (activeNotes.length==0) { // shut off the envelope
	envelope.gain.cancelScheduledValues(0);
	envelope.gain.setTargetAtTime(0.0, 0, release );
	} else {
	oscillator.frequency.cancelScheduledValues(0);
	oscillator.frequency.setTargetAtTime( frequencyFromNoteNumber(activeNotes[activeNotes.length-1]), 0, portamento );
	}
	}