-
Notifications
You must be signed in to change notification settings - Fork 48
/
index.html
218 lines (214 loc) · 7.56 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
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>audiofabric</title>
<meta charset="utf-8">
<meta name="description" content="A 3D music visualization.">
<meta name="news_keywords" content="music, music visualization, webgl, 3d, data viz, data, data vis">
<meta property="og:title" content="audiofabric">
<meta property="og:site_name" content="tbaldw.in">
<meta property="og:url" content="https://tbaldw.in/audiofabric">
<meta property="og:description" content="A 3D music visualization.">
<meta property="og:type" content="article">
<meta property="og:image" content="https://tbaldw.in/audiofabric/images/audiofabric.png">
<meta property="og:image:type" content="image/png">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="https://tbaldw.in">
<meta name="twitter:creator" content="@taylorbaldwin">
<meta name="twitter:title" content="audiofabric">
<meta name="twitter:description" content="A 3D music visualization.">
<meta name="twitter:image:src" content="https://tbaldw.in/audiofabric/images/audiofabric.png">
<style>
@font-face {
font-family: 'Open Sans';
src: url('src/fonts/OpenSans-Regular.ttf') format('ttf'),
url('src/fonts/OpenSans-Regular.woff') format('woff'),
url('src/fonts/OpenSans-Regular.woff2') format('woff2');
}
html, body {
color: #e2e2e2;
background-color: rgb(45, 45, 45);
font-family: 'Open Sans', sans-serif;
-webkit-font-smoothing: antialiased;
margin: 0;
padding: 0;
}
.title-card-container {
position: absolute;
height: 100vh;
width: 100vw;
top: 0;
left: 0;
z-index: 8;
}
.instructions {
opacity: 0;
transition: opacity 1000ms linear;
color: rgb(230, 230, 230);
position: absolute;
top: 47%;
text-align: center;
width: 100vw;
font-size: 18px;
letter-spacing: 8px;
}
.instructions button {
margin-top: 50px;
color: rgb(230, 230, 230);
padding: 25px 50px;
transition: background-color 150ms linear;
background-color: rgba(60, 60, 60, 0.95);
border: 1px solid rgb(70, 70, 70);
cursor: pointer;
font-size: 14px;
letter-spacing: 3px;
outline: 0;
font-family: inherit;
}
.instructions button:hover {
background-color: rgba(70, 70, 70, 1);
}
.ios-instructions {
display: none;
text-align: center;
margin: 5vh auto 0;
width: 70vw;
}
.ios-instructions h2 {
font-size: 28px;
font-weight: 800;
}
.ios-instructions video {
width: 100%;
}
.controls-container {
opacity: 0;
margin: 10px;
width: 290px;
padding-top: 30px;
position: relative;
background-color: rgba(60, 60, 60, 0.65);
border: 1px solid rgb(80, 80, 80);
z-index: 9;
}
.controls-header {
padding: 20px 25px;
font-weight: 200;
font-size: 18px;
color: #eee;
position: relative;
}
.github-link {
position: absolute;
fill: #888;
top: -15px;
right: 20px;
transition: fill 200ms linear;
}
.github-link:hover {
fill: #eee;
}
.artist {
font-size: 11px;
text-transform: uppercase;
color: #aaa;
}
.elapsed-time {
position: absolute;
bottom: 20px;
right: 25px;
font-weight: 200;
font-size: 13px;
color: #eee;
}
.seeker {
height: 5px;
width: 100%;
background-color: rgba(90, 90, 90, 0.5);
cursor: pointer;
position: relative;
}
.progress {
height: 100%;
position: absolute;
top: 0;
left: -1px;
background-color: #eee;
}
.track-selector {
margin: 0 0 20px 0;
position: relative;
z-index: 10;
cursor: pointer;
list-style: none;
padding: 0;
}
.track {
margin: 10px 0 10px 25px;
position: relative;
font-size: 13px;
transition: color 200ms linear;
color: #888;
}
.track span {
margin-right: 15px;
}
.track:hover {
color: #bbb;
}
.track.selected {
color: #eee;
}
.hint {
display: none;
padding: 20px;
font-size: 12px;
font-weight: 800;
text-align: center;
border-top: 1px solid rgb(70, 70, 70);
color: #aaa;
}
</style>
</head>
<body>
<canvas class="viz"></canvas>
<div class="title-card-container">
<canvas></canvas>
<div class="instructions">
<div>TURN YOUR SOUND ON</div>
<button>READY</button>
</div>
<!-- <div class="ios-instructions">
<h2>Unfortunately, I've had some issues getting this running on iOS. Please
take a look in a desktop browser. Preferably Chrome. 😬 <br><br> In the
meantime, here's a video (remember to turn on your sound!):</h2>
<video controls src="video/audiofabric.mov" type="video/quicktime" class="media-document iPhone video"></video>
</div> -->
</div>
<div class="controls-container">
<div class="controls-header">
<a href="https://github.com/rolyatmax/audiofabric" class="github-link">
<svg width="22px" height="22px" viewBox="0 0 30 30" version="1.1" xmlns="http://www.w3.org/2000/svg"><path d="M15,0.0576923077 C6.72580645,0.0576923077 0.00806451613,6.91483516 0.00806451613,15.3791209 C0.00806451613,22.1456044 4.30645161,27.8901099 10.2580645,29.9175824 C11.0080645,30.0576923 11.25,29.5879121 11.25,29.1840659 L11.25,26.3241758 C7.08064516,27.2554945 6.20967742,24.5192308 6.20967742,24.5192308 C5.53225806,22.7472527 4.5483871,22.2774725 4.5483871,22.2774725 C3.18548387,21.3296703 4.65322581,21.3461538 4.65322581,21.3461538 C6.16129032,21.4532967 6.9516129,22.9285714 6.9516129,22.9285714 C8.29032258,25.2692308 10.4596774,24.5934066 11.3145161,24.1978022 C11.4516129,23.2087912 11.8387097,22.532967 12.266129,22.1456044 C8.93548387,21.7582418 5.43548387,20.4478022 5.43548387,14.5714286 C5.43548387,12.8983516 6.02419355,11.5302198 6.98387097,10.4587912 C6.83064516,10.0714286 6.31451613,8.51373626 7.12903226,6.40384615 C7.12903226,6.40384615 8.38709677,5.99175824 11.25,7.97802198 C12.4435484,7.64010989 13.7258065,7.46703297 15,7.45879121 C16.2741935,7.46703297 17.5564516,7.63186813 18.7580645,7.97802198 C21.6209677,6 22.8790323,6.40384615 22.8790323,6.40384615 C23.6935484,8.51373626 23.1854839,10.0714286 23.0241935,10.4587912 C23.983871,11.5302198 24.5645161,12.8983516 24.5645161,14.5714286 C24.5645161,20.456044 21.0564516,21.75 17.7177419,22.1291209 C18.2580645,22.6071429 18.75,23.5384615 18.75,24.9642857 L18.75,29.1675824 C18.75,29.5714286 18.9919355,30.0494505 19.75,29.9010989 C25.7016129,27.8736264 29.9919355,22.1291209 29.9919355,15.3626374 C29.9919355,6.91483516 23.2741935,0.0576923077 15,0.0576923077 L15,0.0576923077 Z">
</path></svg>
</a>
<div class="title"></div>
<div class="artist"></div>
<div class="elapsed-time"></div>
</div>
<div class="seeker">
<div class="progress"></div>
</div>
<ul class="track-selector"></ul>
<div class="hint">DRAG AND SCROLL TO PAN AND ZOOM</div>
</div>
<script src="bundle.js"></script>
<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','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-36884625-1', 'auto');
ga('send', 'pageview');
</script>
</body>
</html>