Spaces:

awacke1
/

InstantASRforYouNow

Running

App Files Files Community

awacke1 commited on Nov 26, 2024

Commit

fe87343

verified ·

1 Parent(s): 621a9fb

Update index.html

Browse files

Files changed (1) hide show

index.html +176 -203

index.html CHANGED Viewed

@@ -1,252 +1,225 @@
 <!DOCTYPE html>
-<html>
 <head>
-    <title>Audio Recorder with Silence Detection</title>
     <style>
         body {
-            font-family: system-ui, sans-serif;
             max-width: 800px;
             margin: 0 auto;
             padding: 20px;
         }
-        .controls {
-            margin: 20px 0;
-        }
-        button {
-            padding: 10px 20px;
-            margin: 5px;
             cursor: pointer;
         }
-        #recordingsList {
-            margin-top: 20px;
-            border: 1px solid #ccc;
-            padding: 10px;
-            min-height: 100px;
         }
-        .recording-item {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
             padding: 10px;
-            border-bottom: 1px solid #eee;
         }
-        #timer {
-            font-size: 1.2em;
-            margin: 10px 0;
         }
-        #volumeMeter {
-            width: 300px;
             height: 20px;
-            border: 1px solid #ccc;
-            margin: 10px 0;
         }
-        #volumeBar {
             height: 100%;
             width: 0%;
             background-color: #4CAF50;
             transition: width 0.1s;
         }
     </style>
 </head>
 <body>
-    <h1>Audio Recorder with Silence Detection</h1>
-    <div class="controls">
-        <button id="startButton">Start Recording</button>
-        <button id="stopButton" disabled>Stop Recording</button>
     </div>
-    <div id="timer">00:00</div>
-    <div id="volumeMeter">
-        <div id="volumeBar"></div>
-    </div>
-    <div id="recordingsList"></div>
     <script>
-        let mediaRecorder;
-        let audioChunks = [];
-        let recordings = [];
-        let startTime;
-        let timerInterval;
-        let silenceTimeout;
-        let audioContext;
-        let analyser;
-        let isRecording = false;
-        let totalDuration = 0;
-        const SILENCE_THRESHOLD = -50; // dB
-        const SILENCE_DURATION = 1000; // 1 second
-        document.getElementById('startButton').addEventListener('click', startRecording);
-        document.getElementById('stopButton').addEventListener('click', stopRecording);
-        async function startRecording() {
-            try {
-                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-                setupAudioAnalysis(stream);
-                mediaRecorder = new MediaRecorder(stream);
-                audioChunks = [];
-                isRecording = true;
-                startTime = Date.now();
-                mediaRecorder.ondataavailable = event => {
-                    audioChunks.push(event.data);
-                };
-                mediaRecorder.onstop = () => {
-                    if (audioChunks.length > 0) {
-                        saveRecording();
-                    }
-                };
-                mediaRecorder.start();
-                updateUI(true);
-                startTimer();
-            } catch (err) {
-                console.error('Error:', err);
-                alert('Error accessing microphone');
             }
-        }
-        function setupAudioAnalysis(stream) {
-            audioContext = new AudioContext();
-            analyser = audioContext.createAnalyser();
-            const source = audioContext.createMediaStreamSource(stream);
-            source.connect(analyser);
-            analyser.fftSize = 2048;
-            const bufferLength = analyser.frequencyBinCount;
-            const dataArray = new Float32Array(bufferLength);
-            function checkAudioLevel() {
-                if (!isRecording) return;
-                analyser.getFloatTimeDomainData(dataArray);
-                let sum = 0;
-                for (let i = 0; i < bufferLength; i++) {
-                    sum += Math.abs(dataArray[i]);
                 }
-                const average = sum / bufferLength;
-                const db = 20 * Math.log10(average);
-                // Update volume meter
-                const volumeBar = document.getElementById('volumeBar');
-                const normalizedVolume = Math.max(0, (db + 90) / 90) * 100;
-                volumeBar.style.width = `${normalizedVolume}%`;
-                if (db < SILENCE_THRESHOLD) {
-                    if (!silenceTimeout) {
-                        silenceTimeout = setTimeout(() => {
-                            if (mediaRecorder.state === 'recording') {
-                                mediaRecorder.stop();
-                                startNewRecording();
-                            }
-                        }, SILENCE_DURATION);
-                    }
                 } else {
-                    if (silenceTimeout) {
-                        clearTimeout(silenceTimeout);
-                        silenceTimeout = null;
-                    }
-                    if (mediaRecorder.state === 'inactive' && isRecording) {
-                        startNewRecording();
-                    }
                 }
-                requestAnimationFrame(checkAudioLevel);
             }
-            checkAudioLevel();
-        }
-        function startNewRecording() {
-            if (isRecording) {
-                audioChunks = [];
-                mediaRecorder.start();
-            }
-        }
-        function stopRecording() {
-            isRecording = false;
-            if (mediaRecorder.state === 'recording') {
-                mediaRecorder.stop();
-            }
-            clearInterval(timerInterval);
-            updateUI(false);
-            if (audioContext) {
-                audioContext.close();
             }
-            if (silenceTimeout) {
-                clearTimeout(silenceTimeout);
             }
-        }
-        function saveRecording() {
-            const blob = new Blob(audioChunks, { type: 'audio/webm' });
-            const reader = new FileReader();
-            reader.onload = function() {
-                const base64String = reader.result.split(',')[1];
-                const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
-                const filename = `recording-${timestamp}.webm`;
-                recordings.push({
-                    filename,
-                    base64: base64String,
-                    duration: (Date.now() - startTime) / 1000
-                });
-                updateRecordingsList();
-            };
-            reader.readAsDataURL(blob);
-        }
-        function updateRecordingsList() {
-            const list = document.getElementById('recordingsList');
-            list.innerHTML = '';
-            recordings.forEach((recording, index) => {
-                const item = document.createElement('div');
-                item.className = 'recording-item';
-                const info = document.createElement('span');
-                info.textContent = `${recording.filename} (${recording.duration.toFixed(1)}s)`;
-                const downloadBtn = document.createElement('button');
-                downloadBtn.textContent = 'Download';
-                downloadBtn.onclick = () => downloadRecording(recording);
-                item.appendChild(info);
-                item.appendChild(downloadBtn);
-                list.appendChild(item);
-            });
-        }
-        function downloadRecording(recording) {
-            const link = document.createElement('a');
-            link.href = `data:audio/webm;base64,${recording.base64}`;
-            link.download = recording.filename;
-            document.body.appendChild(link);
-            link.click();
-            document.body.removeChild(link);
-        }
-        function startTimer() {
-            const timerElement = document.getElementById('timer');
-            const startTime = Date.now();
-            timerInterval = setInterval(() => {
-                const elapsed = Date.now() - startTime;
-                const seconds = Math.floor(elapsed / 1000);
-                const minutes = Math.floor(seconds / 60);
-                const remainingSeconds = seconds % 60;
-                timerElement.textContent = `${String(minutes).padStart(2, '0')}:${String(remainingSeconds).padStart(2, '0')}`;
-            }, 1000);
-        }
-        function updateUI(recording) {
-            document.getElementById('startButton').disabled = recording;
-            document.getElementById('stopButton').disabled = !recording;
         }
     </script>
 </body>
 </html>

 <!DOCTYPE html>
