-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
51 lines (44 loc) · 1.66 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Real-Time BPM Detector</title>
<link rel="stylesheet" href="index.css">
<!-- Library Scripts -->
<script src="./library/p5.js"></script>
<script src="./library/p5.sound.js"></script>
</head>
<body>
<h1>Real-Time BPM Detector</h1>
</br></br>
<section class="mainsect">
<div class="form">
<form>
<label>Upload Audio File<br /><br />
<input type="file" class="profile-aud" onchange="enabledbtn()">
</label>
<button class="upload" type="submit" accept="audio/*" disabled>Upload</button>
</form>
<audio class="aud" id="sound"></audio>
<button class="play">Play</button>
</div>
<div id="mainsectcanvas"></div>
</section>
</br>
<section class="description">
<p> This sketch was made under 72hrs during the first "The Sound of AI Hackathon." Terry Feng developed it with
the support of Hegel Pedroza, Sabine Gund, and Apostolos Ntelopoulos. It can detect the immediate and
running BPM of a sound file and generate a visualization of the tempo. It uses mainly P5js for all the
tasks. </p>
<a href="https://github.com/terryzfeng/BPM-tracker">Github Repository</a>
</section>
<hr>
<!-- Player -->
<script src="./player.js"></script>
<!-- BPM -->
<script src="./utils.js"></script>
<script src="./sketch.js"></script>
</body>
</html>