add WebMIDIAPI shim to all the demos

Web MIDI API support works with jazz-soft.net plugin installed, this means users will not need to download Soundfonts from your website, rather they will use their built-in sound banks. This shim by @cwilso provides a preview of the upcoming Web MIDI API, an exciting addition to the W3 specs!
This commit is contained in:
Michael Deal 2013-01-25 21:33:59 -08:00
parent 1513ddafda
commit ffdb8fc93a
5 changed files with 17 additions and 11 deletions

View file

@ -1,7 +1,7 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml"> <html xmlns = "http://www.w3.org/1999/xhtml">
<head> <head>
<!-- midi-js --> <!-- midi.js package -->
<script src="./js/MIDI/AudioDetect.js" type="text/javascript"></script> <script src="./js/MIDI/AudioDetect.js" type="text/javascript"></script>
<script src="./js/MIDI/LoadPlugin.js" type="text/javascript"></script> <script src="./js/MIDI/LoadPlugin.js" type="text/javascript"></script>
<script src="./js/MIDI/Plugin.js" type="text/javascript"></script> <script src="./js/MIDI/Plugin.js" type="text/javascript"></script>
@ -9,8 +9,8 @@
<script src="./js/Window/DOMLoader.XMLHttp.js" type="text/javascript"></script> <script src="./js/Window/DOMLoader.XMLHttp.js" type="text/javascript"></script>
<script src="./js/Window/DOMLoader.script.js" type="text/javascript"></script> <script src="./js/Window/DOMLoader.script.js" type="text/javascript"></script>
<!-- extras --> <!-- extras -->
<script src="./inc/Polyfill/Base64.js" type="text/javascript"></script>
<script src="./inc/WebMIDIAPI.js" type="text/javascript"></script> <script src="./inc/WebMIDIAPI.js" type="text/javascript"></script>
<script src="./inc/Base64.js" type="text/javascript"></script>
<script src="./inc/base64binary.js" type="text/javascript"></script> <script src="./inc/base64binary.js" type="text/javascript"></script>
</head> </head>
<body> <body>
@ -26,6 +26,7 @@ window.onload = function () {
var velocity = 127; // how hard the note hits var velocity = 127; // how hard the note hits
// play the note // play the note
MIDI.noteOn(0, note, velocity, delay); MIDI.noteOn(0, note, velocity, delay);
MIDI.noteOff(0, note, delay+0.01);
} }
}); });
}; };

View file

@ -3,9 +3,9 @@
<head> <head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>MIDI.js - Sequencing in Javascript.</title> <title>MIDI.js - Sequencing in Javascript.</title>
<!-- soundfont.js css --> <!-- midi.js css -->
<link href="./css/MIDIPlayer.css" rel="stylesheet" type="text/css" /> <link href="./css/MIDIPlayer.css" rel="stylesheet" type="text/css" />
<!-- soundfont.js package --> <!-- midi.js package -->
<script src="./js/Color/SpaceW3.js" type="text/javascript"></script> <script src="./js/Color/SpaceW3.js" type="text/javascript"></script>
<script src="./js/MIDI/AudioDetect.js" type="text/javascript"></script> <script src="./js/MIDI/AudioDetect.js" type="text/javascript"></script>
<script src="./js/MIDI/LoadPlugin.js" type="text/javascript"></script> <script src="./js/MIDI/LoadPlugin.js" type="text/javascript"></script>
@ -20,8 +20,9 @@
<script src="./inc/jasmid/stream.js"></script> <script src="./inc/jasmid/stream.js"></script>
<script src="./inc/jasmid/midifile.js"></script> <script src="./inc/jasmid/midifile.js"></script>
<script src="./inc/jasmid/replayer.js"></script> <script src="./inc/jasmid/replayer.js"></script>
<!-- base64 packages --> <!-- extras -->
<script src="./inc/Polyfill/Base64.js" type="text/javascript"></script> <script src="./inc/WebMIDIAPI.js" type="text/javascript"></script>
<script src="./inc/Base64.js" type="text/javascript"></script>
<script src="./inc/base64binary.js" type="text/javascript"></script> <script src="./inc/base64binary.js" type="text/javascript"></script>
</head> </head>
<body> <body>

