Free Online Guitar Amplifier Simulator Specification

Overview

A high-performance, browser-based guitar amplifier and distortion simulator built using the Web Audio API. This tool allows musicians to plug in their instruments (via audio interface) and shape their tone using virtual gain, overdrive, and equalization stages with minimal latency.

Core Features

• Input Management: Real-time microphone/line-in selection with visual peak metering.
• Signal Chain:
  • Gain Stage: Input preamp control for driving the signal.
  • Distortion Module: Adjustable drive level to emulate tube saturation.
  • Equalization: 3-band EQ (Low, Mid, High) for frequency shaping.
  • Master Output: Output volume control to prevent clipping.
• Visual Feedback: A real-time <canvas> based oscilloscope visualizing the waveform before and after processing.
• Bypass Mode: A master toggle to hear the dry signal vs. the processed effect.

User Interface Design

• Aesthetic: Clean, minimalist "Light Mode" design. Use a white-on-light-gray color scheme with vibrant accent colors (Electric Blue for active states, Sunset Orange for clipping warnings).
• Components:
  • Header: Simple, clear descriptive title with a "How to use" toggle.
  • Knobs: Custom-styled circular dial components using CSS transforms for smooth interaction.
  • Oscilloscope: A centered, high-contrast canvas box providing instant visual feedback on audio intensity.
• Layout:
  • Mobile: Single-column stack with scrollable control rows.
  • Desktop: Two-column grid with controls on the left and the real-time visualizer occupying the right panel.

Technical Constraints & Requirements

• Frameworks: Pure Vanilla JS, HTML5, and CSS3. Use Tailwind CSS via CDN for styling utility classes.
• Audio Engine: Utilize AudioContext, GainNode, BiquadFilterNode, and WaveShaperNode for distortion.
• Sandbox Safety:
  • No Storage: Absolutely NO localStorage, sessionStorage, or cookies. The application must function purely in-memory.
  • No Popups: Do not use alert(), prompt(), or confirm(). All feedback must be rendered as a custom UI overlay.
  • Iframe Compatibility: Code must assume it is running in a null-origin iframe. Avoid accessing window.top or referencing cookies/origin-based storage.
• Responsiveness: Use CSS Flexbox/Grid to ensure the interface is usable on mobile devices, tablets, and wide-screen monitors.
• Animations: Use CSS transitions (transition: all 0.2s ease-in-out) for all knob and slider adjustments to provide a premium, tactile feel.

Color Palette

• Background: #F8FAFC (Slate 50)
• Surface/Card: #FFFFFF (White)
• Primary Accents: #3B82F6 (Blue 500)
• Warning Accents: #F59E0B (Amber 500)
• Text/Labels: #1E293B (Slate 800)
• Borders/Dividers: #E2E8F0 (Slate 200)