-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
120 lines (104 loc) · 3.7 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
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS v5.2.1 -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
<meta charset="utf-8">
<title>Spectrogram Visualization</title>
<script src="js/3D/matrix4x4.js"></script>
<script src="js/3D/cameracontroller.js"></script>
<script src="js/3D/visualizer.js"></script>
<script src="js/o3djs/base.js"></script>
<script src="js/o3djs/math.js"></script>
<script src="js/o3djs/quaternions.js"></script>
<script src="js/o3djs/shader.js"></script>
<script src="js/spectrogram.js"></script>
<style>
audio,
canvas {
width: 90vw;
}
select {
width: 100%
}
#myCanvas {
height: 100vh;
}
</style>
</head>
<script>
function playFromFile() {
};
</script>
<body>
<header>
<!-- place navbar here -->
<h3 class="text-center p-sm-1">Spectrogram Visualization</h3>
</header>
<main>
</main>
<!-- Bootstrap JavaScript Libraries -->
<script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js"
integrity="sha384-oBqDVmMz9ATKxIep9tiCxS/Z9fNfEXiDAYTujMAeBAsjFuCZSmKbSSUnQlmh/jp3" crossorigin="anonymous">
</script>
<div class="container-fluid">
<div class="row">
<div class="container">
<audio controls autoplay loop id="myAudio" onplay="spec3D.start(myAudio, myCanvas)">
<source src="snd/trn_2023_v0_000_interloctr.wav" />
</audio>
</div>
</div>
<div class="row">
<form>
<!-- <div class="mb-3">
<label for="formFile" class="form-label">Default file input example</label>
<input class="form-control" type="file" id="formFile">
</div> -->
<div class="form-group">
<select class="form-control" onchange="spec3D.analyserView.analysisType = this.selectedIndex">
<option>Frequency</option>
<option>Sonogram</option>
<option selected>3D Sonogram</option>
<option>Waveform</option>
</select>
</div>
</form>
</div>
<hr />
<div class="row">
<canvas id="myCanvas"></canvas>
</div>
</div>
<!-- place footer here -->
<footer class="d-flex flex-wrap justify-content-between align-items-center py-3 my-4 border-top">
<div class="col-md-4 d-flex align-items-center">
<a href="/" class="mb-3 me-2 mb-md-0 text-muted text-decoration-none lh-1">
<svg class="bi" width="30" height="24">
<use xlink:href="#bootstrap"></use>
</svg>
</a>
<span class="mb-3 mb-md-0 text-muted">© 2023 OpenHuman, Inc</span>
</div>
<ul class="nav col-md-4 justify-content-end list-unstyled d-flex">
<li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24">
<use xlink:href="#twitter"></use>
</svg></a></li>
<li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24">
<use xlink:href="#instagram"></use>
</svg></a></li>
<li class="ms-3"><a class="text-muted" href="#"><svg class="bi" width="24" height="24">
<use xlink:href="#facebook"></use>
</svg></a></li>
</ul>
</footer>
<!-- place footer here -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js"
integrity="sha384-7VPbUDkoPSGFnVtYi0QogXtr74QeVeeIs99Qfg5YCF+TidwNdjvaKZX19NZ/e6oz" crossorigin="anonymous">
</script>
</body>
</html>