View file

@ -1,14 +1,16 @@
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns = "http://www.w3.org/1999/xhtml"> <html xmlns = "http://www.w3.org/1999/xhtml">
<head> <head>
<!-- midi.js package -->
<script src="./js/MIDI/AudioDetect.js" type="text/javascript"></script> <script src="./js/MIDI/AudioDetect.js" type="text/javascript"></script>
<script src="./js/MIDI/LoadPlugin.js" type="text/javascript"></script> <script src="./js/MIDI/LoadPlugin.js" type="text/javascript"></script>
<script src="./js/MIDI/Plugin.js" type="text/javascript"></script> <script src="./js/MIDI/Plugin.js" type="text/javascript"></script>
<script src="./js/MIDI/Player.js" type="text/javascript"></script> <script src="./js/MIDI/Player.js" type="text/javascript"></script>
<script src="./js/Window/DOMLoader.XMLHttp.js" type="text/javascript"></script> <script src="./js/Window/DOMLoader.XMLHttp.js" type="text/javascript"></script>
<script src="./js/Window/DOMLoader.script.js" type="text/javascript"></script> <script src="./js/Window/DOMLoader.script.js" type="text/javascript"></script>
<!-- base64 packages --> <!-- extras -->
<script src="./inc/Polyfill/Base64.js" type="text/javascript"></script> <script src="./inc/WebMIDIAPI.js" type="text/javascript"></script>
<script src="./inc/Base64.js" type="text/javascript"></script>
<script src="./inc/base64binary.js" type="text/javascript"></script> <script src="./inc/base64binary.js" type="text/javascript"></script>
</head> </head>
<body> <body>

View file

@ -2,6 +2,7 @@
<html lang="en"> <html lang="en">
<head> <head>
<title>Whitney Music Box in HTML5</title> <title>Whitney Music Box in HTML5</title>
<!-- midi.js package -->
<script src="./js/Color/SpaceW3.js" type="text/javascript"></script> <script src="./js/Color/SpaceW3.js" type="text/javascript"></script>
<script src="./js/MIDI/AudioDetect.js" type="text/javascript"></script> <script src="./js/MIDI/AudioDetect.js" type="text/javascript"></script>
<script src="./js/MIDI/LoadPlugin.js" type="text/javascript"></script> <script src="./js/MIDI/LoadPlugin.js" type="text/javascript"></script>
@ -12,10 +13,11 @@
<script src="./js/Window/Event.js" type="text/javascript"></script> <script src="./js/Window/Event.js" type="text/javascript"></script>
<script src="./js/Window/DOMLoader.XMLHttp.js" type="text/javascript"></script> <script src="./js/Window/DOMLoader.XMLHttp.js" type="text/javascript"></script>
<script src="./js/Window/DOMLoader.script.js" type="text/javascript"></script> <script src="./js/Window/DOMLoader.script.js" type="text/javascript"></script>
<!-- base642binary package --> <!-- extras -->
<script src="./inc/Polyfill/Base64.js" type="text/javascript"></script> <script src="./inc/WebMIDIAPI.js" type="text/javascript"></script>
<script src="./inc/Base64.js" type="text/javascript"></script>
<script src="./inc/base64binary.js" type="text/javascript"></script> <script src="./inc/base64binary.js" type="text/javascript"></script>
<!-- google fonts package --> <!-- font -->
<link href="http://fonts.googleapis.com/css?family=Andada" rel="stylesheet" type="text/css" /> <link href="http://fonts.googleapis.com/css?family=Andada" rel="stylesheet" type="text/css" />
<style> <style>
body { body {