+<html lang="en">
 <head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Smart Audio Recorder</title>
     <style>
         body {
+            font-family: 'Arial', sans-serif;
             max-width: 800px;
             margin: 0 auto;
             padding: 20px;
+            background-color: #f5f5f5;
         }
+        .container {
+            background-color: white;
+            padding: 20px;
+            border-radius: 10px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        .record-button {
+            background-color: #ff4444;
+            color: white;
+            border: none;
+            padding: 15px 30px;
+            border-radius: 25px;
+            font-size: 18px;
             cursor: pointer;
+            transition: background-color 0.3s;
         }
+        .record-button.recording {
+            background-color: #cc0000;
+            animation: pulse 1.5s infinite;
         }
+        .status {
+            margin-top: 20px;
             padding: 10px;
+            border-radius: 5px;
+            background-color: #f8f9fa;
         }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.05); }
+            100% { transform: scale(1); }
         }
+        .meter {
             height: 20px;
+            background-color: #e9ecef;
+            border-radius: 10px;
+            margin: 20px 0;
+            overflow: hidden;
         }
+        .meter-fill {
             height: 100%;
             width: 0%;
             background-color: #4CAF50;
             transition: width 0.1s;
         }
+        .error {
+            color: #dc3545;
+            padding: 10px;
+            margin-top: 10px;
+            border: 1px solid #dc3545;
+            border-radius: 5px;
+            display: none;
+        }
     </style>
 </head>
 <body>
+    <div class="container">
+        <h1>Smart Audio Recorder</h1>
+        <p>Records when active audio is detected. Saves only recordings with more than 5 seconds of active audio.</p>
+        <button id="recordButton" class="record-button">Start Recording</button>
+        <div class="meter">
+            <div id="meterFill" class="meter-fill"></div>
+        </div>
+        <div id="status" class="status">Ready to record</div>
+        <div id="error" class="error"></div>
     </div>
     <script>
