<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Real-Time Noise Reduction</title>
    <style>
        body { font-family: Arial, sans-serif; text-align: center; padding: 20px; }
        button { margin: 10px; padding: 10px; font-size: 16px; }
        .param-control { margin: 10px; }
    </style>
</head>
<body>
    <h1>Real-Time Noise Reduction: For Algoscale by Durgansh.</h1>
    <button id="startRaw">Start Raw Recording</button>
    <button id="startFiltered">Start Filtered Recording</button>
    <button id="stop" disabled>Stop & Download</button>
    <audio id="audio" controls></audio>
    
    <div class="param-control">
        <label>Filter Frequency: <input type="range" id="filterFreq" min="300" max="3000" value="1500"></label>
        <label>Compressor Threshold: <input type="range" id="compressorThreshold" min="-80" max="-20" value="-60"></label>
    </div>
    
    <script>
        let audioContext, mediaRecorder, recordedChunks = [];

        async function startRecording(withFilters) {
            recordedChunks = [];
            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
            audioContext = new (window.AudioContext || window.webkitAudioContext)();
            const source = audioContext.createMediaStreamSource(stream);
            
            let finalNode = source;
            if (withFilters) {
                const bandpassFilter = audioContext.createBiquadFilter();
                bandpassFilter.type = "bandpass";
                bandpassFilter.frequency.value = document.getElementById("filterFreq").value;
                bandpassFilter.Q.value = 1.5;
                
                const notchFilter = audioContext.createBiquadFilter();
                notchFilter.type = "notch";
                notchFilter.frequency.value = 60;
                notchFilter.Q.value = 10;
                
                const compressor = audioContext.createDynamicsCompressor();
                compressor.threshold.setValueAtTime(document.getElementById("compressorThreshold").value, audioContext.currentTime);
                compressor.knee.setValueAtTime(30, audioContext.currentTime);
                compressor.ratio.setValueAtTime(20, audioContext.currentTime);
                compressor.attack.setValueAtTime(0.002, audioContext.currentTime);
                compressor.release.setValueAtTime(0.5, audioContext.currentTime);
                
                source.connect(bandpassFilter);
                bandpassFilter.connect(notchFilter);
                notchFilter.connect(compressor);
                finalNode = compressor;
            }
            
            const mediaStream = audioContext.createMediaStreamDestination();
            finalNode.connect(mediaStream);
            
            mediaRecorder = new MediaRecorder(mediaStream.stream);
            mediaRecorder.ondataavailable = event => recordedChunks.push(event.data);
            mediaRecorder.onstop = () => {
                const blob = new Blob(recordedChunks, { type: 'audio/webm' });
                document.getElementById('audio').src = URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = URL.createObjectURL(blob);
                a.download = withFilters ? 'filtered_audio.webm' : 'raw_audio.webm';
                a.click();
            };
            
            mediaRecorder.start();
            document.getElementById('startRaw').disabled = true;
            document.getElementById('startFiltered').disabled = true;
            document.getElementById('stop').disabled = false;
        }

        document.getElementById('startRaw').addEventListener('click', () => startRecording(false));
        document.getElementById('startFiltered').addEventListener('click', () => startRecording(true));

        document.getElementById('stop').addEventListener('click', () => {
            mediaRecorder.stop();
            document.getElementById('startRaw').disabled = false;
            document.getElementById('startFiltered').disabled = false;
            document.getElementById('stop').disabled = true;
        });
    </script>
</body>
</html>
