Free Online Drum Machine & Step Sequencer Specification

Overview

A high-fidelity, client-side browser application that allows users to create rhythmic patterns using a traditional 16-step grid sequencer. The application uses the Web Audio API for low-latency sound synthesis and sample playback.

Core Features

• 16-Step Grid Sequencer: A toggle-based grid interface for placing drum hits (Kick, Snare, Closed Hi-Hat, Open Hi-Hat, Clap).
• Tempo Control: Precise BPM (beats per minute) adjustment slider (60–200 BPM).
• Playback Controls: Play, Pause, and Stop functions with a visual playhead indicator that tracks the current step.
• Mixer Panel: Individual volume sliders for each instrument channel to balance the mix.
• Global Controls: Clear pattern button and Randomize pattern generator for inspiration.
• Audio Engine: Low-latency scheduling using AudioContext for precise timing.

UI/UX Layout

• Header: Contains the app title, current BPM display, and global Play/Pause controls.
• Main Sequencer Grid: A central horizontal grid where rows represent instruments and columns represent steps (1-16). Active steps are highlighted with vibrant, high-contrast visual states.
• Sidebar/Control Area: Dedicated section for instrument volume controls, swing percentage settings, and global playback utility buttons.
• Design Aesthetic: Clean, professional "SaaS" aesthetic. Light theme only. Soft drop shadows for controls, high-contrast borders for the sequencer grid.

Color Palette

• Background: #F8FAFC (Cool white)
• Grid Background: #FFFFFF (Pure white)
• Accent Color: #3B82F6 (Vibrant Blue - for active steps and playback controls)
• Secondary Accent: #EF4444 (Vibrant Red - for stop/delete actions)
• Text/Grid Lines: #475569 (Slate Gray for legibility)

Technical Constraints & Implementation Rules

• Single-File Architecture: All CSS, HTML, and Vanilla JavaScript must be contained in one index.html file.
• No Persistent Storage: Do not use localStorage, sessionStorage, or cookies. Maintain state using JavaScript variables only. State will reset on page refresh.
• Audio Management: Use the Web Audio API for all sound processing. Do not use <audio> tags for triggering drum samples to avoid latency issues.
• Responsive Design: Ensure the grid is scrollable on small screens and tap-targets are large enough for mobile interaction.
• Interactions: Use CSS transitions for button states and the playhead movement to ensure a smooth, premium feel.
• Browser Compatibility: Ensure the AudioContext is resumed on the first user interaction (click/touch) to satisfy browser autoplay policies.