forked from g200kg/webaudio-controls
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathsample4.html
executable file
·57 lines (51 loc) · 1.9 KB
/
sample4.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>[Polymer] WebAudio-Keyboard Test</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="webaudio-controls.html">
<script type="text/javascript">
var midioutputs = [];
var midiout = null;
function Init() {
navigator.requestMIDIAccess({
sysex: false
}).then(scb, ecb);
document.getElementById("midiout").addEventListener("change", function (e) {
midiout = midioutputs[document.getElementById("midiout").selectedIndex];
});
document.getElementById("keyboard").addEventListener("change", function (e) {
midiout.send([0x90, e.note[1], e.note[0] ? 100 : 0]);
});
document.getElementById("prog").addEventListener("change", function (e) {
midiout.send([0xc0, e.target.value]);
});
document.getElementById("volume").addEventListener("change", function (e) {
midiout.send([0xb0, 7, e.target.value]);
});
}
function ecb(e) {
console.log(e);
}
function scb(midiaccess) {
var i = 0;
var outputs = midiaccess.outputs.values();
for (var outit = outputs.next(); !outit.done; outit = outputs.next()) {
document.getElementById("midiout").options[i++] = new Option(outit.value.name);
midioutputs.push(outit.value);
}
midiout = midioutputs[0];
}
</script>
</head>
<body onload="Init()">
<h1>WebAudio-Keyboard Test</h1>
<p>This test requires 'Web MIDI API' support, MIDI I/F, and External MIDI device</p>
MidiOut : <select id="midiout"></select><br/><br/> Program :
<webaudio-slider id="prog" min="0" max="127" direction="horz" valuetip="0"></webaudio-slider>
<webaudio-param link="prog"></webaudio-param><br/><br/> Volume :
<webaudio-knob id="volume" min="0" max="127" value="100" diameter="40"></webaudio-knob><br/><br/>
<webaudio-keyboard id="keyboard" min="36" keys="61" width="600" height="50"></webaudio-keyboard>
</body>
</html>