Building a basic drum sound trigger machine – Part 1.

In this tutorial we are going to learn some basic web development concepts while we build a simple drum sound trigger machine

just like this one                              

. img

Prerequisites for this tutorial:

  • A Macintosh or Windows computer with an internet connection.
  • Basic computer literacy.
  • Familiarity with general audio/music technology & terminology (synths,mixing consoles,DAW’s etc)
  • Either Chrome 21+  or  Safari 6+ Web browsers.
  • Sublime Text2 code editor (Downloaded & installed) –  Download here.                                       You can technically use any text editor including notepad (windows) or Text Edit (mac) but I will be using Sublime Text2 for these tutorials and hence you might want to use it as well.

Part 1. The interface

There are two technologies that we must first understand to build a basic web interface for our drum trigger module. One technology is called HTML and the other is CSS. These two can be combined to make circles and other interesting shapes appear in your web browser. We can then use these circles to trigger audio files when clicked . We will create a few circles with the intent of eventually having them trigger drum sounds when the user clicks on them.

We will start with HTML.

HTML stands for hyper text markup language. It is the original language
used to create static web documents. However, it is now used as one of the many layers in building web applications (including our lovely drum trigger machine). To get started with the HTML portion of our interface do these things:

  • Create a folder on your desktop called Drum module.
  • Open SublimeText2.
  • Push Command N. This will create a new empty document.
  • Go to the File menu of SublimeText2
  • Go to SAVE and then navigate to the Drum module folder.
  • SAVE the file as “drummodule.html” inside the Drum module folder.

You’ve just saved an empty html document.

The .html part of the file name is called an extension and is used to tell your computer what kind of document this is. If you’ve dealt with audio files before you should already be familiar with extensions like .aiff .wav and .mp3.

Look at the main window of SublimeText2 , the blank document you are editing is the one you just saved. At the very top of it write:

<!DOCTYPE html>
<meta charset=”UTF-8″>
<title></title>

Push Command S on your keyboard to SAVE.

Ok, why did we add that code ?

This code is necessary for the document to be read properly in web browsers. The above code is the minimum code necessary to have an acceptable working HTML document and this code is always needed. We will explain the whys and how’s in later tutorials. For now just realize it is a standard block of code that all HTML documents need. Now, in order to understand how to configure HTML to create our interface you must realize everything revolves around being able to manipulate HTML script tags (also called DOM elements) and turn them into colorful shapes.

Here are some examples of what script tags look like:
<p> </p>
<audio> </audio>
<div> </div>
<a><a/>
<img></img>

Kind of ugly aren’t they? Don’t worry they will become fun to play with as we go along.

The manipulation of these silly little tags (the ability to turn them into circles and other shapes) is done with the other technology I mentioned – CSS (CSS stands for Cascading Style Sheets). This is done mostly using the <div> tag as the rest of the other tags are used for their own custom functionality within HTML.

So the <div> tag is what we will be focused on here.

So just keep this in mind:

HTML <div> tags get turned into pretty shapes with CSS.

We are now going to turn an html <div> tag into a square….and then a circle…using CSS !

In drummodule.html  type: <div> My circle will soon appear here</div>

Screen shot 2012-12-21 at 12.02.27 AM

 

Then SAVE.

Now use your mouse to navigate to the Drum module folder on your desktop and open the drummodule.html page in your web browser (don’t close SublimeText2) and make sure it works. You should see the text My circle will soon appear here without the <div> tags.

 

NOTE You can launch your web browser from within SublimeText2 by Control-Clicking the window (Mac) or Right-clicking it (Windows).

Screen shot 2012-12-21 at 12.02.43 AM

 

In SublimeText2, On your keyboard push Command N. This will create a new document in SublimeText2.

Type the following code into it.

When you write a piece of code with { } the code inside those characters is called a block. We are using CSS so the code above is called a CSS code block or just CSS block for short. What you just did was write a code block that says any tags called div will be given the attributes in the block. If you notice we have color,width and height. Now push Command S and Save this document in the folder titled Drum module as drummodule.css.

Now, we are going to connect the CSS to the HTML. Open up your drummodule.html document in SublimeText2 (you should have both files open in SublimeText2 and be able to toggle between them with the tabs at the top of SublimeText2)

At the very top type of the document right below the title tag type:

 

SAVE
The entire top of the document now looks like this:

 

This piece of code tells our soon-to-be application that a css document (technically called a stylesheet) exists and drummodule.html needs to be integrating it and reading from it.

Now when you open the drummodule.html from a web browser you should see a green square.

See it?

The reason it is a green square is because of the settings written in our CSS code block:

This thing:

Now before I show you how to turn it into a circle I would encourage you to play with the values in the CSS block. Change the width and height values to 200px. Change the background-color to orange.

When you’re done I want you to do something else.
At the top of the code block type position:absolute; then under it type left:400px;

So now the code should look like this:

Now refresh your browser window. See what happened? The square moved away from the left of the screen.

Now add this top:300px;

Refresh your browser window.

So now the square should have moved down away from the top of the screen.

This is how you move elements around. It might seem odd that we use left and top as ways to describe where we are moving items away from, but that’s just the way it is.

If you are wondering what the heck px is,  it is an abbreviation for pixels which is a value we are moving the div by. You can also use percentages with the % character. Try it:

SAVE
The square should now be 25% right and 25% down.

Let’s turn the square into a circle

In the css code block type border-radius:100px;
so that the code looks like this:

Ok, so we have our circle.

Now go into the HTML document and delete the text that says My circle will soon appear here but keep the div tags. They should still exist but be empty so that they look like this: <div> </div>
SAVE
Now in the CSS file play with the border-radius settings so you can see what it does. You can make nice looking squares with rounded corners. Try setting it as border-radius:50px;

Then turn it back to make it a circle again.

Lets add a nice border to it.

Ok.

So now we have one circle. But we will need more that just one to create a drum kit. How about we create 1 more to start. This way we could have one be our Kick drum and the other be our Snare drum.

So do these things.

In the drummodule.html create another div tag.

So now you should have two and it should look like this:
<div></div>
<div></div>
SAVE
Now go to drummodule.css and copy the css block so that you now have two blocks:

SAVE
Now if you open the drummodule.html in a web browser you might be expecting to see 2 circles. Go ahead and try it.

Oops! There is only one!

Lets fix this!

In your drummodule.html file edit the div tags so they look like this:

 
 
 

So what did we just do? We just gave the div tags a unique ID. We did this in order to separate them from one another. We can now connect each div to it’s own specific CSS block. Lets do that now.

Go to your drummodule.css file and edit the blocks to look like the following:

 

We now have two big circles. So now we need to add the code that will allow us to trigger audio.

We will do that in Part two of this tutorial.

Summary

These are the things you should understand after part 1:

  • How to create an HTML and CSS document.
  • What HTML & CSS are.
  • How to add HTML Tags.
  • How to modify <div> tags with CSS, including how to move them around, re-size them, color them and turn squares into circles.
  • How to add ID’s to tags so that you can customize them individually.
  • How to connect your HTML documents to CSS Stylesheets.

 

Ready for part 2? Click here

 

 

 

Share

2 comments on “Building a basic drum sound trigger machine – Part 1.
  1. Tim says:

    Well I got through lesson 1 ok – everything seemed to work and do what it should. Already starting to get a base understanding.

  2. admin says:

    Good. If any problems arise feel free to leave a comment.

Leave a Reply