Technical Specification: Browser-Based Noise Generation Engine

Overview

A high-performance, responsive, single-file web application designed to generate synthesized white, pink, and brown noise for ambient sound masking. Built entirely with the Web Audio API for low latency and high audio fidelity.

Core Features

• Audio Engine: Real-time synthesis of White, Pink, and Brown noise profiles.
• Audio Visualizer: A lightweight <canvas> element displaying the real-time frequency spectrum (FFT) of the active noise profile.
• Interactive Controls: Play/Pause toggle, type selector (White/Pink/Brown), and a smooth logarithmic volume slider.
• Session Timer: A visual countdown timer (custom UI, not system alert) to automatically pause audio after a set study session (e.g., 25, 50, 90 minutes).
• Zero-Storage Architecture: Operates entirely in volatile memory. No browser storage (cookies, local storage, etc.) is utilized.

User Interface (UI) Design

• Aesthetic: Modern, clean, "SaaS-style" light-mode design. Use a palette of soft grays (#F8FAFC, #F1F5F9), white (#FFFFFF), and a professional accent color (e.g., #4F46E5 - Indigo or #0284C7 - Sky Blue) for primary buttons.
• Layout:
  • Header: Simple, descriptive title and a short "How to use" toggle link that expands a modal.
  • Main: A central hero card containing the large Play/Pause icon, the active sound type label, and the volume range slider.
  • Visualization: A subtle, semi-transparent waveform/frequency visualizer placed behind the main controls.
  • Timer: A dedicated section to select time duration and start a session.
• Transitions: Apply transition: all 0.3s ease; to all interactive elements for button hover, click, and volume changes.

Technical Implementation Constraints

• File Structure: Single index.html file containing all CSS (<style>) and JavaScript (<script>).
• Web Audio API:
  • Use AudioContext for synthesis.
  • Implement White Noise via AudioBuffer with random values.
  • Implement Pink/Brown noise via BiquadFilterNode chains (e.g., filtering white noise to generate 1/f or 1/f^2 curves).
  • Crucial: Ensure audioCtx.resume() is triggered by a user-initiated DOM event (e.g., clicking 'Play') to comply with browser autoplay policies.
• Responsive Behavior: Ensure the interface is mobile-first. Use CSS Flexbox/Grid to stack elements vertically on mobile and horizontally on larger displays.
• Visual Feedback: The interface must show active visual states (e.g., button fills, shadow intensity changes) when audio is playing.

Developer Instructions

1. No External Dependencies: Minimize CDN usage. Use vanilla JavaScript for all audio logic.
2. Performance: Optimize the requestAnimationFrame loop for the visualizer to avoid CPU spikes.
3. Accessibility: All buttons must have aria-label attributes. Ensure sufficient contrast ratios for readability.
4. Sandboxing: The app must be fully functional even if cookies are disabled by the browser or if running in a strict iframe sandbox.