-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
133 lines (131 loc) · 4.99 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="./style.css" />
<title>Beatmaker</title>
</head>
<body>
<div class="sequencer">
<div class="kick-track">
<div class="controls">
<h1>Kick</h1>
<button data-track="0" class="mute kick-volume">
<i class="fas fa-volume-mute"></i>
</button>
<select name="kick-select" id="kick-select">
<option value="./allSounds/kick-classic.wav">Classic Kick</option>
<option value="./allSounds/kick-808.wav">808 Kick</option>
<option value="./allSounds/kick-heavy.wav">Kick Heavy</option>
<option value="./allSounds/kick-softy.wav">Kick Softy</option>
</select>
</div>
<div class="kick">
<div class="pad kick-pad b0"></div>
<div class="pad kick-pad b1"></div>
<div class="pad kick-pad b2"></div>
<div class="pad kick-pad b3"></div>
<div class="pad kick-pad b4"></div>
<div class="pad kick-pad b5"></div>
<div class="pad kick-pad b6"></div>
<div class="pad kick-pad b7"></div>
</div>
</div>
<div class="snare-track">
<div class="controls">
<h1>Snare</h1>
<button data-track="1" class="mute snare-volume">
<i class="fas fa-volume-mute"></i>
</button>
<select name="snare-select" id="snare-select">
<option value="./allSounds/snare-acoustic01.wav">Classic Snare</option>
<option value="./allSounds/snare-808.wav">808 Snare</option>
<option value="./allSounds/snare-vinyl02.wav">Snare Vinyl</option>
</select>
</div>
<div class="snare">
<div class="pad snare-pad b0"></div>
<div class="pad snare-pad b1"></div>
<div class="pad snare-pad b2"></div>
<div class="pad snare-pad b3"></div>
<div class="pad snare-pad b4"></div>
<div class="pad snare-pad b5"></div>
<div class="pad snare-pad b6"></div>
<div class="pad snare-pad b7"></div>
</div>
</div>
<div class="hihat-track">
<div class="controls">
<h1>Hihat</h1>
<button data-track="2" class="mute hihat-volume">
<i class="fas fa-volume-mute"></i>
</button>
<select name="hihat-select" id="hihat-select">
<option value="./allSounds/hihat-acoustic01.wav"
>Hihat Acoustic</option
>
<option value="./allSounds/hihat-808.wav">808 Hihat</option>
</select>
</div>
<div class="hihat">
<div class="pad hihat-pad b0"></div>
<div class="pad hihat-pad b1"></div>
<div class="pad hihat-pad b2"></div>
<div class="pad hihat-pad b3"></div>
<div class="pad hihat-pad b4"></div>
<div class="pad hihat-pad b5"></div>
<div class="pad hihat-pad b6"></div>
<div class="pad hihat-pad b7"></div>
</div>
</div>
<div class="clap-track">
<div class="controls">
<h1>Clap</h1>
<button data-track="2" class="mute clap-volume">
<i class="fas fa-volume-mute"></i>
</button>
<select name="clap-select" id="clap-select">
<option value="./allSounds/clap-808.wav"
>clap 808</option
>
<option value="./allSounds/clap-analog.wav">clap analog</option>
<option value="./allSounds/clap-crushed.wav">clap crushed</option>
<option value="./allSounds/clap-fat.wav">clap fat</option>
</select>
</div>
<div class="clap">
<div class="pad clap-pad b0"></div>
<div class="pad clap-pad b1"></div>
<div class="pad clap-pad b2"></div>
<div class="pad clap-pad b3"></div>
<div class="pad clap-pad b4"></div>
<div class="pad clap-pad b5"></div>
<div class="pad clap-pad b6"></div>
<div class="pad clap-pad b7"></div>
</div>
</div>
<button class="play">Play</button>
<div class="tempo">
<input
type="range"
class="tempo-slider"
max="300"
min="20"
value="150"
/>
<p>Tempo: <span class="tempo-nr">150</span></p>
</div>
</div>
<audio class="kick-sound" src="./allSounds/kick-classic.wav"></audio>
<audio class="snare-sound" src="./allSounds/snare-acoustic01.wav"></audio>
<audio class="hihat-sound" src="./allSounds/hihat-acoustic01.wav"></audio>
<audio class="clap-sound" src="./allSounds/clap-analog.wav"></audio>
<script
src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"
integrity="sha256-MAgcygDRahs+F/Nk5Vz387whB4kSK9NXlDN3w58LLq0="
crossorigin="anonymous"
></script>
<script src="./app.js"></script>
</body>
</html>