script.js

const startBtn = document.getElementById('start-btn');
const dbValue = document.getElementById('db-value');
const thresholdSlider = document.getElementById('threshold-slider');
const thresholdDisplay = document.getElementById('threshold-display');
const gaugeValuePath = document.querySelector('.gauge-value');
const alertModal = document.getElementById('alert-modal');
const closeModalBtn = document.getElementById('close-modal-btn');
const modalThresholdSpan = document.getElementById('modal-threshold');
const micSelect = document.getElementById('mic-select');

async function populateMicList() {
    try {
        const devices = await navigator.mediaDevices.enumerateDevices();
        const audioDevices = devices.filter(device => device.kind === 'audioinput');
        
        // Save currently selected value to restore it
        const selectedValue = micSelect.value;
        
        micSelect.innerHTML = '';
        
        if (audioDevices.length === 0) {
            const option = document.createElement('option');
            option.value = "";
            option.text = "No microphone found";
            micSelect.appendChild(option);
            return;
        }

        audioDevices.forEach((device, index) => {
            const option = document.createElement('option');
            option.value = device.deviceId;
            option.text = device.label || `Microphone ${index + 1}`;
            micSelect.appendChild(option);
        });
        
        // Restore selection if possible
        if (selectedValue && Array.from(micSelect.options).some(opt => opt.value === selectedValue)) {
            micSelect.value = selectedValue;
        }
    } catch (err) {
        console.error('Error fetching devices:', err);
    }
}

// Request device list on load
populateMicList();

let audioContext;
let analyser;
let microphone;
let dataArray;
let isRecording = false;
let animationId;
let currentThreshold = parseInt(thresholdSlider.value);
let isModalOpen = false;

// Initialize SVG Gauge
// Path is: M 10,45 A 40,40 0 0,1 90,45
// This is exactly a half circle with radius 40
const gaugeCircumference = Math.PI * 40;
gaugeValuePath.style.strokeDasharray = gaugeCircumference;
gaugeValuePath.style.strokeDashoffset = gaugeCircumference;

thresholdSlider.addEventListener('input', (e) => {
    currentThreshold = parseInt(e.target.value);
    thresholdDisplay.textContent = currentThreshold;
    modalThresholdSpan.textContent = currentThreshold;
});

startBtn.addEventListener('click', async () => {
    if (isRecording) {
        stopMicrophone();
    } else {
        await startMicrophone();
    }
});

closeModalBtn.addEventListener('click', () => {
    alertModal.classList.remove('show');
    // Cooldown before allowing it to open again to prevent instant re-trigger
    setTimeout(() => {
        isModalOpen = false;
    }, 2000);
});

async function startMicrophone() {
    try {
        const selectedDeviceId = micSelect.value;
        const constraints = {
            audio: selectedDeviceId ? { deviceId: { exact: selectedDeviceId } } : true
        };
        const stream = await navigator.mediaDevices.getUserMedia(constraints);
        
        // Re-populate list to get real device names if they were hidden before permission
        populateMicList();
        audioContext = new (window.AudioContext || window.webkitAudioContext)();
        analyser = audioContext.createAnalyser();
        analyser.fftSize = 1024;
        
        microphone = audioContext.createMediaStreamSource(stream);
        microphone.connect(analyser);
        
        dataArray = new Uint8Array(analyser.frequencyBinCount);
        isRecording = true;
        startBtn.textContent = 'Stop Microphone';
        startBtn.classList.add('active');
        
        updateMeter();
    } catch (err) {
        console.error('Error accessing microphone:', err);
        alert('Please allow microphone access to use the decibel meter. Note: Microphone API usually requires HTTPS or localhost.');
    }
}

function stopMicrophone() {
    isRecording = false;
    cancelAnimationFrame(animationId);
    
    if (audioContext && audioContext.state !== 'closed') {
        audioContext.close();
    }
    
    startBtn.textContent = 'Start Microphone';
    startBtn.classList.remove('active');
    updateDisplay(0);
}

function updateMeter() {
    if (!isRecording) return;
    
    // Get time-domain data to calculate RMS (Root Mean Square)
    analyser.getByteTimeDomainData(dataArray);
    
    let sumSquares = 0;
    for (let i = 0; i < dataArray.length; i++) {
        // Convert byte value (0-255) to a normalized range (-1 to 1)
        let normalizedValue = (dataArray[i] - 128) / 128.0;
        sumSquares += normalizedValue * normalizedValue;
    }
    
    let rms = Math.sqrt(sumSquares / dataArray.length);
    
    // Convert RMS to Decibels
    // Adding 100 is an approximation to map dBFS to a positive dB range for UI visualization
    let dbFS = 20 * Math.log10(Math.max(rms, 0.0001));
    let db = Math.round(dbFS + 100);
    
    // Clamp values between 0 and 120
    db = Math.max(0, Math.min(120, db));
    
    // Smooth out the UI updates slightly
    let currentDbText = parseInt(dbValue.textContent) || 0;
    let smoothDb = Math.round(currentDbText + (db - currentDbText) * 0.3);
    
    updateDisplay(smoothDb);
    checkThreshold(smoothDb);
    
    animationId = requestAnimationFrame(updateMeter);
}

function updateDisplay(db) {
    dbValue.textContent = db;
    
    // Update gauge path (offset goes from circumference to 0)
    let fillPercentage = Math.min(db / 120, 1);
    let offset = gaugeCircumference - (fillPercentage * gaugeCircumference);
    gaugeValuePath.style.strokeDashoffset = offset;
    
    // Update colors based on threshold
    gaugeValuePath.classList.remove('warn', 'danger');
    if (db >= currentThreshold) {
        gaugeValuePath.classList.add('danger');
    } else if (db >= currentThreshold * 0.8) {
        gaugeValuePath.classList.add('warn');
    }
}

function checkThreshold(db) {
    if (db >= currentThreshold && !isModalOpen) {
        showModal();
    }
}

function showModal() {
    isModalOpen = true;
    alertModal.classList.add('show');
}