-
Notifications
You must be signed in to change notification settings - Fork 3
/
Copy pathcapture.html
55 lines (55 loc) · 3.39 KB
/
capture.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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="UTF-8"/>
<title>ShowCQTBar Audio Spectrum Visualization</title>
<script type="text/javascript" src="common.js"></script>
<style type="text/css">
*, body, pre, p, table, td, tr { margin: 0; padding: 0; border: 0; border-collapse: collapse; }
p { padding-top: 4px; }
td { padding-right: 4px; }
</style>
</head>
<body>
<div style="position:relative; height:240px;" id="my-div-canvas">
<div style="position:absolute; top:0px; left:0px;"><canvas id="my-canvas" width="640" height="240"></canvas></div>
<div style="position:absolute; top:112px; left:0px;" id="my-div-img"><img id="my-img" src="axis-1920x48.png" width="640" height="16"/></div>
<div id="my-knob-div" style="position:absolute; top:8px; left:8px; width:200px; color: #FFFFFF; font-size: 8pt; font-family: mono;">
<div id="my-knob" style="visibility: hidden;">
<table>
<tr><td>Waterfall</td>
<td>
<input type="radio" name="waterfall" id="my-waterfall-off" checked="checked"/><label for="my-waterfall-off">Off</label>
<input type="radio" name="waterfall" id="my-waterfall-slow"/><label for="my-waterfall-slow">Slow</label>
<input type="radio" name="waterfall" id="my-waterfall-medium"/><label for="my-waterfall-medium">Medium</label>
<input type="radio" name="waterfall" id="my-waterfall-fast"/><label for="my-waterfall-fast">Fast</label>
</td></tr>
<tr><td><label for="my-bass-knob">Bass</label></td>
<td><input type="range" min="-50" max="0" value="-30" id="my-bass-knob"/></td></tr>
<tr><td><label for="my-bar-knob">Bar</label></td>
<td><input type="range" min="0" max="40" value="19" id="my-bar-knob"/></td></tr>
<tr><td><label for="my-brightness-knob">Brightness</label></td>
<td><input type="range" min="0" max="40" value="25" id="my-brightness-knob"/></td></tr>
</table>
</div>
</div>
<div id="my-perf-div" style="position:absolute; top:8px; left:220px; width:400px; color: #FFFFFF; font-size: 8pt; text-align: right;">
<pre id="my-perf" style="visibility: hidden;"></pre>
</div>
</div>
<div id="my-audio-div" style="position:relative;"></div>
<div id="my-input-div"></div>
<p id="my-p">Resolutions:
[<a href="capture.html?s=auto">Auto</a>]
[<a href="capture.html?s=autosmall">Auto Small</a>]
[<a href="capture.html?s=1920x720">1920x720</a>]
[<a href="capture.html?s=1600x600">1600x600</a>]
[<a href="capture.html?s=1280x480">1280x480</a>]
[<a href="capture.html?s=960x360">960x360</a>]
[<a href="capture.html?s=640x240">640x240</a>]
[<a href="index.html?s=auto">Playback</a>]
[<a href="https://github.com/mfcc64/html5-showcqtbar/issues/1" target="_blank">Comments</a>]
[<a href="https://github.com/mfcc64/html5-showcqtbar" target="_blank">Source</a>].
</p>
</body>
</html>