HTML

Creating sections and divs

The first part is building out the blocks that will act as the components of the drum kit. So each "block" or "div" in this case will be a piece of the kit (be it a cymbal, or snare drum, etc). Following the photo as a reference to how the kit is set up, I have sectioned the layout in two rows as you can see below:

<!-- Top Row -->
    <section class="row top keys">
        <!-- Crash Cymbal -->
        <div class="key"></div>

        <!-- Small Tom -->
        <div class="key"></div>

        <!-- Bass Drum -->
        <div class="key"></div>

        <!-- Medium Tom -->
        <div class="key"></div>

        <!-- Ride Cymbal -->
        <div class="key"></div>
    </section>
    
    <section class="row bot keys">
        <!-- Hi Hat -->
        <div class="key"></div>
        
        <!-- Snare Drum -->
        <div class="key"></div>
        
        <!-- Floor Tom -->
        <div class="key"></div>
    </section>

Labels

For each of the divs which represent a component of the kit, I need to add labels to signify to the user which key they can press to interact with that. An example illustration of what I'm thinking can be seen below:

Each component of the drum kit is mapped to a key

So in this case, I'll have a consistent label element <kbd> that contains the letter association inside of the corresponding div like so:

<!-- Top Row -->
    <section class="row top keys">
        <!-- Crash Cymbal -->
        <div class="key">
            <kbd>R</kbd>
        </div>

        <!-- Small Tom -->
        <div class="key">
            <kbd>T</kbd>
        </div>

        <!-- Bass Drum -->
        <div class="key">
            <kbd>Y</kbd>
        </div>

        <!-- Medium Tom -->
        <div class="key">
            <kbd>U</kbd>
        </div>

        <!-- Ride Cymbal -->
        <div class="key">
            <kbd>I</kbd>
        </div>
    </section>
    
    <section class="row bot keys">
        <!-- Hi Hat -->
        <div class="key">
            <kbd>D</kbd>
        </div>
        
        <!-- Snare Drum -->
        <div class="key">
            <kbd>F</kbd>
        </div>
        
        <!-- Floor Tom -->
        <div class="key">
            <kbd>J</kbd>
        </div>
    </section>

What is <kbd> ?

To label the div elements, I have chosen to use <kbd> instead of a <span> or some other structure. KBD is the HTML Keyboard Input Element identifier to signify text that are semantic indicators for user input.

For example, here's an example of it being used to convey the Copy command which highlights the required key input from the user. It's important to note that anything inside the <kbd> tag will be displayed in the browser's default monospace font to separate it from the other text.

<p>Press <kbd>Ctrl</kbd> + <kbd>C</kbd> to copy text (Windows).</p>

<p>Press <kbd>Cmd</kbd> + <kbd>C</kbd> to copy text (Mac OS).</p>

HTML kbd tag

Data Attribute (data-key)

What is data-key?

So data-key isn't really a real attribute that is officially a part of HTML. Rather, it's a custom attribute that is used to store private data when there isn't really a better alternative or appropriate element.

What are "data-url" and "data-key" attributes of <a> tag?Stack Overflow

Essentially it's a attribute that is used HTML to standardise linking of data attributes between elements. For this example, I'll be using it like a class element so that the div for an instrument is linked to the <audio> tag to play the sound file.

This is so that when we hit the key, the corresponding audio file will play and we can alter the div element with the same data-key (animate it to move).

Keycode.info

In order to get the corresponding key codes, I'll be referring the website keycode.info which provides the correponding JavaScript event keycode for when you press a key on your keyboard. So here you can see an example when I press 'A', it gives me 65 - which means JavaScript will trigger any code that is related to the element with data key '65'.