webaudio-controls/sample4.html at master · ryoyakawai/webaudio-controls · GitHub

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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>[Polymer] WebAudio-Keyboard Test</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="bower_components/polymer/polymer.html">
<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>