Skip to content

Instantly share code, notes, and snippets.

@gleitz

gleitz/Synchronized notes and animation with MIDI.js

Last active January 11, 2016 11:18
Show Gist options
  • Save gleitz/cb4d40a52e1b2043bfcb to your computer and use it in GitHub Desktop.
Save gleitz/cb4d40a52e1b2043bfcb to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Synchronized notes and animation with MIDI.js
<!DOCTYPE html>
<html xmlns = "http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<!-- polyfill -->
<script src="../inc/shim/Base64.js" type="text/javascript"></script>
<script src="../inc/shim/Base64binary.js" type="text/javascript"></script>
<script src="../inc/shim/WebAudioAPI.js" type="text/javascript"></script>
<!-- midi.js package -->
<script src="../js/midi/audioDetect.js" type="text/javascript"></script>
<script src="../js/midi/gm.js" type="text/javascript"></script>
<script src="../js/midi/loader.js" type="text/javascript"></script>
<script src="../js/midi/plugin.audiotag.js" type="text/javascript"></script>
<script src="../js/midi/plugin.webaudio.js" type="text/javascript"></script>
<script src="../js/midi/plugin.webmidi.js" type="text/javascript"></script>
<!-- utils -->
<script src="../js/util/dom_request_xhr.js" type="text/javascript"></script>
<script src="../js/util/dom_request_script.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
var color1 = "#000",
color2 = "#FFF";
function changeColor() {
document.body.style.backgroundColor = color1;
var tmp_color = color1;
color1 = color2;
color2 = tmp_color;
}
window.onload = function () {
MIDI.loadPlugin({
soundfontUrl: "./soundfont/",
instrument: "acoustic_grand_piano",
onprogress: function(state, progress) {
console.log(state, progress);
},
onsuccess: function() {
var delay = 0; // play one note every quarter second
var note = 50; // the MIDI note
var velocity = 127; // how hard the note hits
// play the note
MIDI.setVolume(0, 127);
var melody = [53,55,56,57,58,60,62,64];
for(var i=0;i<melody.length;i++) {
setTimeout(function () { changeColor(); }, i * 1000);
MIDI.noteOn(0, melody[i], velocity, i);
MIDI.noteOff(0, melody[i], i + 1);
}
}
});
};
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment