Update app.py

app.py

@@ -11,19 +11,20 @@ with gr.Blocks() as demo:
     audio_input = gr.Audio(sources="microphone", streaming=True, visible=False)
     audio_output = gr.Audio(streaming=True, visible=False)
     
-    # Custom HTML for Web Audio API
     html = gr.HTML("""
-    <button id="startButton">Start</button>
-    <button id="stopButton">Stop</button>
-    <div id="status"></div>
-    
-    <script>
-    let audioContext;
-    let mediaStreamSource;
-    let processor;
-    let recording = false;
-    
-    async function startRecording() {
+<button id="startButton">Start Recording</button>
+<button id="stopButton" disabled>Stop Recording</button>
+<div id="status">Ready</div>
+<div id="debug"></div>
+
+<script>
+let audioContext;
+let mediaStreamSource;
+let processor;
+let recording = false;
+
+async function startRecording() {
+    try {
         audioContext = new (window.AudioContext || window.webkitAudioContext)();
         const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
         mediaStreamSource = audioContext.createMediaStreamSource(stream);
@@ -35,28 +36,41 @@ with gr.Blocks() as demo:
         processor.onaudioprocess = function(e) {
             if (!recording) return;
             const audioData = e.inputBuffer.getChannelData(0);
+            document.getElementById('debug').textContent = 'Processing audio chunk...';
             // Send audio data to the server
-            gradioApp().querySelector('#component-0').querySelector('input[type=file]').files = new FileList([new File([audioData], 'audio.wav', {type: 'audio/wav'})]);
+            const blob = new Blob([audioData], {type: 'audio/wav'});
+            const file = new File([blob], 'audio.wav', {type: 'audio/wav'});
+            const dt = new DataTransfer();
+            dt.items.add(file);
+            gradioApp().querySelector('#component-0').querySelector('input[type=file]').files = dt.files;
             gradioApp().querySelector('#component-0').querySelector('button[type=submit]').click();
         };
         
         recording = true;
         document.getElementById('status').textContent = 'Recording...';
+        document.getElementById('startButton').disabled = true;
+        document.getElementById('stopButton').disabled = false;
+    } catch (err) {
+        console.error('Error starting recording:', err);
+        document.getElementById('status').textContent = 'Error: ' + err.message;
     }
-    
-    function stopRecording() {
-        if (processor) {
-            processor.disconnect();
-            mediaStreamSource.disconnect();
-        }
-        recording = false;
-        document.getElementById('status').textContent = 'Stopped';
+}
+
+function stopRecording() {
+    if (processor) {
+        processor.disconnect();
+        mediaStreamSource.disconnect();
     }
-    
-    document.getElementById('startButton').addEventListener('click', startRecording);
-    document.getElementById('stopButton').addEventListener('click', stopRecording);
-    </script>
-    """)
+    recording = false;
+    document.getElementById('status').textContent = 'Stopped';
+    document.getElementById('startButton').disabled = false;
+    document.getElementById('stopButton').disabled = true;
+}
+
+document.getElementById('startButton').addEventListener('click', startRecording);
+document.getElementById('stopButton').addEventListener('click', stopRecording);
+</script>
+""")
     
     audio_input.stream(process_audio, inputs=audio_input, outputs=audio_output)