Technical Specification: Free Online BPM Detector & Tap Tempo Tool

Overview

A high-performance, browser-based tool that allows users to determine the tempo (Beats Per Minute) of a song using two methods: interactive tap-to-beat and real-time audio signal analysis via the device microphone.

Core Features

• Manual Tap Tempo: A large, responsive hit area for users to tap along to the beat. Includes moving average calculation for high precision.
• Live Audio Analysis: Integration with the Web Audio API to detect frequency peaks from the microphone input to automatically estimate BPM.
• Visual Metronome: A CSS-animated pulse indicator that provides visual feedback synchronized with the detected tempo.
• Precise Readout: Large, high-contrast display for the calculated BPM, updated in real-time.
• Confidence Meter: A visual bar representing the reliability of the current audio analysis result.
• Zero-Storage Architecture: The app maintains state entirely in-memory. No history or user settings are persisted.

UI/UX Design

• Layout: Centered, card-based interface on a clean, light-grey background.
• Typography: Modern, sans-serif fonts (e.g., 'Inter' or system fonts) with excellent readability.
• Color Palette:
  • Background: #f8fafc (Cool Gray 50)
  • Card Background: #ffffff
  • Primary Action (Tap Area): #2563eb (Blue 600)
  • Secondary/Reset: #64748b (Slate 500)
  • Accent (Visualizer Pulse): #ef4444 (Red 500)
• Transitions: Smooth easing functions for the BPM numerical readout transitions and the heartbeat pulse animation.

Technical Implementation Directives

• Framework: Pure Vanilla JavaScript. No React/Vue/Angular.
• Audio Handling: Use AudioContext and AnalyserNode for microphone processing. Ensure users must explicitly grant permission before audio capture starts.
• Performance: Use requestAnimationFrame for the visual pulse and performance.now() for high-resolution timing of tap inputs.
• Responsiveness: Ensure the tap area is large enough for mobile touch devices and keyboard interaction (Spacebar) is enabled for desktop users.
• Constraints:
  • NO localStorage, sessionStorage, or cookies.
  • NO external trackers or analytics pixels.
  • All dependencies must be loaded via CDN.
  • Must be contained in a single HTML file including CSS and JS tags.
  • Must be sandbox-compatible (avoiding alert() or prompt(); use DOM-based modals).