-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
49 lines (49 loc) · 1.83 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
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Reverb;d</title>
<link rel="stylesheet" href="site/css/output.css">
</head>
<body class="centered-body">
<div class="max-w-screen-lg centered-div">
<!-- Header -->
<header>
<h1>Reverb;d</h1>
<h4>An audio filter sandbox by <a href="https://github.com/sheikhrachel">Rachel</a></h4>
</header>
<!-- Main Content -->
<main>
<!-- Upload Form -->
<form id="uploadForm" enctype="multipart/form-data">
<p>Upload a .mp3 file to get started</p>
<label class="label-text" for="file_input">Upload file</label>
<input class="file-input" aria-describedby="file_input_help" id="file_input" type="file" accept=".mp3">
<p class="help-text" id="file_input_help">mp3 files only (for now)</p>
</form>
<!-- Audio Controls -->
<div id="audio-controls" class="flex items-center p-4 bg-gray-900 text-white">
<!-- Custom Play/Pause Button -->
<button id="playPauseButton" class="audio-btn mr-4">
Play
</button>
<!-- Custom Audio Progress Bar -->
<div id="progressContainer" class="relative flex-1 mr-4 h-2 bg-gray-700 rounded">
<div id="progressBar" class="absolute h-2 bg-blue-500 rounded"></div>
</div>
</div>
<!-- Audio Visualizer -->
<div id="audio-visualizer">
<canvas id="visualizerCanvas"></canvas>
</div>
<!-- Filter Buttons -->
<div id="filter-buttons">
<p>Use these buttons to apply an audio filter</p>
</div>
<!-- loading spinner -->
<div id="loading-spinner" class="loading-spinner" style="display:none;"></div>
</main>
</div>
<!-- Scripts -->
<script src="site/js/site.js"></script>
</body>
</html>