Create a Music Jam Station with Vanilla JavaScript

The HTML5 audio player has given rise to some new and exciting possibilities, especially when it comes to music related web applications. I hope to introduce you to some of these possibilities by walking you through how I created this jam station. This project originally began as an experiment, but over time evolved into an open ended practice and teaching tool for guitar players.

A solid understanding of Javascript fundamentals is necessary for following this tutorial.

In the spirit of keeping things concise, we'll be building a slightly simpler version. Here's exactly what we will be making today.

See the Pen Jam Station by SitePoint (@SitePoint) on CodePen.

If you aren't particularly interested in recreating this tutorial exactly, that's all right. Much of what I cover in this tutorial is applicable to different types of musical applications.

A basic grasp on music theory will help you in following this tutorial. An understanding of time signatures, measures and beats are a must.

What You Will Need

The audio track you choose will need to be recorded to a click track or metronome. In other words, the length of each beat will need to be uniform across the entire track.

There are a few things you will need to know about your audio track in order to find the current beat and measure.

• Beats Per Minute (BPM or Tempo)
• Time Signature
• Time the Track Starts
• How many measures are used to count in (not always applicable)

You can use the audio track I've used in the CodePen demo (right click to save) if you'd like.

Here's the relevant data for that track.

• BMP = 117
• Time Signature = 4/4
• Start time of the first beat = 0.2s
• Measures used for count in = 1

If you are using your own track and you are unsure of some of these specifics, a free audio editor like Audacity should help. It won't be able to tell you everything, but you will be able to find the exact start time of the first beat. If you are recording your own track it's best to make note of this information from the start.

The Markup and CSS

Before getting into the fun stuff, here's HTML and CSS we'll be using.

 <div class="wrapper">
   <div id="chord-diagram"></div>
   <audio id="jam-track"  src="http://ift.tt/2bWzplY" controls></audio>
  <br>

  <label>Beat: </label>
  <div class="data" id="beat"></div>

  <label>Measure: </label>
  <div class="data" id="measure"></div>

  <label>Section: </label>
  <div class="data" id="section"></div>

  <label>Chord: </label>
  <div class="data" id="chord"></div>

  <div id="chord-progression"></div>
</div>

.wrapper {
  max-width: 400px;
}

#chord-progression {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid lightgray;
}

.section {
  margin-bottom: 20px;
  display: none;
}

.measure {
  width: 25%;
  display: inline-block;
}

.m-line {
  float: right;
  width: 10px;
}

audio {
  width: 100%;
}

.data {
  display: inline;
  margin-right: 10px;
}

label {
  font-weight: bold;
}

Setting up the Variables

First we'll take all of the track data we discussed and set up some variables.

// beats per minute
var BPM = 117;

// beats per second
var BPS = 60 / BPM;

// measures used for count in
var measuresCount = 1;

// time the track starts
var offsetSeconds = 0.2;

// time signature
var timeSigTop = 4;
var timeSigBottom = 4;

The Chord Progression

I've kept the chord progression data model pretty simple for the purposes of this tutorial and used a multidimensional array.

The top level array is the chord progression sections. These could be verses, choruses, bridges, etc.

The nested arrays contain the chords for each measure in their respective sections.

Continue reading %Create a Music Jam Station with Vanilla JavaScript%

by Myles English via SitePoint