diff --git a/src/app/components/loading-spinner/index.ts b/src/app/components/loading-spinner/index.ts
new file mode 100644
index 0000000..9fd9f87
--- /dev/null
+++ b/src/app/components/loading-spinner/index.ts
@@ -0,0 +1,26 @@
+export default {
+  setup() {
+    return this
+  },
+  html: `
+<div id="loading" class="spinner hidden">
+  <div class="rect1"></div>
+  <div class="rect2"></div>
+  <div class="rect3"></div>
+  <div class="rect4"></div>
+  <div class="rect5"></div>
+</div>
+  `,
+  toString() {
+    return this.html
+  },
+  getSpinner() {
+    return document.getElementById('loading')! as HTMLDivElement
+  },
+  show() {
+    this.getSpinner().classList.remove('hidden')
+  },
+  hide() {
+    this.getSpinner().classList.add('hidden')
+  },
+}
diff --git a/src/app/components/mp3-player/index.ts b/src/app/components/mp3-player/index.ts
index 2396155..fff23b9 100644
--- a/src/app/components/mp3-player/index.ts
+++ b/src/app/components/mp3-player/index.ts
@@ -1,4 +1,5 @@
 import { setupIndicators, setupMp3Buttons } from '@components/mp3-player/setup'
+import LoadingSpinner from '../loading-spinner'
 
 export default {
   setup() {
@@ -37,13 +38,7 @@ export default {
   </div>
 </div>
 
-<div id="loading" class="spinner hidden">
-  <div class="rect1"></div>
-  <div class="rect2"></div>
-  <div class="rect3"></div>
-  <div class="rect4"></div>
-  <div class="rect5"></div>
-</div>
+${LoadingSpinner}
 
 <div id="player" class="audioplayer hidden">
   <div role="button" class="play-pause" id="play"><a></a></div>
diff --git a/src/app/pages/sound-fonts/piano-buttons.ts b/src/app/pages/sound-fonts/piano-buttons.ts
index fdd4777..b5d35df 100644
--- a/src/app/pages/sound-fonts/piano-buttons.ts
+++ b/src/app/pages/sound-fonts/piano-buttons.ts
@@ -5,7 +5,7 @@ export async function setupPiano(element: HTMLOListElement): Promise<void> {
   // piano.js is a soundfont created with MIDI.js' Ruby-based soundfont converter
   const piano = await createFont('/ez-web-audio/piano.js')
   // Slicing just so the whole keyboard doesn't show up on the screen
-  const notes = piano.notes.slice(39, 51)
+  const notes = piano.notes.slice(43, 55)
 
   notes.forEach((note: Note) => {
     const key = document.createElement('li')
diff --git a/src/app/pages/timing/drum-machine.ts b/src/app/pages/timing/drum-machine.ts
index b316ff1..c3cf25d 100644
--- a/src/app/pages/timing/drum-machine.ts
+++ b/src/app/pages/timing/drum-machine.ts
@@ -1,22 +1,137 @@
+import { observable, observe } from '@nx-js/observer-util'
 import nav from './nav'
+import LoadingSpinner from '@/app/components/loading-spinner'
+import PermissionBanner from '@/app/components/permission-banner'
+import type { BeatTrack } from '@/beat-track'
+import { createBeatTrack } from '@/index'
+import { codeBlock } from '@/app/utils'
+
+function loadBeatTrackFor(name: string): Promise<BeatTrack> {
+  const urls = [1, 2, 3].map(num => `/ez-web-audio/drum-samples/${name}${num}.wav`)
+  // default is 4 beats, but we're going to use 8 beats for this example
+  return createBeatTrack(urls, { name, numBeats: 8, wrapWith: observable })
+}
 
 const Content = {
-  setup() {
+  async setup() {
+    const spinner = LoadingSpinner.setup()
+    PermissionBanner.setup()
+
+    spinner.show()
+
+    const beatTracks = await Promise.all([
+      loadBeatTrackFor('kick'),
+      loadBeatTrackFor('snare'),
+      loadBeatTrackFor('hihat'),
+    ])
+
+    beatTracks.forEach((beatTrack) => {
+      const { name } = beatTrack
+      // snare and hihat are a little louder than kick, so we'll turn down the gain a bit
+      if (name !== 'kick') {
+        beatTrack.gain = 0.5
+      }
+      // and let's pan the hihat a little to the left
+      if (name === 'hihat') {
+        beatTrack.pan = -0.4
+      }
+
+      // get the lane for the beat track
+      const lane = document.getElementById(`${name}-lane`)
+      // add beat pads to the lane
+      beatTrack.beats.forEach((beat) => {
+        // to simplify showing when a given beat is playing, we will track currentTimeIsPlaying with an observer from nx-js
+
+        const beatPad = document.createElement('div')
+        beatPad.role = 'button'
+        beatPad.classList.add('beat-pad')
+
+        const pad = document.createElement('span')
+        pad.classList.add('pad')
+
+        observe(() => {
+          if (beat.isPlaying) {
+            pad.classList.add('playing')
+          }
+          else {
+            pad.classList.remove('playing')
+          }
+
+          if (beat.currentTimeIsPlaying) {
+            pad.classList.add('highlighted')
+          }
+          else {
+            pad.classList.remove('highlighted')
+          }
 
+          if (beat.active) {
+            pad.classList.add('active')
+          }
+          else {
+            pad.classList.remove('active')
+          }
+        })
+
+        lane?.appendChild(beatPad)
+        beatPad.appendChild(pad)
+
+        beatPad.addEventListener('click', () => {
+          beat.active = !beat.active
+          beat.playIfActive()
+        })
+      })
+    })
+
+    // hide the loading spinner
+    spinner.hide()
+    // show the beat machine
+    document.getElementById('beat-machine')!.classList.remove('hidden')
+
+    // set up the play button
+    const playButton = document.getElementById('play-button')!
+    const tempoInput = document.getElementById('tempo-input')! as HTMLInputElement
+    playButton.addEventListener('click', () => {
+      beatTracks.forEach((beatTrack) => {
+        beatTrack.playActiveBeats(tempoInput.valueAsNumber, 1 / 8)
+      })
+    })
   },
   html: `
 
 ${nav}
 
-<h1>Timing</h1>
+<h1>Multisampled Drum Machine</h1>
 
-<div class="docs">
-  <p>
-    Below is an example of a drum machine that loads up three samples for each lane and allows you to program a drum beat.
-    The sample is automatically alternated so you never hear the same sample back-to-back.
-  </p>
+${PermissionBanner}
 
+<p>
+  Below is an example of a drum machine that loads up three samples for each lane and allows you to program a drum beat.
+  The sample is automatically alternated so you never hear the same sample back-to-back.
+</p>
 
+${LoadingSpinner}
+
+<div id="beat-machine" class="hidden">
+  <div class="controls">
+    <button id="play-button">PLAY</button>
+    <div class="space">
+      <label>Tempo <Input value="120" id="tempo-input" type="number" /></label>
+    </div>
+  </div>
+
+  <div id="kick-lane" class="lane">
+    <p>Kick</p>
+  </div>
+  <div id="snare-lane" class="lane">
+    <p>Snare</p>
+  </div>
+  <div id="hihat-lane" class="lane">
+    <p>HiHat</p>
+  </div>
+</div>
+
+<div class="docs">
+  ${codeBlock('// code is [WIP]!')}
 </div>
 `,
 }
diff --git a/src/app/public/style.css b/src/app/public/style.css
index 2b43022..07a8242 100644
--- a/src/app/public/style.css
+++ b/src/app/public/style.css
@@ -93,11 +93,16 @@ button.green {
   padding: 2rem 0;
 }
 
+.space {
+  margin-top: 1em;
+}
+
 .beat-pad {
   display: inline-block;
   height: 100px;
   width: 100px;
   text-align: center;
+  margin-right: 4px;
 }
 
 .beat-pad .pad {
@@ -105,6 +110,40 @@ button.green {
   display: block;
   height: 100%;
 }
+.controls {
+  text-align: center;
+}
+.beat-machine {
+  display: table;
+  margin: 0 auto;
+}
+.beat-lane {
+  margin: 1em 0;
+}
+.beat-lane .text {
+  display: block;
+}
+.beat-pad {
+  display: inline-block;
+  height: 100px;
+  width: 100px;
+  text-align: center;
+}
+.beat-pad .pad {
+  background-color: #2a2a2a;
+  display: block;
+  height: 100%;
+}
+.beat-pad .pad.highlighted {
+  background-color: #393939;
+}
+.beat-pad .pad.active {
+  background-color: #900101;
+}
+.beat-pad .pad.playing {
+  background-color: #000;
+}
+
 
 [role="button"] {
   cursor: pointer;
diff --git a/src/base-sound.ts b/src/base-sound.ts
index bfcbcea..860e8d2 100644
--- a/src/base-sound.ts
+++ b/src/base-sound.ts
@@ -4,6 +4,11 @@ import type { Connectable, Connection } from '@interfaces/connectable'
 import type { ControlType, ParamController, RampType, RatioType } from '@controllers/base-param-controller'
 import audioContextAwareTimeout from '@utils/timeout'
 
+interface BaseSoundOptions {
+  name?: string
+  setTimeout?: (fn: () => void, delayMillis: number) => number
+}
+
 export abstract class BaseSound implements Connectable, Playable {
   protected _isPlaying = false
   protected gainNode: GainNode
@@ -21,13 +26,17 @@ export abstract class BaseSound implements Connectable, Playable {
   public abstract audioSourceNode: OscillatorNode | AudioBufferSourceNode
   public abstract duration: TimeObject
 
-  constructor(protected audioContext: AudioContext, opts?: any) {
+  public name: string
+
+  constructor(protected audioContext: AudioContext, opts?: BaseSoundOptions) {
     const gainNode = audioContext.createGain()
     const pannerNode = audioContext.createStereoPanner()
 
     this.gainNode = gainNode
     this.pannerNode = pannerNode
 
+    this.name = opts?.name || ''
+
     if (opts?.setTimeout) {
       this.setTimeout = opts.setTimeout
     }
diff --git a/src/beat-track.ts b/src/beat-track.ts
index a5ef26a..e822912 100644
--- a/src/beat-track.ts
+++ b/src/beat-track.ts
@@ -1,10 +1,17 @@
 import { Beat } from './beat'
 import type { Connectable } from './interfaces/connectable'
 import type { Playable } from './interfaces/playable'
+import type { SamplerOptions } from './sampler'
 import { Sampler } from './sampler'
 
 const beatBank = new WeakMap()
 
+export interface BeatTrackOptions extends SamplerOptions {
+  numBeats?: number
+  duration?: number
+  wrapWith?: (beat: Beat) => Beat
+}
+
 /**
  * An instance of this class has an array of "sounds" (comprised of one or multiple
  * audio sources, if multiple are provided, they are played in a round-robin fashion)
@@ -19,16 +26,21 @@ const beatBank = new WeakMap()
  * queue?
  */
 export class BeatTrack extends Sampler {
-  constructor(private audioContext: AudioContext, sounds: (Playable & Connectable)[], opts?: { numBeats?: number, duration?: number }) {
-    super(sounds)
+  constructor(private audioContext: AudioContext, sounds: (Playable & Connectable)[], opts?: BeatTrackOptions) {
+    super(sounds, opts)
     if (opts?.numBeats) {
       this.numBeats = opts.numBeats
     }
     if (opts?.duration) {
       this.duration = opts.duration
     }
+    if (opts?.wrapWith) {
+      this.wrapWith = opts.wrapWith
+    }
   }
 
+  private wrapWith?: (beat: Beat) => Beat
+
   /**
    * @property numBeats
    *
@@ -73,7 +85,12 @@ export class BeatTrack extends Sampler {
         play: this.play.bind(this),
       })
 
-      beats.push(beat)
+      if (this.wrapWith) {
+        beats.push(this.wrapWith(beat))
+      }
+      else {
+        beats.push(beat)
+      }
     }
 
     if (existingBeats) {
diff --git a/src/beat.ts b/src/beat.ts
index c8f5001..35ae017 100644
--- a/src/beat.ts
+++ b/src/beat.ts
@@ -44,8 +44,8 @@ export class Beat {
     }
   }
 
-  private parentPlayIn: ((time: number) => void) | undefined
-  private parentPlay: (() => void) | undefined
+  private parentPlayIn: ((time: number) => void)
+  private parentPlay: (() => void)
   private setTimeout: (fn: () => void, delayMillis: number) => number
 
   /**
@@ -105,7 +105,7 @@ export class Beat {
   public playIn(offset = 0): void {
     const msOffset = offset * 1000
 
-    this.parentPlayIn!(offset)
+    this.parentPlayIn(offset)
 
     this.setTimeout(() => {
       this.isPlaying = true
@@ -131,7 +131,7 @@ export class Beat {
     const msOffset = offset * 1000
 
     if (this.active) {
-      this.parentPlayIn!(offset)
+      this.parentPlayIn(offset)
       this.setTimeout(() => this.markPlaying(), msOffset)
     }
 
@@ -146,7 +146,7 @@ export class Beat {
    * `isPlaying` and `currentTimeIsPlaying` are both immediately marked true.
    */
   public play(): void {
-    this.parentPlay!()
+    this.parentPlay()
     this.markPlaying()
     this.markCurrentTimePlaying()
   }
@@ -163,7 +163,7 @@ export class Beat {
    */
   public playIfActive(): void {
     if (this.active) {
-      this.parentPlay!()
+      this.parentPlay()
       this.markPlaying()
     }
 
diff --git a/src/index.ts b/src/index.ts
index 73d5641..797b630 100644
--- a/src/index.ts
+++ b/src/index.ts
@@ -1,4 +1,3 @@
-import { clone, store } from 'array-buffer-cache'
 import type { OscillatorOptsFilterValues } from './oscillator'
 import { SampledNote } from './sampled-note'
 import type { Connectable } from './interfaces/connectable'
@@ -7,8 +6,11 @@ import { Font } from './font'
 import { mungeSoundFont } from './utils/decode-base64'
 import { createNoteObjectsForFont, extractDecodedKeyValuePairs } from './utils/note-methods'
 import frequencyMap from './utils/frequency-map'
+import type { BeatTrackOptions } from './beat-track'
 import { BeatTrack } from './beat-track'
+import { Beat } from '@/beat'
 import { MusicallyAware } from '@/musical-identity'
+import type { SamplerOptions } from '@/sampler'
 import { Sampler } from '@/sampler'
 import { Oscillator } from '@/oscillator'
 import { Sound } from '@/sound'
@@ -65,11 +67,16 @@ export async function createTrack(url: string): Promise<Track> {
   return load(url, 'track') as Promise<Track>
 }
 
-export async function createSampler(urls: string[]): Promise<Sampler> {
+export async function createBeatTrack(urls: string[], opts?: BeatTrackOptions): Promise<BeatTrack> {
+  const sounds = await Promise.all(urls.map(async url => load(url, 'sound') as Promise<Sound>))
+  return new BeatTrack(audioContext, sounds, opts)
+}
+
+export async function createSampler(urls: string[], opts?: SamplerOptions): Promise<Sampler> {
   const sounds = await Promise.all(urls.map(async url => load(url, 'sound') as Promise<Sound>))
   await initAudio()
   throwIfContextNotExist()
-  return new Sampler(sounds)
+  return new Sampler(sounds, opts)
 }
 
 export async function createOscillator(options?: OscillatorOpts): Promise<Oscillator> {
@@ -112,12 +119,10 @@ export async function createWhiteNoise(): Promise<Sound> {
  *
  * @param {object} props POJO to pass to the new instance
  */
-function createSoundFor(type: 'sound' | 'track' | 'beatTrack' | 'sampler', buffer: any): Sound | Sampler | Track | BeatTrack {
+function createSoundFor(type: 'sound' | 'track' | 'sampler', buffer: any): Sound | Sampler | Track {
   switch (type) {
     case 'track':
       return new Track(audioContext, buffer)
-    case 'beatTrack':
-      return new BeatTrack(audioContext, buffer)
     case 'sampler':
       return new Sampler(buffer)
     default:
@@ -140,7 +145,7 @@ function createSoundFor(type: 'sound' | 'track' | 'beatTrack' | 'sampler', buffe
  * as well as which register the instance should be placed in. Can be 'sound',
  * 'track', or 'beatTrack'.
  */
-async function load(src: string, type: 'sound' | 'track' | 'beatTrack' | 'sampler'): Promise<Sound | Sampler | Track | BeatTrack> {
+async function load(src: string, type: 'sound' | 'track' | 'sampler'): Promise<Sound | Sampler | Track> {
   if (responses.has(src)) {
     const res = await responses.get(src)!.clone()
     const buffer = await audioContext.decodeAudioData(await res.arrayBuffer())
@@ -168,6 +173,8 @@ export {
   Track,
   MusicallyAware,
   frequencyMap,
+  Beat,
+  BeatTrack,
 }
 
 export type {
diff --git a/src/sampler.ts b/src/sampler.ts
index 2603ef4..4fa1ed2 100644
--- a/src/sampler.ts
+++ b/src/sampler.ts
@@ -1,6 +1,10 @@
 import type { Connectable } from './interfaces/connectable'
 import type { Playable } from './interfaces/playable'
 
+export interface SamplerOptions {
+  name?: string
+}
+
 /**
  * An instance of the Sampler class behaves just like a Sound, but allows
  * many {{#crossLink "AudioBuffer"}}AudioBuffers{{/crossLink}} to exist and
@@ -14,30 +18,37 @@ import type { Playable } from './interfaces/playable'
  * @todo loop
  */
 export class Sampler {
-  constructor(sounds: (Playable & Connectable)[]) {
+  constructor(sounds: (Playable & Connectable)[], opts?: SamplerOptions) {
     this.sounds = new Set<Playable & Connectable>(sounds)
-    this._soundIterator = sounds.values()
+    this.soundIterator = sounds.values()
+    this.name = opts?.name || ''
   }
 
+  /**
+   * @property name
+   * Optional property which serves to aid in identification
+   */
+  public name: string
+
   /**
    * @property gain
    * Determines the gain applied to each sample.
    */
-  gain: number = 1
+  public gain: number = 1
 
   /**
    * @property pan
    * Determines the stereo pan position of each sample.
    */
-  pan: number = 0
+  public pan: number = 0
 
   /**
-   * @property _soundIterator
+   * @property soundIterator
    * Temporary storage for the iterable that comes from the sounds Set.
    * This iterable is meant to be replaced with a new copy every time it reaches
    * it's end, resulting in an infinite stream of Sound instances.
    */
-  private _soundIterator: Iterator<Playable & Connectable>
+  private soundIterator: Iterator<Playable & Connectable>
 
   /**
    * @property sounds
@@ -45,27 +56,25 @@ export class Sampler {
    * that uses {{#crossLink "Playable"}}{{/crossLink}}. If not set on
    * instantiation, automatically set to `new Set()` via `_initSounds`.
    */
-  sounds: Set<Playable & Connectable>
+  private sounds: Set<Playable & Connectable>
 
   /**
-   * Gets the next audio source and plays it immediately.
-   *
-   * @public
    * @method play
+   * Gets the next audio source and plays it immediately.
    */
-  play(): void {
-    this._getNextSound().play()
+  public play(): void {
+    this.getNextSound().play()
   }
 
   /**
    * @method playIn
    * Gets the next Sound and plays it after the specified offset has elapsed.
    *
-   * @param {number} _ Number of seconds from "now" that the next Sound
+   * @param {number} seconds Number of seconds from "now" that the next Sound
    * should be played.
    */
-  playIn(_: number): void {
-    // this._getNextSound().playIn(seconds)
+  public playIn(seconds: number): void {
+    this.getNextSound().playIn(seconds)
   }
 
   /**
@@ -77,24 +86,21 @@ export class Sampler {
    * {{#crossLink "AudioContext"}}AudioContext's{{/crossLink}} "beginning of
    * time") when the next Sound should be played.
    *
-   * @public
    * @method playAt
    */
-  playAt(time: number): void {
-    this._getNextSound().playAt(time)
+  public playAt(time: number): void {
+    this.getNextSound().playAt(time)
   }
 
   /**
-   * Gets _soundIterator and returns it's next value. If _soundIterator has
-   * reached it's end, replaces _soundIterator with a fresh copy from sounds
+   * Gets soundIterator and returns it's next value. If soundIterator has
+   * reached it's end, replaces soundIterator with a fresh copy from sounds
    * and returns the first value from that.
    *
-   * @private
-   * @method _getNextSound
-   * @return {Sound}
+   * @method getNextSound
    */
-  _getNextSound(): Playable & Connectable {
-    let soundIterator = this._soundIterator
+  private getNextSound(): Playable & Connectable {
+    let soundIterator = this.soundIterator
     let nextSound
 
     nextSound = soundIterator.next()
@@ -104,21 +110,19 @@ export class Sampler {
       nextSound = soundIterator.next()
     }
 
-    this._soundIterator = soundIterator
+    this.soundIterator = soundIterator
 
-    return this._setGainAndPan(nextSound.value)
+    return this.setGainAndPan(nextSound.value)
   }
 
   /**
    * Applies the `gain` and `pan` properties from the Sampler instance to a
    * Sound instance and returns the Sound instance.
    *
-   * @private
-   * @method _setGainAndPan
-   * @return {Sound} The input sound after having it's gain and pan set
+   * @method setGainAndPan
    */
-  _setGainAndPan(sound: Playable & Connectable): Playable & Connectable {
-    // sound.changeGainTo(this.gain).from('ratio')
+  private setGainAndPan(sound: Playable & Connectable): Playable & Connectable {
+    sound.changeGainTo(this.gain)
     sound.changePanTo(this.pan)
 
     return sound