Technical Specification: Free Online Chromatic Guitar Tuner

Overview

A high-performance, browser-based guitar tuner utilizing the Web Audio API. This tool allows musicians to accurately tune their instruments by visualizing pitch deviation in real-time. The application is built as a single, lightweight HTML file for maximum performance and portability.

Core Functionality

• Real-time Pitch Detection: Uses an AudioContext and AnalyserNode to capture microphone input and compute the dominant frequency using an autocorrelation or FFT-based algorithm.
• Visual Feedback: A responsive, animated gauge indicating whether the current note is sharp, flat, or in tune.
• Chromatic Display: Displays the closest musical note (e.g., E2, A2, D3, G3, B3, E4) and the current frequency in Hertz (Hz).
• Cent Deviation Meter: A digital display showing the deviation from the target pitch in cents (-50 to +50).

Technical Constraints & Requirements

• Architecture: Must be a single, self-contained HTML file incorporating HTML5, CSS3, and Vanilla JavaScript.
• Web Audio API: Must be implemented using standard Web Audio API primitives (AudioContext, AnalyserNode, MediaStream).
• Storage Restrictions: Strictly prohibited from using localStorage, sessionStorage, or IndexedDB. All state must be handled in memory.
• Performance: Must maintain a high frame rate for the visualization (using requestAnimationFrame) to ensure zero-latency feedback.
• Browser Security: Must handle getUserMedia (microphone) permission requests gracefully with custom UI states (e.g., 'Awaiting Permission', 'Microphone Access Denied', 'Tuning Active').

User Interface Design

• Aesthetic: A premium, light-mode-only SaaS design. High-contrast typography, clean sans-serif fonts, and soft, modern shadows (box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1)).
• Palette:
  • Background: Off-white/Clean White (#f9fafb)
  • Primary Accent: Professional Blue (#2563eb)
  • Alert/Sharp Color: Muted Amber (#d97706)
  • In-Tune Indicator: Emerald Green (#059669)
• Layout:
  • Header: Simple, clear descriptive title.
  • Main Interaction Area: A large circular dial/gauge in the center for the needle.
  • Status Bar: Displays the detected note name, current frequency, and the 'Start Tuning' button.
  • Instructions: Minimalist instructions hidden behind a 'How to use' toggleable section.

UI Interactions & Animations

• Smooth Transitions: Use CSS transition properties (e.g., transition: transform 0.1s ease-out) for the needle gauge movement to prevent jitter.
• Micro-interactions: The background color of the main gauge should transition gently to the 'In-Tune' green color when the deviation is within +/- 2 cents.
• Responsiveness: The gauge must scale proportionally based on the viewport width (using vw units) to ensure it is always legible on both smartphones and desktop displays.

Developer Directives

1. No External Dependencies: Minimize reliance on external scripts. If needed, use standard CDNs for CSS frameworks like Tailwind CSS.
2. Clean Code: Use strict mode ('use strict';) and modular vanilla JS functions.
3. Sandboxed Compatibility: Ensure the app functions correctly within a sandboxed iframe (no popups, no storage).
4. Accessibility: Ensure all interactive elements are keyboard accessible and have proper aria-labels.