Documentation | Lloyd's Online TR-808 Drum Machine

Getting Started

Lloyd's Online TR-808 Drum Machine is a web-based application that recreates the classic sounds and sequencing functionality of the legendary Roland TR-808 Rhythm Composer. This documentation will help you understand how to use the drum machine to create your own beats.

No installation or downloads are required. The drum machine runs directly in your web browser using standard web technologies.

Overview of the TR-808 Drum Machine interface showing multiple rows of the step sequencer with sound labels, volume controls, and variations
The TR-808 Drum Machine interface with multiple instrument tracks

Interface Overview

The drum machine interface consists of the following main components:

  • Transport Controls: Play/pause and stop buttons to control playback
  • Tempo Control: Adjustable knob to set the playback speed (BPM)
  • Swing Control: Adds rhythmic swing to your patterns
  • Pattern Controls: Clear, undo, and redo buttons for pattern management
  • Save/Load Controls: Buttons to save and load your patterns as JSON files
  • Saturation Controls: Options to add analog-style warmth to the sounds
  • Accent Track: A special track to add emphasis to certain steps
  • Drum Tracks: Individual instrument tracks with step sequencers
  • Sound Selectors: Dropdown menus to choose different sound variations
  • Volume Controls: Sliders to adjust the volume of each instrument

The main grid displays the step sequencer where you can create your drum patterns by clicking on steps to activate or deactivate them.

Step Sequencer

The step sequencer allows you to create patterns with different step lengths. You can choose between 16, 32, or 64 steps, giving you more flexibility to create complex or longer patterns.

Step Mode

The step mode feature allows you to choose between different pattern lengths:

  • 16 Steps - The standard single-bar pattern (4/4 time signature)
  • 32 Steps - An extended two-bar pattern
  • 64 Steps - A comprehensive four-bar pattern

When using 32 or 64 steps, your pattern will be divided into multiple pages (2 pages for 32 steps, 4 pages for 64 steps). You can navigate between these pages using the previous and next buttons.

Auto-Scroll Feature

When working with longer patterns (32 or 64 steps), you can control how the sequencer interface behaves during playback:

  • Auto-Scroll ON (default) - The interface automatically follows the playback, changing pages as needed to show the currently playing steps.
  • Auto-Scroll OFF - The interface stays on your selected page regardless of what's playing, allowing you to edit different parts of the pattern while playback continues. This is especially useful when recording your pattern to WAV.

The Auto-Scroll toggle is only available when using 32 or 64 steps. For 16-step patterns, it remains disabled as there's only one page to display.

Step mode controls
The step mode controls allow you to select pattern length and navigate between pages

Using the Sequencer

  1. Click on a step to activate it (the step will light up)
  2. Click again to deactivate it
  3. Use the Play button to hear your pattern
  4. The drum sound will play when the sequencer reaches an active step
  5. For longer patterns, use the page navigation buttons to access additional steps

Different colored sections represent beat divisions to help you visualize the pattern structure.

Deactivated step in the sequencer
Deactivated step
Activated normal step in the sequencer
Activated normal step
Activated step with accent in the sequencer
Activated step with accent

Drag to Select Multiple Steps

