EarSketch is a platform for making music with code. In this Hour of Code tutorial, you will learn the basics of coding in EarSketch and will be able to make music like this:

When you are done listening to the music, press the right arrow button at the bottom of the screen to continue.

Below is some code created in EarSketch. It is written in a programming language called JavaScript. Click the blue icon in the upper right corner to copy the code into the code editor. Don’t worry about understanding the code yet.

Once the code has been copied to the code editor, click the blue "Import To Edit" button. This will allow you to make changes to the code.

Run the example code by pressing the green "Run" button at the top of the code editor.

After you run the code, you will see that the top section of the screen will be populated by rectangles. These represent sound clips.

Play the music that the code generated by clicking the play button above the sound clips.

The video below shows you how to open, import, run, and listen to the example code.

Above the clips is a timeline which displays time in seconds (top) and measures (bottom). Measure is a musical term for a length of time.

The clips are organized in rows, called tracks in EarSketch.

The code that adds the sound clips to the first track is on line 7 in the Code Editor.

Line 7 uses a function called fitMedia(). A function is a piece of code that performs an operation. The fitMedia() function adds a sound clip to the time line.

A function generally requires parameters in order to know precisely what you want to do. The fitMedia() function takes in four input parameters:

Let’s look at line 7:

This means the sound clip called "RD_UK_HOUSE_MAINBEAT_8" will be added to track 1, starting at measure 1 and ending at measure 5.

Let’s change line 7 so the sound clip ends at measure 9 instead of 5. The line should now look like this:

Use the code editor to change line 7. Then run the code, play the music, and listen to how it has changed.

Now let’s look at line 8. The line reads:

This means the sound clip called "RD_POP_PADCHORD_2" will be added to track 2, starting at measure 1 and ending at measure 9.

Change the line so the sound clip starts at measure 5 instead of 1. The line should now look like this:

Use the code editor to change line 8. Then run the code, play the music, and listen to how it has changed.

Now that you know how to change the start and end times of clips in EarSketch, you can customize the music.

On lines 7 and 8, try some different values for the start and end parameters. Then, run the code and listen to how the music changes.

You can use whole numbers (like 1, 5, or 27) or decimals (like 1.25, 5.5, or 27.75) for start and end times. Remember that the smallest number you can use for a measure or track is 1.

Line 14 of the code uses the makeBeat() function. This function allows you to make custom rhythms.

The makeBeat() function takes in four input parameters:

Line 14 contains the code:

This means the beat will use the sound clip "OS_SNARE03", will be added to track 3 at measure 4, and use the beat string fillA.

In this example, fillA is a variable. Variables hold data such as numbers or words to be used later in the code.

The fillA variable holds a string of characters, "0---0-0-00—​0000", which describes a rhythm for makeBeat(). Strings always begin and end with quotation marks. The code also defines the variables fillB and fillC as strings.

Let’s edit line 14 to use one of the other variables. Choose either fillB or fillC to replace fillA in the code. Here is what line 14 will look like if you choose fillC:

Once you have chosen a new drum fill, run the code and listen to the result.

EarSketch has a function called reverseString() which can reverse the order of the characters in a string.

On line 16 in the code, type the following:

This creates a new variable called fillRev that contains a reversed version of fillA. Since fillA is "0---0-0-00—​0000", fillRev will be "0000—​00-0-0---0".

We can use fillRev in a makeBeat() function. Instead of editing the existing makeBeat() function, we will make a new one to add a second drum fill to the music.

On line 17, type the following code to put the reversed fill into your song:

This means the beat will use the sound clip "OS_SNARE03", will be added to track 3 at measure 8, and will use the beat string stored in fillRev.

Run the code and listen to the result.

Use what you’ve learned to write another makeBeat() call at a different measure with a different beat string.

You can use or modify one of the provided strings or try to write one from scratch using "0" and "-" characters. Beat strings are usually 16 characters long, which represents one measure of music.

Throughout the example code, you’ll see section labels such as // Add Sounds, // Fills, and // More Sounds. The "//" symbol at the start of the line means that line is a comment. Comments provide information about the code but are ignored by the computer.

Comments can be used as labels and explanations to help make code easier to read. They can also be used to disable lines of code so they are ignored by the computer when the code is run.

Under the // More Sounds comment, there is a series of fitMedia() functions that are commented out. Each contains a different sound.

You can enable them by deleting the "//" character at the beginning of the line.

Try uncommenting different combinations of lines. Then, run the code and listen to the result. See if you can guess what each line of code will add to the music before you press run.

It is time to make your own music using EarSketch.

Comment and uncomment lines of code, change start and end times in fitMedia(), and add fills with makeBeat().

You can edit or comment out functions that were included in the example code or try to write your own new lines of code. If you want to start a new song from scratch, press the + icon to create a new JavaScript script.

If you want to explore more sound clips, you can use the Sound Browser. Access the browser by clicking the icon on the left side of the screen.

In the browser, you can search for and filter through all of the sounds available in EarSketch.

EarSketch offers much more than we had time to cover in the last hour. There is a full length curriculum included in this panel. It can be accessed by clicking the Table of Contents icon at the top right of the browser window.

You can use the full curriculum to learn more about programming and create more complex music. The example below represents just one of the possibilities.