High Frequency Hearing Test & Mosquito Tone Generator

A professional, browser-based utility for testing the upper limits of human hearing and generating specific high-frequency tones. This application provides a clean, user-friendly interface for audio enthusiasts, students, and curious users.

Core Features

• Precise Frequency Control: A high-precision slider and numerical input field for frequencies ranging from 8,000Hz (8kHz) to 22,000Hz (22kHz).
• Playback Engine: Web Audio API implementation for low-latency, clear waveform generation.
• Sweep Functionality: An automated "Sweep" mode that gradually increases or decreases the frequency to help identify the exact point where sound becomes inaudible.
• Visual Feedback: A CSS-animated waveform visualizer that reacts to the generated tone.
• Safety Warnings: Integrated non-intrusive alerts regarding safe listening volumes to prevent hearing damage.

UI/UX Specification

• Layout:
  • Header: Simple, centered title and a brief "How to use" toggle.
  • Main Area: Large, circular interactive "Play/Pause" button. Current frequency display in a prominent, clean typography (e.g., Montserrat or Inter).
  • Controls: A wide slider range for frequency adjustment. Secondary buttons for "Toggle Sweep" and "Volume".
  • Results Section: A clean card that indicates the standard hearing range and where the current frequency sits relative to age-related hearing decline.
• Design Aesthetic:
  • Light Mode Only: Crisp white backgrounds (#ffffff), soft slate-gray text (#334155), and vibrant cerulean blue (#0284c7) for active elements.
  • Shadows: Soft, subtle drop shadows (box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1)) on interactive components.
  • Animations: Ease-in-out transitions for button states and frequency smooth-sliding interactions.

Developer Directives & Constraints

• Single File: All HTML, CSS, and Vanilla JavaScript must be contained in a single index.html file.
• No Persistence: Do not use localStorage or sessionStorage. All state (volume, current frequency, toggle settings) must be maintained in JavaScript variables.
• Sandboxed Environment: Ensure all functionality is compatible with a sandboxed iframe. Use custom div-based modals instead of alert() or confirm().
• External Libraries: You may utilize Tailwind CSS via CDN for styling and Google Fonts for typography. Keep dependencies minimal.
• Responsive: The UI must stack vertically on mobile devices and expand to a comfortable 600px-800px width container on desktop devices.
• Accessibility: Ensure high contrast ratios and clear labeling for all controls.