-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·72 lines (70 loc) · 1.84 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
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>Audio Recorder</title>
<script src="js/audiodisplay.js"></script>
<script src="js/recorderjs/recorder.js"></script>
<script src="js/main.js"></script>
<style>
html { overflow: hidden; }
body {
font: 14pt Arial, sans-serif;
background: lightgrey;
display: flex;
flex-direction: column;
height: 100vh;
width: 100%;
margin: 0 0;
}
canvas {
display: inline-block;
background: #202020;
width: 95%;
height: 45%;
box-shadow: 0px 0px 10px blue;
}
#controls {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-around;
height: 20%;
width: 100%;
}
#record { height: 15vh; }
#record.recording {
background: red;
background: -webkit-radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%);
background: -moz-radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%);
background: radial-gradient(center, ellipse cover, #ff0000 0%,lightgrey 75%,lightgrey 100%,#7db9e8 100%);
}
#save, #save img { height: 10vh; }
#save { opacity: 0.25;}
#save[download] { opacity: 1;}
#viz {
height: 80%;
width: 100%;
display: flex;
flex-direction: column;
justify-content: space-around;
align-items: center;
}
@media (orientation: landscape) {
body { flex-direction: row;}
#controls { flex-direction: column; height: 100%; width: 10%;}
#viz { height: 100%; width: 90%;}
}
</style>
</head>
<body>
<div id="viz">
<canvas id="analyser" width="1024" height="500"></canvas>
<canvas id="wavedisplay" width="1024" height="500"></canvas>
</div>
<div id="controls">
<img id="record" src="img/mic128.png" onclick="toggleRecording(this);">
<a id="save" href="#"><img src="img/save.svg"></a>
</div>
</body>
</html>