-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
82 lines (80 loc) · 3.09 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>visualizing artwork</title>
<style>
body{
font-family: Arial,Verdana,Sans-serif;
}
.album-info {
position: absolute;
text-align:center;
bottom: 20px;
right: 20px;
}
.album-info img {opacity: 0.9;}
canvas {margin-left: 150px;}
span {
font-size: 2em;
cursor: pointer;
}
#loading {padding: 100px;}
#loading p {font-size: 1.8em;}
#play, #pause {position: fixed;}
</style>
<link rel="stylesheet" href="css/fontello.css">
<link rel="stylesheet" href="css/animation.css">
</head>
<body>
<a href="https://github.com/fakelbst/artwork-visualizing"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/38ef81f8aca64bb9a64448d0d70f1308ef5341ab/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6461726b626c75655f3132313632312e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png"></a>
<div id="loading">
<span class="icon-loading animate-spin"></span>
<p>Loding song, may take a while, please wait...</p>
</div>
<span id="play" class="icon-play" style="display: none;"></span>
<span id="pause" class="icon-pause" style="display: none;"></span>
<canvas></canvas>
<div class="album-info">
<h3>Song & artwork by</h3>
<a href="http://www.industriesoftheblindmusic.com/">
<img src="artwork.jpg" width="200" height="200" />
<p>Industries of the Blind</p>
<i>Chapter 1: Had We Known Better</i>
</a>
</div>
<script src="bufferLoader.js"></script>
<script src="visualizer.js"></script>
<script>
context = new (window.AudioContext || window.webkitAudioContext)();
function loadSounds(obj, soundMap) {
var names = [];
var paths = [];
for (var name in soundMap) {
var path = soundMap[name];
names.push(name);
paths.push(path);
}
bufferLoader = new BufferLoader(context, paths, function(bufferList) {
for (var i = 0; i < bufferList.length; i++) {
var buffer = bufferList[i];
var name = names[i];
obj[name] = buffer;
}
});
bufferLoader.load();
}
var app = new artworkVisualizer();
document.getElementById('play').addEventListener('click', function(){
app.togglePlayback();
this.style.display = 'none';
document.getElementById('pause').style.display = 'block';
});
document.getElementById('pause').addEventListener('click', function(){
app.togglePlayback();
this.style.display = 'none';
document.getElementById('play').style.display = 'block';
});
</script>
</body>
</html>