-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
77 lines (77 loc) · 2.74 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
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>No Bella No</title>
<link rel="stylesheet" type="text/css" href="index.css">
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
</head>
<body>
<header>
<h1>No Bella No</h1>
<span> Bella, you shall not bark at me!</span>
</header>
<div class="content">
<section class="visual">
<div class="group">
<div class="frequency-spectrum column">
<h2>Frequency Spectrum<span> Currently 256 levels</span></h2>
<canvas id="chart" height='300px' width="800px"></canvas>
</div>
<div class="camera column">
<h2> Live Stream</h2>
<video width="400px" height="300px" autoplay muted>
</video>
</div>
</div>
</section>
<section>
<div class="group">
<div class="column">
<div class="subsection">
<h2>Volume</h2>
<canvas height="30px", width="800px" id="volume-meter"></canvas>
<p id="volume-value"></p>
</div>
<div class="subsection">
<h2>Threshold</h2>
<table>
<tr>
<td>
<label for="volume-threshold">Volume</label>
</td>
<td>
<input type="text" id='volume-threshold' value="100">
</td>
</tr>
<tr>
<td>
<label for="frequency-threshold">Frequency (0-255)</label>
</td>
<td>
<input type="text" id='frequency-threshold' value="100" placeholder="0-255">
</td>
</tr>
</table>
</div>
<div class="subsection">
<h2>Handler</h2>
<label for="audio-file">Select file(s) to play</label>
<input id="audio-file" type="file" accept="audio/*" multiple />
<audio id="audio-player"></audio>
</div>
</div>
<div class="column">
<canvas id="hidden-stage" height="300px" width="400px"></canvas>
<img id="screenshot">
</div>
</div>
</section>
</div>
<footer>
</footer>
<script type="text/javascript" src='volume_detector.js'></script>
<script type="text/javascript" src='motion_detector.js'></script>
<script type="text/javascript" src='main.js'></script>
</body>
</html>