+        class SmartRecorder {
+            constructor() {
+                this.mediaRecorder = null;
+                this.audioContext = null;
+                this.analyser = null;
+                this.chunks = [];
+                this.activeAudioTime = 0;
+                this.lastActiveTime = 0;
+                this.isRecording = false;
+                this.silenceThreshold = 0.015;
+                this.minActiveAudio = 5; // seconds
+                this.recordButton = document.getElementById('recordButton');
+                this.status = document.getElementById('status');
+                this.meterFill = document.getElementById('meterFill');
+                this.errorDiv = document.getElementById('error');
+                this.recordButton.addEventListener('click', () => this.toggleRecording());
+                // Check if we're running on localhost or HTTPS
+                if (!(window.location.protocol === 'https:' || window.location.hostname === 'localhost' || window.location.hostname === '127.0.0.1')) {
+                    this.showError('This application requires HTTPS or localhost to access the microphone.');
+                    this.recordButton.disabled = true;
+                    return;
+                }
+                this.setupAudioContext();
+            }
+            showError(message) {
+                this.errorDiv.textContent = message;
+                this.errorDiv.style.display = 'block';
+                console.error(message);
             }
+            async setupAudioContext() {
+                try {
+                    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                    this.audioContext = new AudioContext();
+                    const source = this.audioContext.createMediaStreamSource(stream);
+                    this.analyser = this.audioContext.createAnalyser();
+                    this.analyser.fftSize = 2048;
+                    source.connect(this.analyser);
+                    this.errorDiv.style.display = 'none';
+                } catch (err) {
+                    this.showError(`Error accessing microphone: ${err.message}`);
+                    this.recordButton.disabled = true;
                 }
+            }
+            async toggleRecording() {
+                if (!this.isRecording) {
+                    await this.startRecording();
                 } else {
+                    await this.stopRecording();
                 }
             }
+            async startRecording() {
+                try {
+                    const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                    this.mediaRecorder = new MediaRecorder(stream);
+                    this.chunks = [];
+                    this.activeAudioTime = 0;
+                    this.lastActiveTime = Date.now();
+                    this.isRecording = true;
+                    this.mediaRecorder.ondataavailable = (e) => this.chunks.push(e.data);
+                    this.mediaRecorder.start();
+                    this.recordButton.classList.add('recording');
+                    this.recordButton.textContent = 'Stop Recording';
+                    this.status.textContent = 'Recording...';
+                    this.errorDiv.style.display = 'none';
+                    this.startAudioAnalysis();
+                } catch (err) {
+                    this.showError(`Error starting recording: ${err.message}`);
+                }
             }
+            async stopRecording() {
+                if (!this.mediaRecorder) return;
+                this.isRecording = false;
+                this.mediaRecorder.stop();
+                this.recordButton.classList.remove('recording');
+                this.recordButton.textContent = 'Start Recording';
+                this.mediaRecorder.onstop = async () => {
+                    if (this.activeAudioTime >= this.minActiveAudio) {
+                        const blob = new Blob(this.chunks, { type: 'audio/wav' });
+                        const url = URL.createObjectURL(blob);
+                        const link = document.createElement('a');
+                        link.href = url;
+                        link.download = `recording_${new Date().toISOString()}.wav`;
+                        link.click();
+                        this.status.textContent = `Saved recording with ${this.activeAudioTime.toFixed(1)} seconds of active audio`;
+                    } else {
+                        this.status.textContent = `Recording discarded: Only ${this.activeAudioTime.toFixed(1)} seconds of active audio (minimum ${this.minActiveAudio}s required)`;
+                    }
+                    this.meterFill.style.width = '0%';
+                };
             }
+            startAudioAnalysis() {
+                const analyzeFrame = () => {
+                    if (!this.isRecording) return;
+                    const dataArray = new Float32Array(this.analyser.frequencyBinCount);
+                    this.analyser.getFloatTimeDomainData(dataArray);
+                    const rms = Math.sqrt(dataArray.reduce((acc, val) => acc + val * val, 0) / dataArray.length);
+                    if (rms > this.silenceThreshold) {
+                        const now = Date.now();
+                        const timeDiff = (now - this.lastActiveTime) / 1000;
+                        this.activeAudioTime += timeDiff;
+                        this.lastActiveTime = now;
+                    }
+                    // Update meter
+                    const meterLevel = Math.min(100, (rms * 400));
+                    this.meterFill.style.width = `${meterLevel}%`;
+                    // Update status with active audio time
+                    if (this.isRecording) {
+                        this.status.textContent = `Recording... Active audio: ${this.activeAudioTime.toFixed(1)}s`;
+                    }
+                    requestAnimationFrame(analyzeFrame);
+                };
+                analyzeFrame();
+            }
         }
+        // Initialize recorder when page loads
+        window.addEventListener('load', () => {
+            new SmartRecorder();
+        });
     </script>
 </body>
 </html>