forked from g200kg/webaudio-controls
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathsample3.html
executable file
·87 lines (82 loc) · 4.37 KB
/
sample3.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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>[Polymer] WebAudio-Controls Live Demo</title>
<script src="bower_components/webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="webaudio-controls.html">
<style>
#base {
color: #027;
position: relative;
background: #888;
background: linear-gradient(top, #444 0%, #aaa 3%, #888 97%, #444 100%);
background: -webkit-linear-gradient(top, #444 0%, #aaa 3%, #888 97%, #444 100%);
background: -moz-linear-gradient(top, #444 0%, #aaa 3%, #888 97%, #444 100%);
background: -ms-linear-gradient(top, #444 0%, #aaa 3%, #888 97%, #444 100%);
width: 500px;
height: 300px;
margin: 30px 40px;
padding: 0px;
}
</style>
</head>
<body style="background-color:#eee;font-family:sans-serif;position:relative">
<h1>WebAudio-Controls Live Demo</h1>
<div id="base">
<webaudio-knob id="knob1" diameter="48" style="position:absolute;left:50px;top:20px"></webaudio-knob>
<webaudio-knob id="knob2" diameter="48" style="position:absolute;left:120px;top:20px"></webaudio-knob>
<webaudio-param link="knob1" style="position:absolute;left:60px;top:75px"></webaudio-param>
<webaudio-param link="knob2" style="position:absolute;left:130px;top:75px"></webaudio-param>
<webaudio-slider id="slider1" width="16" height="80" style="position:absolute;left:380px;top:50px"></webaudio-slider>
<webaudio-slider id="slider2" direction="horz" style="position:absolute;left:240px;top:50px"></webaudio-slider>
<webaudio-switch id="switch1" style="position:absolute;left:220px;top:90px"></webaudio-switch>
<webaudio-switch id="switch2" style="position:absolute;left:260px;top:90px"></webaudio-switch>
<webaudio-keyboard id="key" width="400" height="100" min="48" keys="25" style="position:absolute;left:48px;top:160px"></webaudio-keyboard>
<webaudio-keyboard id="key2" width="160" height="20" min="36" keys="61" enable="0" colors="#000;#ccf;;#000;;#0fc;;#0fc" style="position:absolute;left:48px;top:270px"></webaudio-keyboard>
<span style="position:absolute;left:60px;top:100px"><webaudio-knob></span>
<span style="position:absolute;left:60px;top:120px"><webaudio-param></span>
<span style="position:absolute;left:270px;top:20px"><webaudio-slider></span>
<span style="position:absolute;left:220px;top:120px"><webaudio-switch></span>
<span style="position:absolute;left:320px;top:265px"><webaudio-keyboard></span>
</div>
<div id="events" style="position:absolute;right:0;top:0;background:rgba(128,128,255,0.5);padding:10px;color:#000;text-align:left;width:300px;height:300px;overflow:scroll"></div>
<script type="text/javascript">
var message = "";
var log = [];
var knobs = document.getElementsByTagName('webaudio-knob');
for (var i = 0; i < knobs.length; i++)
knobs[i].addEventListener("change", Dump, false);
var sliders = document.getElementsByTagName('webaudio-slider');
for (var i = 0; i < sliders.length; i++)
sliders[i].addEventListener("change", Dump, false);
var switches = document.getElementsByTagName('webaudio-switch');
for (var i = 0; i < switches.length; i++) {
switches[i].addEventListener("change", Dump, false);
}
var key = document.getElementById("key");
key.addEventListener('change', Dump, false);
key.addEventListener('note', Dump, false);
var key2 = document.getElementById("key2");
function Dump(e) {
var str = "";
if (e.target.id == "key") {
key2.setNote(e.note[0], e.note[1]);
str = e.type + " : " + e.target.id + " : [" + e.note + "] ";
} else
str = e.type + " : " + e.target.id + " : " + e.target.value + " ";
console.log(str);
log.unshift(str);
log.length = 20;
str = "";
for (var i = 19; i >= 0; --i) {
if (log[i])
str += log[i] + "<br/>";
}
var evview = document.getElementById("events");
evview.innerHTML = str;
evview.scrollTop = evview.scrollHeight;
}
</script>
</body>
</html>