SEO

January 27, 2020

how tech-types insult your intelligence everyday: make a drum machine unless your [sic] (simple) stupid - maryrosecook.com


  • drum-machine.js

  • Create the audio element that is used to make sound.
    Create the object that contains functions that use web audio to make sound.
    @@ -72,8 +73,8 @@

    drum-machine.js

    tracks holds the six tracks of the drum machine. Each track has a sound and sixteen steps (or beats).
    tracks holds the six tracks of the drum machine. Each track has a sound and sixteen steps (or beats).
@@ -134,8 +135,8 @@

Update

Increase data.step by one. If data.step is 15, the last step, loop back around to 0, the first step.
Increase data.step by one. If data.step is 15 (the last step) loop back around to 0 (the first step).

Update

¶Mary livecodes a drum machine
that runs in the browser without plugins.
See the heavily annotated source code here:

http://drum-machine.maryrosecook.com
Find all the tracks where the current step is on. Play their sounds.
Find all the tracks where the current step is on. Play the sounds for those tracks.




@@ -194,8 +195,8 @@

Draw

Get the screen object. This is a bundle of functions that, when called, draw in the canvas element created in index.html.
Get the screen object. This is a bundle of functions that draw in the canvas element.
@@ -210,10 +211,9 @@

Draw

draw() draws the drum machine. Called once at the beginning of the program. Is then called 60 times a second forever because of the requestAnimationFrame() call below.
draw() draws the drum machine. Called once at the beginning of the program. It’s then called 60 times a second forever (see the call to requestAnimationFrame() below).
@@ -258,7 +258,7 @@

Draw

Draw the pink square that indicates the current step.
Draw the pink square that indicates the current step (beat).
@@ -315,7 +315,7 @@

Handle events


setupButtonClicking() sets up the event handler that will make clicks turn track buttons on and off.
mouse clicks turn track buttons on and off.@@ -345,7 +345,8 @@

Handle events

…Get the coordinates of the mouse pointer relative to the canvas…
…Get the coordinates of the mouse pointer relative to the canvas…
@@ -405,7 +406,7 @@

Handle events

…Switch it off it was on or on if it was off.
…Switch it off if it was on or on if it was off.
@@ -442,7 +443,8 @@

Handle events

Create the basic note as a sine wave. A sine wave produces a pure tone. Set it to play for duration seconds.
Create the basic note as a sine wave. A sine wave produces a pure tone. Set it to play for duration seconds.
@@ -457,7 +459,8 @@

Handle events

Set the note’s frequency to frequency. A greater frequency produces a higher note.
Set the note’s frequency to frequency. A greater frequency produces a higher note.
@@ -472,8 +475,9 @@

Handle events

Web audio works by connecting nodes togther in chains. The output of one node becomes the input to the next. Thus, sound can be created and modified.
Web audio works by connecting nodes together in chains. The output of one node becomes the input to the next. In this way, sound is created and modified.
@@ -504,7 +508,8 @@

Handle events


An amplifier reduces the volume of the tone from 20% to 0 over the duration of the tone. This produces an echoey effect.
over the duration of the tone. This produces an echoey effect.@@ -519,7 +524,8 @@

Handle events

The amplified output is sent to the browser to be played aloud.
The amplified output is sent to the browser to be played aloud.
@@ -536,7 +542,7 @@

Handle events

note() plays a kick drum sound for 1 second.
kick() plays a kick drum sound for 1 second.
@@ -553,7 +559,8 @@

Handle events

Create the basic note as a sine wave. A sine wave produces a pure tone. Set it to play for duration seconds.
Create the basic note as a sine wave. A sine wave produces a pure tone. Set it to play for duration seconds.
@@ -568,8 +575,9 @@

Handle events

Set the initial frequency of the drum at a low 160. Reduce it to 0 over the duration of the sound. This produces that BBBBBBBoooooo….. drop effect.
Set the initial frequency of the drum at a low 160. Reduce it to 0 over the duration of the sound. This produces that BBBBBBBoooooo….. drop effect.
@@ -584,8 +592,9 @@

Handle events

Web audio works by connecting nodes togther in chains. The output of one node becomes the input to the next. Thus, sound can be created and modified.
Web audio works by connecting nodes together in chains. The output of one node becomes the input to the next. In this way, sound is created and modified.
@@ -616,7 +625,8 @@

Handle events


An amplifier reduces the volume of the tone from 40% to 0 over the duration of the tone. This produces an echoey effect.
over the duration of the tone. This produces an echoey effect.@@ -631,7 +641,8 @@

Handle events

The amplified output is sent to the browser to be played aloud.
The amplified output is sent to the browser to be played aloud.
@@ -648,8 +659,8 @@

Handle events

createSineWave() returns a sound node that plays a sine wave of duration seconds.
createSineWave() returns a sound node that plays a sine wave for duration seconds.
@@ -664,7 +675,7 @@

Handle events

Create an oscillator (a sound wave that goes up and down).
Create an oscillating sound wave.
@@ -679,9 +690,8 @@

Handle events

Make the oscillator a sine wave. Different types of wave produces different characters of sound. A sine wave produces a pure tone.
Make the oscillator a sine wave. Different types of wave produce different characters of sound. A sine wave produces a pure tone.
@@ -711,8 +721,8 @@

Handle events

Tell the sine wave to stop playing after duration seconds have passed.
Tell the sine wave to stop playing after duration seconds have passed.
@@ -743,9 +753,9 @@

Handle events

rampDown() takes a value, sets it to startValue and reduces it to almost 0 in duration seconds. value might be the volume or frequency of a sound.
rampDown() takes value, sets it to startValue and reduces it to almost 0 in duration seconds. value might be the volume or frequency of a sound.
@@ -763,9 +773,9 @@

Handle events

createAmplifier() returns a sound node that controls the volume of the sound coming into it. The volume is started at startValue and ramped down in duration seconds to almost 0.
createAmplifier() returns a sound node that controls the volume of the sound entering it. The volume is started at startValue and ramped down in duration seconds to almost 0.
@@ -784,9 +794,10 @@

Handle events

chain() connects an array of soundNodes into a chain. If there are three nodes in soundNodes, the first will be joined to the second and the second to the third.
chain() connects an array of soundNodes into a chain. If there are three nodes in soundNodes, the output of the first will be the input to the second, and the output of the second will be the input to the third.
@@ -805,9 +816,10 @@

Handle events

createTrack() returns an object that represents a track. This contains an array of 16 steps. Each of these are either on (true) or off (false). It contains color, the color to draw buttons when they are on. It contains playSound, the function
createTrack() returns an object that represents a track. This track contains an array of 16 steps. Each of these are either on (true) or off (false). It contains color, the color to draw buttons when they are on. It contains playSound, the function that plays the sound of the track.
@@ -853,7 +865,7 @@

Handle events

drawButton() draws a button with color at column and row.
drawButton() draws a button in color at column and row.
@@ -872,7 +884,7 @@

Handle events

drawButton() draws the tracks in the drum machine.
drawTracks() draws the tracks in the drum machine.
@@ -896,8 +908,8 @@

Handle events

isPointInButton() returns true if p, the coordinates of a mouse click are inside the button at column and row.
isPointInButton() returns true if p, the coordinates of a mouse click, are inside the button at column and row.
at