-
-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
98 lines (97 loc) · 5.2 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Beatbox</title>
<link type="text/css" rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<div class="beatbox">
<div class="beat">
<div
id="65"
class="button aqua"
onclick='var audio = new Audio("Piano Chord 208.mp3");audio.currentTime = 0;audio.play();document.getElementById("65").style.backgroundColor = "aqua";document.getElementById("65").style.boxShadow = "0px 0px 20px 0px aqua";setTimeout(function () {document.getElementById("65").style.backgroundColor = "transparent";document.getElementById("65").style.boxShadow = "none";}, 500);'
>
A
</div>
</div>
<div class="beat">
<div
id="83"
class="button aqua"
onclick='var audio=new Audio("Piano Chord 209.mp3");audio.currentTime=0,audio.play(),document.getElementById("83").style.backgroundColor="aqua",document.getElementById("83").style.boxShadow="0px 0px 20px 0px aqua",setTimeout(function(){document.getElementById("83").style.backgroundColor="transparent",document.getElementById("83").style.boxShadow="none"},500);'
>
S
</div>
</div>
<div class="beat">
<div
id="68"
class="button aqua"
onclick='var audio=new Audio("Piano Chord 331.mp3");audio.currentTime=0,audio.play(),document.getElementById("68").style.backgroundColor="aqua",document.getElementById("68").style.boxShadow="0px 0px 20px 0px aqua",setTimeout(function(){document.getElementById("68").style.backgroundColor="transparent",document.getElementById("68").style.boxShadow="none"},500);'
>
D
</div>
</div>
<div class="beat">
<div
id="70"
class="button purple"
onclick='var audio=new Audio("Drum Sticks Hit 3.mp3");audio.currentTime=0,audio.play(),document.getElementById("70").style.backgroundColor="#ff00ff",document.getElementById("70").style.boxShadow="0px 0px 20px 0px #ff00ff",setTimeout(function(){document.getElementById("70").style.backgroundColor="transparent",document.getElementById("70").style.boxShadow="none"},500);'
>
F
</div>
</div>
<div class="beat">
<div
id="71"
class="button purple"
onclick='var audio=new Audio("Drum Snare Roll.mp3");audio.currentTime=0,audio.play(),document.getElementById("71").style.backgroundColor="#ff00ff",document.getElementById("71").style.boxShadow="0px 0px 20px 0px #ff00ff",setTimeout(function(){document.getElementById("71").style.backgroundColor="transparent",document.getElementById("71").style.boxShadow="none"},500);'
>
G
</div>
</div>
<div class="beat">
<div
id="72"
class="button purple"
onclick='var audio=new Audio("PREL Musical 57.mp3");audio.currentTime=0,audio.play(),document.getElementById("72").style.backgroundColor="#ff00ff",document.getElementById("72").style.boxShadow="0px 0px 20px 0px #ff00ff",setTimeout(function(){document.getElementById("72").style.backgroundColor="transparent",document.getElementById("72").style.boxShadow="none"},500);'
>
H
</div>
</div>
<div class="beat">
<div
id="74"
class="button purple"
onclick='var audio=new Audio("Cymbal Suspended 2.mp3");audio.currentTime=0,audio.play(),document.getElementById("74").style.backgroundColor="#ff00ff",document.getElementById("74").style.boxShadow="0px 0px 20px 0px #ff00ff",setTimeout(function(){document.getElementById("74").style.backgroundColor="transparent",document.getElementById("74").style.boxShadow="none"},500);'
>
J
</div>
</div>
<div class="beat">
<div
id="75"
class="button white"
onclick='var audio=new Audio("Musical Compos 33.mp3");audio.currentTime=0,audio.play(),document.getElementById("75").style.backgroundColor="white",document.getElementById("75").style.boxShadow="0px 0px 20px 0px white",setTimeout(function(){document.getElementById("75").style.backgroundColor="transparent",document.getElementById("75").style.boxShadow="none"},500);'
>
K
</div>
</div>
<div class="beat">
<div
id="76"
class="button white"
onclick='var audio=new Audio("Musical Orches 4.mp3");audio.currentTime=0,audio.play(),document.getElementById("76").style.backgroundColor="white",document.getElementById("76").style.boxShadow="0px 0px 20px 0px white",setTimeout(function(){document.getElementById("76").style.backgroundColor="transparent",document.getElementById("76").style.boxShadow="none"},500);'
>
L
</div>
</div>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>