Spaces:

awacke1
/

InstantASRforYouNow

Running

App Files Files Community

awacke1 commited on Nov 26, 2024

Commit

5454980

verified ·

1 Parent(s): 1989ff8

Create index.html

Browse files

Files changed (1) hide show

index.html +229 -0

index.html ADDED Viewed

	@@ -0,0 +1,229 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Audio Recorder with Silence Detection</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 20px auto;
+            padding: 20px;
+            background-color: #f5f5f5;
+        }
+        .container {
+            background-color: white;
+            padding: 20px;
+            border-radius: 8px;
+            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+        }
+        button {
+            background-color: #4CAF50;
+            color: white;
+            padding: 10px 20px;
+            border: none;
+            border-radius: 4px;
+            cursor: pointer;
+            margin: 5px;
+        }
+        button:disabled {
+            background-color: #cccccc;
+            cursor: not-allowed;
+        }
+        #status {
+            margin: 10px 0;
+            padding: 10px;
+            border-radius: 4px;
+        }
+        #visualizer {
+            width: 100%;
+            height: 100px;
+            background-color: #f0f0f0;
+            margin: 10px 0;
+        }
+        .recording {
+            background-color: #ffebee !important;
+        }
+    </style>
+</head>
+<body>
+    <div class="container">
+        <h1>Audio Recorder</h1>
+        <div id="status">Ready to record</div>
+        <canvas id="visualizer"></canvas>
+        <div>
+            <button id="recordButton">Start Recording</button>
+            <button id="playButton" disabled>Play Recording</button>
+        </div>
+        <audio id="audioPlayer" controls style="display: none; margin-top: 20px;"></audio>
+    </div>
+    <script>
+        let mediaRecorder;
+        let audioChunks = [];
+        let audioContext;
+        let analyser;
+        let silenceTimeout;
+        let isRecording = false;
+        let recordingStartTime;
+        const recordButton = document.getElementById('recordButton');
+        const playButton = document.getElementById('playButton');
+        const status = document.getElementById('status');
+        const audioPlayer = document.getElementById('audioPlayer');
+        const canvas = document.getElementById('visualizer');
+        const canvasCtx = canvas.getContext('2d');
+        // Set up canvas size
+        canvas.width = canvas.offsetWidth;
+        canvas.height = canvas.offsetHeight;
+        recordButton.addEventListener('click', toggleRecording);
+        playButton.addEventListener('click', playRecording);
+        async function toggleRecording() {
+            if (!isRecording) {
+                startRecording();
+            } else {
+                stopRecording();
+            }
+        }
+        async function startRecording() {
+            try {
+                const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+                audioContext = new AudioContext();
+                analyser = audioContext.createAnalyser();
+                const source = audioContext.createMediaStreamSource(stream);
+                source.connect(analyser);
+                mediaRecorder = new MediaRecorder(stream);
+                audioChunks = [];
+                mediaRecorder.ondataavailable = (event) => {
+                    audioChunks.push(event.data);
+                };
+                mediaRecorder.onstop = () => {
+                    const audioBlob = new Blob(audioChunks, { type: 'audio/wav' });
+                    const audioUrl = URL.createObjectURL(audioBlob);
+                    audioPlayer.src = audioUrl;
+                    audioPlayer.style.display = 'block';
+                    playButton.disabled = false;
+                    // Auto-download the file
+                    const timestamp = new Date().toISOString().replace(/[:.]/g, '-');
+                    const link = document.createElement('a');
+                    link.href = audioUrl;
+                    link.download = `recording-${timestamp}.wav`;
+                    link.click();
+                };
+                mediaRecorder.start();
+                isRecording = true;
+                recordingStartTime = Date.now();
+                status.textContent = 'Recording...';
+                recordButton.textContent = 'Stop Recording';
+                document.querySelector('.container').classList.add('recording');
+                // Start silence detection
+                detectSilence();
+                // Start visualizer
+                drawVisualizer();
+            } catch (err) {
+                console.error('Error:', err);
+                status.textContent = 'Error: ' + err.message;
+            }
+        }
+        function detectSilence() {
+            const bufferLength = analyser.frequencyBinCount;
+            const dataArray = new Uint8Array(bufferLength);
+            function checkAudioLevel() {
+                if (!isRecording) return;
+                analyser.getByteFrequencyData(dataArray);
+                const average = dataArray.reduce((a, b) => a + b) / bufferLength;
+                if (average < 5) { // Silence threshold
+                    if (!silenceTimeout) {
+                        silenceTimeout = setTimeout(() => {
+                            if (Date.now() - recordingStartTime > 3000) { // Minimum 3 seconds
+                                stopRecording();
+                            }
+                        }, 3000); // Wait 3 seconds of silence
+                    }
+                } else {
+                    if (silenceTimeout) {
+                        clearTimeout(silenceTimeout);
+                        silenceTimeout = null;
+                    }
+                }
+                requestAnimationFrame(checkAudioLevel);
+            }
+            checkAudioLevel();
+        }
+        function drawVisualizer() {
+            if (!isRecording) return;
+            const bufferLength = analyser.frequencyBinCount;
+            const dataArray = new Uint8Array(bufferLength);
+            analyser.getByteTimeDomainData(dataArray);
+            canvasCtx.fillStyle = '#f0f0f0';
+            canvasCtx.fillRect(0, 0, canvas.width, canvas.height);
+            canvasCtx.lineWidth = 2;
+            canvasCtx.strokeStyle = '#4CAF50';
+            canvasCtx.beginPath();
+            const sliceWidth = canvas.width * 1.0 / bufferLength;
+            let x = 0;
+            for (let i = 0; i < bufferLength; i++) {
+                const v = dataArray[i] / 128.0;
+                const y = v * canvas.height / 2;
+                if (i === 0) {
+                    canvasCtx.moveTo(x, y);
+                } else {
+                    canvasCtx.lineTo(x, y);
+                }
+                x += sliceWidth;
+            }
+            canvasCtx.lineTo(canvas.width, canvas.height / 2);
+            canvasCtx.stroke();
+            requestAnimationFrame(drawVisualizer);
+        }
+        function stopRecording() {
+            if (mediaRecorder && mediaRecorder.state !== 'inactive') {
+                mediaRecorder.stop();
+                mediaRecorder.stream.getTracks().forEach(track => track.stop());
+                isRecording = false;
+                status.textContent = 'Recording stopped';
+                recordButton.textContent = 'Start Recording';
+                document.querySelector('.container').classList.remove('recording');
+                if (silenceTimeout) {
+                    clearTimeout(silenceTimeout);
+                    silenceTimeout = null;
+                }
+            }
+        }
+        function playRecording() {
+            audioPlayer.play();
+        }
+    </script>
+</div>
+</body>
+</html>