Update app.py

app.py

@@ -6,11 +6,16 @@ from io import BytesIO
 from tempfile import NamedTemporaryFile
 import numpy as np
 
-# JavaScript for recording audio
 def record_audio_js():
     js_code = """
     <script>
+    function logMessage(message) {
+        console.log(message);
+    }
+
     async function recordAudio() {
+        logMessage('Starting audio recording...');
+        
         const div = document.createElement('div');
         const audio = document.createElement('audio');
         const startButton = document.createElement('button');
@@ -22,38 +27,45 @@ def record_audio_js():
         div.appendChild(startButton);
         div.appendChild(audio);
 
-        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
-        let recorder = new MediaRecorder(stream);
-        audio.style.display = 'block';
-        audio.srcObject = stream;
-        audio.controls = true;
-        audio.muted = true;
-
-        startButton.onclick = async () => {
-            startButton.disabled = true;
-            stopButton.style.display = 'inline';
-            recorder.start();
-        };
-
-        stopButton.onclick = async () => {
-            stopButton.disabled = true;
-            recorder.stop();
-        };
-
-        let chunks = [];
-        recorder.ondataavailable = (event) => chunks.push(event.data);
-        recorder.onstop = async () => {
-            const blob = new Blob(chunks, { type: 'audio/wav' });
-            const reader = new FileReader();
-            reader.onloadend = function () {
-                const base64String = btoa(new Uint8Array(reader.result).reduce((data, byte) => data + String.fromCharCode(byte), ''));
-                window.parent.postMessage({func: "receiveAudio", data: base64String}, "*");
+        try {
+            const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+            let recorder = new MediaRecorder(stream);
+            audio.style.display = 'block';
+            audio.srcObject = stream;
+            audio.controls = true;
+            audio.muted = true;
+
+            startButton.onclick = async () => {
+                logMessage('Start button clicked');
+                startButton.disabled = true;
+                stopButton.style.display = 'inline';
+                recorder.start();
+            };
+
+            stopButton.onclick = async () => {
+                logMessage('Stop button clicked');
+                stopButton.disabled = true;
+                recorder.stop();
             };
-            reader.readAsArrayBuffer(blob);
-        };
 
-        stream.getAudioTracks()[0].stop();
-        div.remove();
+            let chunks = [];
+            recorder.ondataavailable = (event) => chunks.push(event.data);
+            recorder.onstop = async () => {
+                logMessage('Recording stopped');
+                const blob = new Blob(chunks, { type: 'audio/wav' });
+                const reader = new FileReader();
+                reader.onloadend = function () {
+                    const base64String = btoa(new Uint8Array(reader.result).reduce((data, byte) => data + String.fromCharCode(byte), ''));
+                    window.parent.postMessage({ func: "receiveAudio", data: base64String }, "*");
+                };
+                reader.readAsArrayBuffer(blob);
+            };
+
+            stream.getAudioTracks()[0].stop();
+            div.remove();
+        } catch (error) {
+            logMessage('Error: ' + error);
+        }
     }
 
     window.addEventListener('message', (event) => {
@@ -61,6 +73,12 @@ def record_audio_js():
             recordAudio();
         }
     });
+
+    window.addEventListener('load', () => {
+        document.querySelector('button').addEventListener('click', () => {
+            window.postMessage({func: 'startRecording'}, '*');
+        });
+    });
     </script>
     <button onclick="window.postMessage({func: 'startRecording'}, '*')">Record Audio</button>
     """