-
Notifications
You must be signed in to change notification settings - Fork 2
/
shatter.html
19 lines (18 loc) · 1009 Bytes
/
shatter.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/addons/p5.sound.min.js"></script>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Shattered Octaves</h1>
<p>Inspired in part by <a href=https://www.youtube.com/watch?v=oGeBem72R3Y>this</a> video, this plot represents a spectrograph where each turn is an octave. The same note in a different octave appears at the same angle, making harmonics easier to see.</p>
<p>The dropdown has a number of samples, but you can also select a file from your device. Tapping below or hiting 'P' will play/pause the current track</p>
<h5>Depending on the track, the plot may flash rapidly.</h5>
<script src="shatter.js"></script>
<div id="progressbar">
<div></div>
</div>
</body>
</html>