A real-time decibel meter web application built entirely with Vanilla JavaScript (no external libraries). It features a premium Modern Dark Theme and a customizable alert system that triggers a modal when the sound level exceeds your predefined threshold.
- Real-time Sound Tracking: Accurately measures the microphone's audio input level in real-time.
- Dynamic Gauge UI: A sleek SVG-based gauge that changes color based on the current sound intensity:
- 🟢 Green: Quiet to moderate (Safe zone)
- 🟡 Yellow: Moderately loud (Approaching threshold)
- 🔴 Red: Very loud (Threshold exceeded)
- Adjustable Threshold: Use the built-in slider to easily set the decibel limit (between 30 dB and 120 dB).
- Modal Alert System: Automatically triggers a warning modal if the sound exceeds your specified threshold, equipped with a cooldown mechanism to prevent spam.
- Glassmorphism Aesthetics: Modern, responsive UI with beautiful blurred background effects.
decibelmeter/
│
├── index.html # Main HTML layout, including the SVG gauge and modal
├── style.css # UI styling, Glassmorphism effects, and animations
├── script.js # Web Audio API logic, decibel calculation, and threshold checks
└── README.md # Project documentation
The decibel value is calculated using the formula 20 * log10(RMS) inside script.js. Because microphone sensitivity varies across different hardware, the calculated decibels may not perfectly align with a professional sound level meter out of the box.
If you want to calibrate the readings to match real-world sound levels, you can adjust the offset value in the following line of code:
let db = Math.round(dbFS + 100); // Change '100' to a different offset that best suits your microphone hardware