waveform-visualiser/visualiser.html at master · rosslovas/waveform-visualiser · 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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>Visualiser</title>
	<style type="text/css">
		body {
			background-color: #030408;
			color: #EFE;
			margin: 0;
		}
		#visualiser {
			z-index: -1;
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
		}
		#controls {
			margin-left: 20px;
			margin-top: 20px;
		}
	</style>
</head>
<body>
	<canvas id="visualiser" width="800" height="600"></canvas>
	<div id="controls">
		<label id="audio-file-label" for="audio-file-input">Audio File:</label>
		<input id="audio-file-input" type="file" onchange="audioFileChanged();"></input>
		<br>
		<label id="scaler-label" for="scaler">Amplitude Scale Factor: 1.0</label>
		<input id="scaler" type="range" min="10.0" max="500.0" value="100.0">
		<br>
		<input id="fullscreen-button" type="button" value="Toggle Fullscreen"></input>
		<br><br>
		<audio id="audio-player" controls></audio>
	</div>
	<script type="text/javascript" src="visualiser.js"></script>
</body>
</html>