Simple Beat Maker with Vanilla JavaScript
Anik Khan
ใป3 min read
What if I tell you can create something to make your own beats & with vanilla JavaScript!!๐ How cool that would be?๐
I have created something like this with HTML, CSS & vanilla Js. The process was fairly simple. It was basic DOM manipulation. I have downloaded some sample sounds and programmed it to play when a specific key is pressed.
Lets Take a Look
This is how it looks like-
I will spare you from the details rather will let the code talk to you.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100;300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="./style.css">
<title>Be Your MC</title>
</head>
<body>
<!-- Structure for keys -->
<div class="keys">
<div data-key="65" class="key">
<kbd>A</kbd>
<span>808</span>
</div>
<div data-key="83" class="key">
<kbd>S</kbd>
<span>BS</span>
</div>
<div data-key="68" class="key">
<kbd>D</kbd>
<span>Claps</span>
</div>
<div data-key="70" class="key">
<kbd>F</kbd>
<span>FX</span>
</div>
<div data-key="71" class="key">
<kbd>G</kbd>
<span>HiHat</span>
</div>
<div data-key="72" class="key">
<kbd>H</kbd>
<span>Kick</span>
</div>
<div data-key="74" class="key">
<kbd>J</kbd>
<span>Percu</span>
</div>
<div data-key="75" class="key">
<kbd>K</kbd>
<span>Snare</span>
</div>
<div data-key="76" class="key">
<kbd>L</kbd>
<span>SY</span>
</div>
</div>
<!-- Here are the audio files -->
<audio data-key="65" src="./sounds/808 B 3.wav"></audio>
<audio data-key="83" src="./sounds/BS F.wav"></audio>
<audio data-key="68" src="./sounds/Claps 1.wav"></audio>
<audio data-key="70" src="./sounds/FX Down 2.wav"></audio>
<audio data-key="71" src="./sounds/HiHat 6.wav"></audio>
<audio data-key="72" src="./sounds/Kick 9.wav"></audio>
<audio data-key="74" src="./sounds/Percussion 2.wav"></audio>
<audio data-key="75" src="./sounds/Snare 7.wav"></audio>
<audio data-key="76" src="./sounds/SY A 4.wav"></audio>
<script src="./script.js"></script>
</body>
</html>
CSS
/* Basic setup */
* {
margin: 0 auto;
padding: 0;
box-sizing: border-box;
}
html {
max-width: 1140px;
font-family: 'Roboto', sans-serif;
font-size: 15px;
/* setting up the background img */
background: url(./img/red.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
.keys {
/*Keep things centered*/
min-height: 100vh;
display: flex;
justify-content: space-between;
align-items: center;
}
.key {
flex: 1;
border: 10px solid #E6E6FA;
border-radius: 20px;
margin-right: 25px;
background-color: #B0C4DE;
/*make some space & nice border*/
padding: 15px;
/*make the inside text center*/
text-align: center;
color: #DC143C;
/*dependency*/
box-shadow: 0px 0px 0px 0px none;
transition: box-shadow 0.06s linear;
}
div kbd {
display: block;
font-size: 200%;
margin-bottom: 10px;
}
div span {
color: black;
font-weight: 300;
}
.playing {
border: 10px solid #DC143C;
box-shadow: 0px 0px 0px 2px #FFD700;
margin: 0.5em;
}
JavaScript
const playSound = function (e) {
//target the div element according to the keycode
const key = document.querySelector(`.key[data-key="${e.keyCode}"]`)
//check if the key is null
//we use truthy falsy nature of js
if (!key) return
//now select the audio
const audio = document.querySelector(`audio[data-key="${e.keyCode}"]`)
//set the current time to zero to rewind everytime a key is down
audio.currentTime = 0
//play the audio
audio.play()
//add the playing class for effect
key.classList.add('playing')
}
window.addEventListener('keydown', playSound)
//remove the classlist from every .key class
const removeFunc = function (e) {
const keys = [...document.querySelectorAll('.key')]
keys.forEach((key) => {
key.classList.remove('playing')
})
}
//when should we remove? just when the transitionend happend
document.addEventListener('transitionend', removeFunc)
Live URL
Here's the live URL: http://hippy-hop.surge.sh/
Plz play with it for a while to be a pro DJ. After practice makes a man perfect DJ๐
Conclusion & Links
If you want to know any part of the code or anything related never hesitate to leave a comment. I will be happy to co-operate.๐
GitHub Link: https://github.com/AKdeBerg/hipHopper
It is greatly inspired from Wes Bos JavaScript 30 days. Highly recommend it ๐
Link: https://github.com/wesbos/JavaScript30
Photos from unsplash
Discussion
This looks pretty neat! This does appear to be a project from Wes Bosโ Javascript30, and I think it would be a good idea to add some acknowledgement and a link to his course.
Sure thing ๐ It was he who inspired me to build this thing. Edited
Hi, I'm a totally newbie here and I have a question.
Letยดs say I want to add a new line with new sounds, using keys z,x,c and so on.
I tried to fix html with break and paragraph but it is not working.
Is there another way? I'm kinda lost and burned out trying to figure it out, and I'm pretty sure it is pretty easy :(
@paukaradagian Hey! You have to fix it from CSS. As I used flexbox for positioning the element, I have to make it with flexbox.
Add this code to the CSS file-
Then whenever you want a line break insert this-
Say for example you want a line after the L then it would be like-
Box will adjust until you add up to 9 divs. Further question? Plz knock me on the chat or LinkedIn (can be found from my profile); love to collaborate.
Thank you so, so so much!!!
hmmm.... I am not sure how did you approach it. Here's how you add a new sound-
Then add the corresponding audio sound-
Here the data-key has to be the same for both parts. It is 90 here.
Is that what you asked for? Let me know
No, I want a new line under the first set of keys, under keys A to L, down under I want to ad z to M, for example.
But I keep adding keys and they are on the same line, not under.
Sorry my english.
Aah got it. Let me work on this amazing addition after my dinner, okay? I will be in touch shortly๐It would be a nice thing to work on for me as well
i'm not sure how you can claim this as your own project... this is Wes Bos' drum kit with minimal changes.
In other words, not your code.
Hold on a second!! I think we need to clear things up here a little bit.
whatever you need to tell yourself, guy.
this isn't your code. don't present it as if it were.
๐๐๐คฃ๐คฃ Calm down. And teach your students not to reinvent the wheel rather create something that interests them based off of other works and share it. That's the joy of learning.
Don't beat yourself up to be unique; try to be collaborative.
And give credit where it's due. That's one of the first things we teach our students. Don't steal code, especially from a public source, because as you'll see on the thread, everyone knows this isn't your code.
Try harder to make something unique next time. Don't just use someone else's code, make minor changes, and claim it's your own.
That's dishonest.
Try read code harder next time...... It's my code..... I wrote it from scratch. I just learned from Wes Bos beforehand....Bye.. I have already wasted a lot of time here on you.
except it's not your code. it's Wes Bos' code.
You didn't write it from scratch - you copied whatever was in his tutorial.
Just be honest. That's all. And you won't have to worry about people calling you out for plagiarism.
i teach JavaScript and web development. If one of my students tried to do what you just did, they'd get an academic offense and a fail.
Oops!! You are really something ๐ Lucky that I didn't get teachers like you. Talk to the point man.
Why you accusing me of things that I never claimed?
from your article:
"I have created something like this with HTML, CSS & vanilla Js. The process was fairly simple. It was basic DOM manipulation. I have downloaded some sample sounds and programmed it to play when a specific key is pressed."
You didn't create it. That's a lie.
We call that plagiarism.
What should I write then?
Wes bos created .......................?
I created my hip hop mixer!!!!!!! Nobody created it for me... How hard is this for you to understand? lol!!
Is my work inspired of Wes Bos? Yes it is!! And I attributed him....
Yes. You should write that Wes Bos created it, because that's the truth.
You made minimal changes to someone else's file and called it your own.
That's what happened. Claiming it's your creation is just a flat-out lie.
If you were one of my students, you'd understand that and not make this kind of massive mistake in such a public forum.
I only have one answer for you man- From now on, I promised myself am gonna post every one of my project that I completed from his tutorial here, and share my experiences & learnings with everyone while attributing Wes Bos for inspiring me. I will also start by writing - I've created this...
You can hate; none of my business. I am just gonna produce ๐
lol so you haven't learned a thing then.
btw - it's not hate. i'm actually trying to point out that by claiming to create things you haven't actually created, you destroy your own credibility as a developer.
but whatever... you do you...
this isn't greatly inspired by Wes Bos' drum kit - it IS Wes Bos' drum kit project.
Add attribution or retract.
Seriously!!?!!! Bro you are funny guy ๐ It is a hip hop beat mixer; I watched his tutorial and created my own version of it. Where do you see drum?
Why don't you create yourself one and publish it; it'll help others. No matter how minimal changes you made! Try to come up with your own interest. That's the best way of learning.
Sure. but don't post someone else's code on a site like Dev and claim it's your creation.
Because it isn't.
I didn't post his code! Check the code bro!!
I saw his; I created my idea and I build one for myself. You got it?
That's a good project idea, another step could be to adapt it for smart phone
That's a nice idea. I totally agree, now this only works with keyboard; expanding it to in smartphone will be a nice thing to do.๐ Thanks for the great suggestion ..
Nice ๐.. In addition to smartphone support, perhaps a sequencer as well?
How cool that would be๐! But I just hit the deadline so couldn't add anymore feature but publish whatever I just created. For each project, I got a few hours to complete.
I had my mind both of those features but was short of time.
I learned it hard way from my previous experience to have a deadline and maintain it. It hard to do so, but it keeps me consistent.
I would ask others to fork it on GitHub and add features to it. It would be a nice shot๐
Keep those nice suggestions coming sot that others could get something to work on ๐