loading...
Cover image for Simple Beat Maker with Vanilla JavaScript

Simple Beat Maker with Vanilla JavaScript

akdeberg profile image 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-

Alt Text

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

Posted on by:

akdeberg profile

Anik Khan

@akdeberg

Convincing computers to do human tasks

Discussion

markdown guide
 

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-

/*TEST*/
.break {
    flex-basis: 100%;
    height: 0;
}

Then whenever you want a line break insert this-

<div class="break"></div> <!--For new line break -->

Say for example you want a line after the L then it would be like-

 <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 class="break"></div> <!--For new line break -->

        <div data-key="90" class="key">
            <kbd>Z</kbd>
            <span>SY</span>
        </div>
        <div data-key="90" class="key">
            <kbd>X</kbd>
            <span>SY</span>
        </div>
        <!-- Just like this continue........ -->

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.

 
 

hmmm.... I am not sure how did you approach it. Here's how you add a new sound-

  <div data-key="90" class="key">
            <kbd>Z</kbd>
            <span>New Sound Name</span>
        </div>

Then add the corresponding audio sound-

<audio data-key="90" src="your sound source here"></audio>

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.

  • When did me or Wes Bos copyright his project?
  • A lot of his students put their own version of code which is greatly inspired by his tuts but not an exact copy. Check the Wes Bos gitHub link bro.....He too inspires people to build stuff based off of his work; this is the best way of learning.
  • Minimal changes???!! Bro do you want me to reinvent the wheel? I believe you never use stack overflow or something.
 

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?

  • Who said here that every line of code is unique and never been written on earth?

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 πŸ˜€