Technical Specification: BPM to Millisecond Timing Utility

Overview

A high-performance, browser-based tool designed for DJs, producers, and live sound engineers to calculate millisecond timings derived from specific BPM values. The tool provides instant conversions for musical divisions and sample rate alignment.

Core Features

• Live Conversion Engine: Instant calculation of millisecond timings as the user types a BPM value.
• Musical Subdivision Table: Pre-calculated list showing 1/8, 1/4, 1/2, 1, 2, and 4 bar lengths in milliseconds.
• Sample Rate Display: Calculates the number of samples per beat based on user-selectable sample rates (44.1kHz, 48kHz, 96kHz).
• Copy-to-Clipboard: One-click copy functionality for all result fields for quick integration into DAW projects.
• Clipboard Feedback: Subtle UI feedback (e.g., text color change or temporary tooltip) to indicate successful copying.

User Interface Design

• Aesthetic: Modern SaaS-style. Clean whitespace, soft rounded corners (8px), and high-contrast typography.
• Color Palette:
  • Background: #f8fafc (Cool gray)
  • Cards: #ffffff
  • Primary Accent: #2563eb (Vibrant Blue)
  • Text: #1e293b (Dark Slate)
  • Borders/Dividers: #e2e8f0
• Layout:
  • Header: Simple title, no unnecessary fluff.
  • Control Section: Centered container with a prominent BPM numeric input field.
  • Results Section: A grid layout displaying the calculated values in clearly labeled cards. Each card contains the division type (e.g., "1/4 Note") and the value in milliseconds.

Technical Implementation Constraints

• Single File: All logic, structure, and style must reside in one HTML file.
• Dependencies: Use Tailwind CSS via CDN for styling. Use Vanilla JS for calculation logic.
• State Management: All calculations occur in-memory. No usage of localStorage, sessionStorage, or cookies.
• Performance: Use an input event listener on the BPM field to ensure real-time responsiveness.
• Responsiveness: Use Flexbox and Grid to stack result cards on mobile and display them in a grid on desktop.
• Accessibility: Ensure high contrast for text and descriptive labels for all input fields (ARIA labels).

Logic & Math Reference

• Millisecond Calculation: ms = (60,000 / BPM) * (beats_per_bar)
• Sample Calculation: samples = (SampleRate / (BPM / 60))

Developer Directives

1. Use smooth CSS transitions for interaction (e.g., hover effects on buttons, subtle entry animations for results).
2. Strictly avoid any external storage APIs.
3. Ensure the UI handles mobile touch targets properly (minimum 44x44px for buttons).
4. If a calculation results in a decimal, round to two decimal places for clarity.