/
index.html
102 lines (89 loc) · 4.07 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Magical Visualizer</title>
<link REL="StyleSheet" TYPE="text/css" HREF="css/main.css">
<link REL="StyleSheet" TYPE="text/css" HREF="css/controls.css">
<link REL="StyleSheet" TYPE="text/css" HREF="css/checkbox.css">
<link rel="stylesheet" href="css/audioplayer.css" />
<script src="js/canvasStuff.js"></script>
<script src="js/jquery.js"></script>
<script src="js/audioplayer.js"></script>
<script> $(document.body).ready(function() {
$( 'audio' ).audioPlayer();
var audio = document.querySelector("audio");
audio.volume = 0.2;
});
</script>
</head>
<body>
<canvas id="canvas" width="1200" height="775"></canvas>
<section id="controls">
<div class='wrap'>
<section id= "title">
<h1 id= "magical">Magical</h1>
<h1 id= "visual">Visualizer</h1>
</section>
<!-- Audio Player Author: Osvaldas Valutis-->
<!-- http://tympanus.net/codrops/2012/12/04/responsive-touch-friendly-audio-player/-->
<audio src="media/Star Prism.mp3" autostart="true" allow="autoplay" type='audio/mpeg'></audio>
</div>
<br>
<div class='wrap'>
<section class='inner_wrap'>
<section class= "songs">
<h4>Songs: </h4>
<section class= "options" id="songList">
<ul class= "playing" >
<li id= "Star_Prism" class= "selected">Star Prism</li>
<li id= "Bloomin_Lights" >Bloomin' Lights</li>
<li id= "My_Little_Hero" >My Little Hero</li>
</ul>
</section>
</section>
<section class="modes">
<h4>Mode: </h4>
<section class= "options" id="mode">
<ul>
<li id= "frequency" class= "selected">Frequency</li>
<li id= "wave">Wave</li>
</ul>
</section>
</section>
</section>
<section class='inner_wrap'>
<section class="effects">
<h4>Effects: </h4><br/>
<section class='labels'>
<label for="slider1">Circle Radius: </label>
<label for="slider2">Grey Scale: </label>
<label for="slider3">Delay/Reverb: </label>
</section>
<section class='sliders'>
<input class= "slider" id="slider1" type ="range" min ="190" max="300" step ="10" value ="200"/>
<input class= "slider" id="slider2" type ="range" min ="0.0" max="1.0" step =".05" value ="0.0"/>
<input class= "slider" id="slider3" type ="range" min ="0.0" max="1.0" step =".1" value ="0.0"/>
</section>
</section>
<section class="check_boxes" >
<label class="container" for="invertCheckbox">Invert
<input type="checkbox" id="invertCheckbox">
<span class="checkmark"></span>
</label>
<label class="container" for="noiseCheckbox">Noise
<input type="checkbox" id="noiseCheckbox">
<span class="checkmark"></span>
</label>
<label class="container" for="tintCheckbox">Tint
<input type="checkbox" id="tintCheckbox">
<span class="checkmark"></span>
</label>
</section>
</section>
</div>
<img src="media/background.jpg" id="background" width="1116" height="1116">
<footer><h5 id= "copyright"> © Copyright 2016 Megan Smith </h5></footer>
</section>
</body>
</html>