Retro Drum Kit 🥁

A retro synthwave-styled drum kit application with Web Audio API sound generation and visual feedback.

🎯 What We Built

This project is a fully functional drum kit that:

• Generates synthetic drum sounds using Web Audio API
• Falls back to HTML5 Audio if sound files are available
• Features a retro synthwave aesthetic with pink and gold colors
• Includes a visual console that displays key presses in real-time
• Provides pulse effects and animations on button press

🚀 How It Works

Sound Generation

The application uses Web Audio API to generate synthetic drum sounds programmatically:

• Toms (W, A, S, D): Rich harmonic sounds with pitch bending
• Snare (J): Noise-based with tone overlay
• Hi-Hat (K): High-frequency noise burst
• Kick Bass (L): Low-frequency punch with frequency sweep
• Crash (M): Cymbal-like sound with noise and tone
• Clap (N): Percussive noise burst

Fallback System

1. First: Tries to load MP3 files from sounds/ folder
2. If files missing: Automatically generates sounds using Web Audio API
3. Works immediately: No external files required!

Key Components

Global Constants and Variables (Top of script.js)

All global constants and variables are organized at the top of script.js for easy reference:

// ============================================
// GLOBAL CONSTANTS AND VARIABLES
// ============================================

// Web Audio API Context
let audioContext;
let audioBuffers = {};
let useGeneratedSounds = {}; // Track which sounds need to be generated

// Sound files mapping
const soundFiles = {
    'w': 'sounds/tom-1.mp3',
    'a': 'sounds/tom-2.mp3',
    's': 'sounds/tom-3.mp3',
    'd': 'sounds/tom-4.mp3',
    'j': 'sounds/snare.mp3',
    'k': 'sounds/open-hihat.mp3',
    'l': 'sounds/kick-bass.mp3',
    'm': 'sounds/crash.mp3',
    'n': 'sounds/clap.mp3'
};

// Visual Console Variables
let consoleDisplay;
let consoleLogs;
const maxConsoleLogs = 10; // Maximum number of logs to display
let verboseConsole = true; // Toggle for verbose browser console output

Note: All global variables and constants are located at the top of the JavaScript file for better code organization and maintainability.

Sound Playback Flow

1. User presses key or clicks button
2. makeSound(key) function is called
3. Checks for audio buffer (from file) or generates sound
4. Plays sound through Web Audio API
5. Updates visual console and browser console (if verbose enabled)

Visual Features

• Pulse Effects: Expanding rings and glowing shadows on press
• Color Changes: Keys change from pink to gold when pressed
• Console Display: Real-time log of all key presses with timestamps
• Console Refresh: Clear button (🔄) to reset console logs
• Retro Styling: Animated gradients, grid overlay, neon glows

📁 Project Structure

drum-sound/
├── index.html          # Main HTML structure
├── styles.css          # Retro synthwave styling
├── script.js           # Sound generation and event handling
├── sounds/             # Optional MP3 sound files
│   ├── tom-1.mp3
│   ├── tom-2.mp3
│   ├── tom-3.mp3
│   ├── tom-4.mp3
│   ├── snare.mp3
│   ├── open-hihat.mp3
│   ├── kick-bass.mp3
│   ├── crash.mp3
│   └── clap.mp3
├── retro-synthwave/    # Synthwave melody project
│   ├── index.html
│   ├── styles.css
│   └── script.js
├── README.md           # This file
├── .gitignore          # Git ignore rules
└── LICENSE             # License file

🎮 Usage

Controls

• Keyboard: Press keys W, A, S, D, J, K, L, M, N to play sounds
• Mouse: Click the drum pad buttons
• Verbose Console Toggle: Enable/disable detailed browser console logs (checkbox above the drum kit)
• Console Refresh Button: Click the 🔄 button in the console header to clear all console logs

Verbose Console Control

The Verbose Browser Console toggle allows you to control the level of detail in the browser's developer console:

• Enabled (checked): Shows detailed styled console logs for each key press, including:

  • Timestamp
  • Key pressed
  • Sound name
  • Color change information
  • Styled output with colors matching the retro theme

• Disabled (unchecked): No console output to the browser console (visual console still works)

Note: The visual console display (on the page) always shows all key presses regardless of the verbose toggle setting. This toggle only affects the browser's developer console output.

Features

• Visual Console: Shows all key presses with timestamp, key, sound name, and color change
• Browser Console: Detailed styled logs (can be toggled on/off via checkbox)
• Responsive Design: Works on desktop and mobile devices

🛠️ Technologies Used

• HTML5: Structure and semantic markup
• CSS3: Advanced styling with animations, gradients, and transitions
• JavaScript (ES6+): Web Audio API, event handling, DOM manipulation
• Web Audio API: Real-time sound synthesis and playback

📱 Responsive Design

• Desktop (>800px): Side-by-side layout with console next to drum kit
• Tablet/Mobile (≤800px): Stacked layout with console below drum kit

🎨 Color Scheme

• Primary Pink: #ff6b9d - Main accent color
• Gold: #f8b500 - Pressed state and highlights
• Dark Background: #0a0a1a, #1a0a2e, #16213e, #0f3460 - Gradient background

🔧 Browser Compatibility

• Modern browsers with Web Audio API support
• Chrome, Firefox, Safari, Edge (latest versions)
• Mobile browsers (iOS Safari, Chrome Mobile)

📝 Notes

• Sound files in sounds/ folder are optional
• If files are missing, synthetic sounds are automatically generated
• All sounds are generated in real-time using Web Audio API
• Verbose Console Toggle: Use the checkbox to control browser console output
  • When enabled: Detailed logs appear in browser console with styled formatting
  • When disabled: No browser console output (visual console on page still works)
  • Default state: Enabled (checked)

🎵 Related Project

See retro-synthwave/ for the synthwave melody player with automatic playback and speed control.