Skip to content

Commit 1ebf5f0

Browse files
author
OFFICEnpurcell
committed
add all new files
1 parent afd4bcf commit 1ebf5f0

20 files changed

+186
-2
lines changed

‎README.md

+8-2
Original file line numberDiff line numberDiff line change
@@ -1,2 +1,8 @@
1-
# halloween-sounds
2-
A Halloween soundboard
1+
# Halloween Soundboard
2+
A fun Halloween soundboard to use when you want some spooky sound effects!
3+
4+
## Usage
5+
Just click any of the keyboard keys for the letter that matches the sound you'd like to hear. You can click them as many times as you like.
6+
7+
## Technology
8+
I built this using good ol' vanilla JavaScript. Using eventListeners for the keydown and also the transition events. Oh and some nice css to measure.

‎img/redwall.jpg

227 KB
Loading

‎index.html

+125
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<html lang="en">
2+
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<link rel="stylesheet" href="styles.css">
7+
<!-- <script src="index.js"></script> -->
8+
<title>Halloween Soundboard</title>
9+
</head>
10+
11+
<body>
12+
<h1>Halloween Soundboard</h1>
13+
<div class='keys'>
14+
<div data-key='65' class='key'>
15+
<kbd>A</kbd>
16+
<span class="sound">heartbeat</span>
17+
</div>
18+
<div data-key='67' class='key'>
19+
<kbd>C</kbd>
20+
<span class="sound">chains</span>
21+
</div>
22+
<div data-key='80' class='key'>
23+
<kbd>P</kbd>
24+
<span class="sound">splat</span>
25+
</div>
26+
<div data-key='68' class='key'>
27+
<kbd>D</kbd>
28+
<span class="sound">witch cackle</span>
29+
</div>
30+
<div data-key='69' class='key'>
31+
<kbd>E</kbd>
32+
<span class="sound">evil man</span>
33+
</div>
34+
<div data-key='83' class='key'>
35+
<kbd>S</kbd>
36+
<span class="sound">swamp</span>
37+
</div>
38+
<div data-key='72' class='key'>
39+
<kbd>H</kbd>
40+
<span class="sound">church bells</span>
41+
</div>
42+
<div data-key='71' class='key'>
43+
<kbd>G</kbd>
44+
<span class="sound">howl</span>
45+
</div>
46+
<div data-key='86' class='key'>
47+
<kbd>V</kbd>
48+
<span class="sound">howl 2</span>
49+
</div>
50+
<div data-key='76' class='key'>
51+
<kbd>L</kbd>
52+
<span class="sound">lab</span>
53+
</div>
54+
<div data-key='82' class='key'>
55+
<kbd>R</kbd>
56+
<span class="sound">lid creak</span>
57+
</div>
58+
<div data-key='77' class='key'>
59+
<kbd>M</kbd>
60+
<span class="sound">scream</span>
61+
</div>
62+
<div data-key='70' class='key'>
63+
<kbd>F</kbd>
64+
<span class="sound">frankenstein</span>
65+
</div>
66+
<div data-key='79' class='key'>
67+
<kbd>O</kbd>
68+
<span class="sound">owl</span>
69+
</div>
70+
<div data-key='66' class='key'>
71+
<kbd>B</kbd>
72+
<span class="sound">bird</span>
73+
</div>
74+
<div data-key='87' class='key'>
75+
<kbd>W</kbd>
76+
<span class="sound">crows</span>
77+
</div>
78+
</div>
79+
80+
<audio data-key="83" src="sounds/Swamp_Background_web.wav"></audio>
81+
<audio data-key="80" src="sounds/SPLAT2.wav"></audio>
82+
<audio data-key="67" src="sounds/Chain01.wav"></audio>
83+
<audio data-key="65" src="sounds/heartbeat.wav"></audio>
84+
<audio data-key="68" src="sounds/wlaugh.wav"></audio>
85+
<audio data-key="72" src="sounds/hhgsfog.wav"></audio>
86+
<audio data-key="71" src="sounds/howl1.wav"></audio>
87+
<audio data-key="86" src="sounds/wolf2.wav"></audio>
88+
<audio data-key="69" src="sounds/wickedmalelaugh1.wav"></audio>
89+
<audio data-key="76" src="sounds/labclip.wav"></audio>
90+
<audio data-key="82" src="sounds/lidcreak.wav"></audio>
91+
<audio data-key="77" src="sounds/nmh_scream1.wav"></audio>
92+
<audio data-key="70" src="sounds/Moaning_Chains.wav"></audio>
93+
<audio data-key="87" src="sounds/sf_crow_01.mp3"></audio>
94+
<audio data-key="66" src="sounds/SF-bird7.mp3"></audio>
95+
<audio data-key="79" src="sounds/SF-owl.mp3"></audio>
96+
<script>
97+
// Used http://keycode.info/ for keyCodes
98+
99+
function playSound(e) {
100+
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`);
101+
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`);
102+
103+
if (!audio) return;
104+
105+
audio.currentTime = 0; // rewinds audio to the start
106+
audio.play();
107+
108+
key.classList.add('playing');
109+
}
110+
111+
function removeTransition(e) {
112+
if (e.propertyName !== 'transform') return; // skip if not a transform
113+
114+
this.classList.remove('playing');
115+
}
116+
117+
118+
const myKeys = document.querySelectorAll('.key');
119+
myKeys.forEach(item => item.addEventListener('transitionend', removeTransition));
120+
121+
window.addEventListener('keydown', playSound);
122+
</script>
123+
</body>
124+
125+
</html>

