-
Notifications
You must be signed in to change notification settings - Fork 51
/
index.html
132 lines (115 loc) · 5.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta name="description" content="Webmidiapishim : Polyfill using the Jazz NPAPI MIDI plugin to implement the Web MIDI API on Mac and Windows."
/>
<link rel="stylesheet" type="text/css" media="screen" href="gh-pages/styles/stylesheet.css">
<title>Web MIDI API Polyfill</title>
<style>
#log {
height: 15em;
}
</style>
</head>
<body>
<!-- HEADER -->
<div id="header_wrap" class="outer">
<header class="inner">
<a id="forkme_banner" href="https://github.com/cwilso/WebMIDIAPIShim">View on GitHub</a>
<h1 id="project_title">Web MIDI API Polyfill</h1>
<h2 id="project_tagline">This is a polyfill using the
<a href="http://jazz-soft.net/">Jazz</a> NPAPI MIDI plugin to implement the Web MIDI API on Mac and Windows.</h2>
<section id="downloads">
<a class="zip_download_link" href="https://github.com/cwilso/WebMIDIAPIShim/zipball/master">Download this project as a .zip file</a>
<a class="tar_download_link" href="https://github.com/cwilso/WebMIDIAPIShim/tarball/master">Download this project as a tar.gz file</a>
</section>
</header>
</div>
<!-- MAIN CONTENT -->
<div id="main_content_wrap" class="outer">
<section id="main_content" class="inner">
<h3>To use the Web MIDI API Polyfill</h3>
<p>Just include</p>
<pre><script src='https://cwilso.github.io/WebMIDIAPIShim/build/WebMIDIAPI.min.js'></script></pre>
<p>in your HTML source.</p>
<h3>Test it out!</h3>
<p>
<strong>Before you press the button:</strong> install the
<a href="http://jazz-soft.net/">Jazz-Soft.net's Jazz-Plugin</a>, version 1.4 or higher to enable MIDI support on Windows, OSX and Linux.</p>
<p>You will also want some MIDI input/output devices - MacOS and Windows typically have output software synthesizers
installed by default. On MacOS, if you want a software input device you may want to install
<a href="http://www.manyetas.com/creed/midikeys.html">MidiKeys</a>.
</p>
<button onclick="runTest();">Test MIDI!</button>
<pre id="log">
</pre>
<div id="MIDIPlugin" style="position:absolute; visibility:hidden"></div>
</section>
</div>
<!-- FOOTER -->
<div id="footer_wrap" class="outer">
<footer class="inner">
<p class="copyright">Web MIDI API Polyfill maintained by
<a href="https://github.com/cwilso">cwilso</a>
</p>
</footer>
</div>
<script src="browser/WebMIDIAPI.min.js"></script>
<script>
var midi = null;
var inputs = null;
var outputs = null;
var input = null;
var output = null;
var log = null;
function runTest() {
if (!log)
log = document.getElementById("log");
log.innerHTML = "Starting up MIDI...\n";
navigator.requestMIDIAccess().then(success, failure);
}
function handleMIDIMessage(ev) {
// testing - just reflect.
log.innerHTML += "Message: " + ev.data.length + " bytes, timestamp: " + ev.timeStamp;
if (ev.data.length == 3)
log.innerHTML += " 0x" + ev.data[0].toString(16) + " 0x" + ev.data[1].toString(16) + " 0x" + ev.data[2].toString(16);
log.innerHTML += "\n";
if (output)
output.send(ev.data);
}
function success(midiAccess) {
var i, iterator, data, port;
log.innerHTML += "MIDI ready!\n";
midi = midiAccess;
inputs = midi.inputs;
log.innerHTML += inputs.size + " inputs:\n";
i = 0;
inputs.forEach(function (port) {
log.innerHTML += i++ + ": " + port.name + "; manufacturer: " + port.manufacturer + "; version: " + port.version + "\n";
});
if (inputs.size > 0) {
iterator = inputs.values();
input = iterator.next().value;
input.onmidimessage = handleMIDIMessage;
log.innerHTML += "Hooked up first input.\n";
}
outputs = midi.outputs;
log.innerHTML += outputs.size + " outputs:\n";
i = 0;
outputs.forEach(function (port) {
log.innerHTML += i++ + ": " + port.name + "; manufacturer: " + port.manufacturer + "; version: " + port.version + "\n";
});
if (outputs.size > 0) {
iterator = outputs.values();
output = iterator.next().value;
output.send([0xb0, 0x00, 0x7f]); // If the first device is a Novation Launchpad, this will light it up!
}
}
function failure(error) {
alert("MIDI failed to start. Did you forget to install the Jazz plugin?");
}
</script>
</body>
</html>