Skip to content

Instantly share code, notes, and snippets.

@schierlm

schierlm/README.md

Last active January 14, 2017 20:23
Show Gist options
  • Save schierlm/d4107669375f4c6c2f1ed2883e1eebf3 to your computer and use it in GitHub Desktop.
Save schierlm/d4107669375f4c6c2f1ed2883e1eebf3 to your computer and use it in GitHub Desktop.
Download ZIP
Musipedia MIDI search for Chrome (using Web MIDI API)
Raw
README.md
Raw
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>
Raw
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>
Raw
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 );
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment