forked from staringispolite/cochlea
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
100 lines (97 loc) · 5.41 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
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">
<head>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript" src="js/p5.js"></script>
<script type="text/javascript" src="js/p5.dom.js"></script>
<script type="text/javascript" src="js/dendrite.js"></script>
<script type="text/javascript" src="js/cochlea.js"></script>
<script type="text/javascript" src="js/geomicons.min.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheets/basscss.min.css">
<link rel="stylesheet" type="text/css" href="stylesheets/main.css">
<title>Cochlea - Beat detection Chrome Experiment by Jonathan Howard</title>
</head>
<body class="bg-black">
<nav class="fixed top-0 left-0 bottom-0 bg-black bg-lighten-1 p2 col-2">
<header>
<h1 class="h4"><a class="white caps" href="https://github.com/staringispolite/cochlea">Cochlea</a></h1>
<h2 class="gray regular h5">A frequency banding and beat detection Chrome experiment.</h2>
</header>
<hr class="mb1">
<label class="h6 block bold caps mb1 gray">Visuals</label>
<div class="inline-block clearfix silver mb1 js-button-group">
<button id="bg-color" type="button" title="Switch to Flat-Color Backgrounds"
class="left gray button-outline x-group-item rounded-left">Color</button>
<button id="bg-gif" type="button" title="Switch to GIF Backgrounds"
class="left gray button-outline x-group-item rounded-right">GIF</button>
<button id="bg-circle" type="button" title="Switch to Buahaus Circle Background"
class="left bg-darken-4 button-outline x-group-item rounded-right">Oo</button>
</div>
<form id="giphy-search-form" action="">
<input id="giphy-search-query" type="text" class="fit field-dark" placeholder="Search Giphy...">
</form>
<hr class="mb1">
<label class="h6 block bold caps mb1 gray">Source</label>
<div class="inline-block clearfix silver mb1 js-button-group">
<button type="button" id="source-mp3" title="Switch Audio Source to MP3"
class="left bg-darken-4 button-outline x-group-item rounded-left">MP3s</button>
<button type="button" id="source-mic" title="Switch Audio Source to Mic"
class="left gray button-outline x-group-item rounded-right">Mic</button>
</div>
<label class="h6 block bold caps mb1 gray">Controls</label>
<div class="inline-block clearfix silver js-button-group">
<button id="playback" type="button" title="Play"
class="left button-outline x-group-item rounded-left">
<span class="js-geomicon geomicon" data-icon="play"></span>
</button>
<button id="stop-playback" type="button" title="Stop"
class="display-none left button-outline x-group-item rounded-left">
<span class="js-geomicon geomicon" data-icon="pause"></span>
</button>
<button id="next" type="button" title="Next Audio Clip"
class="left button-outline x-group-item rounded-right">
<span class="js-geomicon geomicon" data-icon="next"></span>
</button>
</div>
<hr class="mb1">
<label class="h6 block bold caps mb1 gray">Threshold</label>
<input id="beat-detect-threshold" type="range" class="fit mb2 range-light gray" value="150" min="0" max="255" tabindex="-1">
<input id="threshold-range-value" type="text" class="col-3 field-dark gray" value="150" disabled>
<label class="h6 block bold caps mb1 gray">Frequency Band</label>
<input id="beat-detect-band" type="range" class="fit mb2 range-light gray" value="10" min="0" max="16" tabindex="-1">
<input id="band-range-value" type="text" class="col-3 field-dark gray" value="10" disabled>
<label class="h6 block bold caps mb1 gray">Beat Sampling Rate</label>
<input id="beat-sampling-rate" type="range" class="fit mb2 range-light gray" value="60" min="0" max="100" tabindex="-1">
<input id="beat-sampling-value" type="text" class="col-3 field-dark gray" value="60%" disabled>
<hr class="mb1">
<footer>
<a href="https://github.com/staringispolite/cochlea" class="silver">
<span class="js-geomicon geomicon mr2" data-icon="github"></span>
</a>
<a href="https://twitter.com/staringispolite" class="silver">
<span class="js-geomicon geomicon mr2" data-icon="twitter"></span>
</a>
<a href="http://www.staringispolite.com" class="silver"
title="Made with <3 by Jonathan Howard">
<span class="js-geomicon geomicon" data-icon="user"></span>
</a>
</footer>
</nav>
<article id="p5container" class="bg-no-repeat js-background bg-olive col-right
col-10 bg-cover fixed top-0 right-0 bottom-0">
<canvas id="canvas" class="absolute-center absolute" width="400" height="325"></canvas>
</article>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-59478672-1', 'auto');
ga('send', 'pageview');
</script>
<script>
var icons = document.querySelectorAll('.js-geomicon');
Geomicons.inject(icons);
</script>
</body>
</html>