You can click and drag across multiple steps to activate or deactivate them at once:

  1. Click on a step to select it (this determines whether you're activating or deactivating)
  2. Keep the mouse button pressed and drag across other steps
  3. All steps you drag over will be set to the same state as your initial click

This makes it much faster to create patterns or clear sections of your beat.

Changing Pattern Length

When you change the pattern length (e.g., from 16 to 32 steps), the existing pattern is preserved and copied to the new length. This allows you to extend your pattern without losing your work. When reducing the length, only the steps that fit within the new length are kept.

Step Mode

The Step Mode feature allows you to choose between different pattern lengths: 16, 32, or 64 steps. This gives you the flexibility to create either compact one-bar patterns or more complex, multi-bar sequences.

  • 16 Steps: Standard one-bar pattern (classic TR-808 style)
  • 32 Steps: Extended two-bar pattern, allowing for variations between bars
  • 64 Steps: Long four-bar pattern, perfect for complex progressions or full song sections

When using longer patterns (32 or 64 steps), you can navigate between pages using the navigation controls. Each page displays 16 steps at a time. The auto-scroll feature can be toggled to automatically follow the playback position or allow manual browsing during playback.

Step Mode controls showing 16/32/64 step options, page navigation, and auto-scroll toggle
The Step Mode controls allow you to select pattern length (16, 32, or 64 steps), navigate between pages, and toggle auto-scroll functionality. Auto-scroll automatically follows the current playback position when enabled.

Controls

Transport Controls

  • Play/Pause: Starts or pauses the sequencer playback. The button changes its appearance to show the current state.
  • Stop: Stops the sequencer playback and resets to the beginning. The button is disabled until playback starts.
Play/Pause and Stop buttons
The Play/Pause button (top) toggles between play and pause modes, while the Stop button (bottom) resets the sequence

Tempo Control

The tempo knob allows you to adjust the playback speed from 50 to 200 BPM (beats per minute). You can:

  • Drag the knob to adjust the tempo
  • Use the + and - buttons for precise 1 BPM adjustments

The current BPM value is displayed below the knob.

Tempo knob with plus and minus buttons
Tempo control with adjustable knob and +/- buttons for fine adjustments

Swing Control

The swing knob adds a "groove" feel to your pattern by delaying every other sixteenth note. A value of 0% (fully left) means no swing, while increasing the value adds more swing, up to a maximum.

Swing is what gives many classic hip-hop and electronic tracks their characteristic bouncy feel. Experiment with different swing amounts to change the feel of your pattern without changing the actual notes.

Swing knob control
Swing control allows you to add groove to your patterns by delaying every other step

Pattern Controls

  • Clear Pattern: Removes all active steps from the current pattern
  • Undo: Reverts the last change made to the pattern
  • Redo: Restores a previously undone change
Clear Pattern button
Clear Pattern button
Undo and Redo buttons
Undo and Redo buttons

Saturation Controls

  • Clean: No saturation, clean sound
  • Saturation Low: Light saturation for subtle warmth
  • Saturation High: Heavy saturation for more analog character

Saturation emulates the warm, slightly distorted sound of analog circuits that made the original TR-808 famous. Higher saturation gives a more vintage, "dirty" sound.

Saturation control buttons
Saturation controls with three options: Clean, Saturation Low, and Saturation High

Accent Track

The accent track is a special row at the bottom of the sequencer that allows you to add emphasis to specific steps in your pattern, just like the original TR-808.

How Accent Works

  • When you activate a step in the accent track, all instrument sounds that play on that step will be louder (20% volume increase)
  • Accented steps are highlighted with a special color in the sequencer grid
  • This feature lets you create more dynamic and interesting patterns by emphasizing certain beats

Accent is perfect for emphasizing the downbeats (like the first beat of each bar) or creating dynamic patterns with varying intensity.

Accent track with activated steps
The accent track allows you to emphasize specific steps in your pattern by increasing their volume

Sound Selection

Each drum track has a sound selection dropdown labeled "Variation" that allows you to choose from different variations of that instrument's sound. The number of available variations depends on the specific instrument.

You can preview a sound by clicking the play button (▶) next to the variation selector.

Variation dropdown menu with preview button
Sound variation dropdown with preview button to audition different drum sounds

Volume Control

Each track has a volume control slider labeled "Vol" that allows you to adjust the relative volume of that instrument from 0.0 (silent) to 1.0 (full volume).

Volume slider control
Volume slider for adjusting the level of individual drum sounds

Muting Tracks

You can mute individual drum tracks to temporarily silence them without deleting their patterns. This is useful for focusing on specific elements of your beat or creating breakdowns.

How to Mute a Track

  1. Click on the track name (e.g., "Bass Drum", "Snare", etc.) to toggle mute on/off
  2. When a track is muted:
    • The track name appears grayed out
    • A small mute icon (🔇) appears next to the name
    • The track won't produce sound during playback
  3. Click the track name again to unmute it

When you mute a track, the drum machine remembers its volume setting. When you unmute it, the volume returns to its previous value.

Track labels with mute function examples
Examples of track name labels that can be clicked to mute/unmute tracks

Hi-Hat Choke Groups

The drum machine implements realistic hi-hat behavior with "choke groups", mimicking how hi-hats work on the original TR-808 and in real life.

What Are Choke Groups?

In a real drum kit, when you press the pedal on a hi-hat, the two cymbals close together, cutting off (or "choking") any open hi-hat sound that was ringing out. The drum machine recreates this behavior:

  • When a closed hi-hat plays, it automatically cuts off any currently playing open hi-hat sound
  • This creates a more realistic hi-hat performance, especially when both open and closed hi-hats are used in the same pattern
  • The open hi-hat won't choke the closed hi-hat (just like on a real drum kit)

This feature is especially important for creating authentic sounding hi-hat patterns with both open and closed sounds.

Pattern Management

The drum machine includes undo/redo functionality that allows you to experiment freely without losing your work. The undo history tracks the following actions:

  • Toggling individual steps
  • Clearing the pattern
  • Changing instrument variations
  • Adjusting volume levels
  • Changing tempo and swing settings
  • Toggling accent steps
  • Muting and unmuting tracks

Use the Undo and Redo buttons to navigate through your pattern history. These buttons will be disabled when there are no actions to undo or redo.

Undo and Redo buttons
Undo and Redo buttons let you navigate through your pattern history

Saving & Loading Patterns

You can save your drum patterns to your computer and reload them later, or share them with others.

Saving a Pattern

  1. Click the "Save Pattern" button
  2. Your web browser will download a JSON file containing your pattern
  3. The file will be named "808-pattern.json"

Loading a Pattern

  1. Click the "Load Pattern" button
  2. A file browser will open
  3. Select a previously saved pattern file (.json)
  4. The pattern will load, replacing your current pattern

The saved pattern includes all aspects of your beat:

  • Which steps are active for each instrument
  • Volume settings for each track
  • Selected sound variations
  • Tempo and swing settings
  • Accent patterns
  • Mute states of each track
  • Step mode setting (16, 32, or 64 steps)
Save and Load Pattern buttons
Save and Load Pattern buttons for storing your beats as JSON files and retrieving them later

Audio Recording

In addition to saving your patterns as JSON files, you can also record the audio of your drum pattern directly as a high-quality WAV file for use in your DAW or to share with others.

Recording a Drum Pattern

  1. Select your preferred quality settings from the dropdown menu
  2. Click the red record button (●) in the recording section
  3. Recording starts immediately:
    • If the sequencer is not playing, it will start automatically
    • The record button pulses red to indicate active recording
  4. Stop recording by:
    • Clicking the stop record button (■)
    • Clicking the sequencer's stop button
  5. Your browser will automatically download a WAV file with the current BPM, bit depth and sample rate in the filename (e.g., "Lloyd-Stellar-808-Beat-130BPM-24bit-44.1kHz.wav")

Recording Quality Options

  • 16-bit / 44.1kHz: CD quality, good for most uses
  • 24-bit / 44.1kHz: Studio quality (default), better dynamic range
  • 16-bit / 48kHz: DAW standard, compatible with most video production
  • 24-bit / 48kHz: Professional quality, ideal for further processing

Important Notes

  • Maximum recording time is limited to 5 minutes
  • All effects (including saturation mode) are captured in the recording
  • The current tempo (BPM) is included in the filename for easy reference
  • The recording function requires a modern browser with full Web Audio API support
  • For best results, use Chrome, Firefox, Edge, or Safari (latest versions)

The recorded audio files can be directly imported into your DAW (Digital Audio Workstation) or shared with others to showcase your beats in the highest quality.

Record and Export interface
The complete recording interface showing the 'Start Record' and 'Stop Record' buttons (left) and quality settings dropdown (right). The interface allows you to export your beats as high-quality WAV files with your chosen bit depth and sample rate, as well as including your current tempo in the filename.

Drag to Select Steps

To make pattern creation faster and more intuitive, you can activate or deactivate multiple steps at once by clicking and dragging.

How to Use Drag Selection

  1. Click on a step to set the initial state (active or inactive)
  2. While holding the mouse button down, drag horizontally across other steps
  3. All steps you cross over will be set to match your initial click

For example, if you click on an inactive step and then drag, all steps you drag across will become active. If you start on an active step, all steps will become inactive.

This works for both regular instrument steps and accent steps, making it much quicker to create complex patterns.

Keyboard Shortcuts

The drum machine supports the following keyboard shortcuts:

Key Action
Space Play/Pause toggle
Ctrl + Z Undo last action
Ctrl + Y Redo last undone action
C Clear pattern

Keyboard shortcuts make the drum machine faster to use, especially when you're working on complex patterns or need to quickly start/stop playback.

Mobile Usage

The drum machine is designed to be responsive and works on mobile devices. However, for the best experience, we recommend using the drum machine application in landscape orientation on tablets and smartphones.

If you're using a mobile device in portrait mode while accessing the main drum machine interface, you'll see a message suggesting you rotate your device. We strongly recommend following this advice, as the landscape orientation provides a much better view of all sequencer steps and controls.

Note: This documentation page is fully responsive and can be viewed comfortably in either portrait or landscape orientation on your mobile device.

Documentation vs. Drum Machine: While this documentation page works in portrait mode, the main drum machine application requires landscape orientation for optimal usability. This difference allows you to read about features in portrait mode on your phone, but when you're ready to create beats, we recommend rotating to landscape mode.

When using a mobile device with the drum machine:

  • Touch and hold on a step, then drag to select multiple steps
  • Tap the track name to mute/unmute tracks
  • Use the left side area next to the step sequencer to scroll up and down with one finger

On smaller screens, some labels may be abbreviated (e.g., "Var" instead of "Variation") to save space.

FAQ

What is the TR-808?

The Roland TR-808 Rhythm Composer was a drum machine introduced in 1980 that became known for its distinctive electronic drum sounds. Despite being discontinued after only a few years, it became one of the most influential instruments in the development of hip-hop, electronic, and dance music.

How do accent steps work exactly?

When you activate an accent step, any drum sound that plays on that step will be played at 120% of its normal volume. Steps without accent play at 90% of their set volume. This creates a dynamic contrast that makes your beats sound more lively and less mechanical.

Why does the closed hi-hat cut off the open hi-hat?

This is how real hi-hats work! When you press the foot pedal on a real hi-hat (closed hi-hat), it physically stops the open hi-hat from ringing. The original TR-808 had a special "choke circuit" that recreated this behavior, and our drum machine does the same for authenticity.

Can I save my patterns between browser sessions?

Yes, use the Save Pattern button to download your pattern as a JSON file. You can then reload it later using the Load Pattern button. Your patterns are not automatically stored in your browser.

Does this work on all browsers?

The drum machine works best on modern browsers like Chrome, Firefox, Safari, and Edge. It requires HTML5 and Web Audio API support.

What if I hear no sound?

Some browsers require a user interaction (like a click) before they'll play audio. If you hear no sound, try clicking anywhere on the page first. Also check that your device's volume is turned up and not muted.

Back to Drum Machine