‎sounds/Chain01.wav

718 KB
Binary file not shown.

‎sounds/Moaning_Chains.wav

852 KB
Binary file not shown.

‎sounds/SF-bird7.mp3

13.4 KB
Binary file not shown.

‎sounds/SF-owl.mp3

17.6 KB
Binary file not shown.

‎sounds/SPLAT2.wav

30.5 KB
Binary file not shown.

‎sounds/Swamp_Background_web.wav

529 KB
Binary file not shown.

‎sounds/heartbeat.wav

167 KB
Binary file not shown.

‎sounds/hhgsfog.wav

1.67 MB
Binary file not shown.

‎sounds/howl1.wav

419 KB
Binary file not shown.

‎sounds/labclip.wav

1.36 MB
Binary file not shown.

‎sounds/lidcreak.wav

208 KB
Binary file not shown.

‎sounds/nmh_scream1.wav

376 KB
Binary file not shown.

‎sounds/sf_crow_01.mp3

27.4 KB
Binary file not shown.

‎sounds/wickedmalelaugh1.wav

309 KB
Binary file not shown.

‎sounds/wlaugh.wav

264 KB
Binary file not shown.

‎sounds/wolf2.wav

463 KB
Binary file not shown.

‎styles.css

+53
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,53 @@
1+
body {
2+
background-image: url("img/redwall.jpg");
3+
background-color: #000;
4+
text-align: center;
5+
}
6+
7+
h1 {
8+
color: #ffc600;
9+
font-size: 50px;
10+
text-shadow: 5px 5px 5px black;
11+
font-size: 3.75em;
12+
text-transform: uppercase;
13+
letter-spacing: 4px;
14+
padding-top: 40px;
15+
}
16+
17+
.keys {
18+
display: flex;
19+
flex-wrap: wrap;
20+
flex-direction: row;
21+
}
22+
23+
.key {
24+
border: 4px solid black;
25+
border-radius: 5px;
26+
margin: 1rem;
27+
font-size: 1.5rem;
28+
padding: 1rem .5rem;
29+
transition: all 0.1s;
30+
flex: 1 1 115px;
31+
text-align: center;
32+
color: white;
33+
background: rgba(0, 0, 0, 0.4);
34+
text-shadow: 0 0 5px black;
35+
}
36+
37+
.playing {
38+
transform: scale(1.1);
39+
border-color: #ffc600;
40+
box-shadow: #ffc600;
41+
}
42+
43+
kbd {
44+
display: block;
45+
font-size: 40px;
46+
}
47+
48+
.sound {
49+
font-size: 0.75em;
50+
text-transform: uppercase;
51+
letter-spacing: 1px;
52+
color: #ffc600;
53+
}

0 commit comments

Comments
 (0)