Update app.py

app.py

@@ -1,25 +1,64 @@
 import gradio as gr
 import numpy as np
-import time
 
-def add_to_stream(audio, instream):
-    time.sleep(1)
-    if audio is None:
-        return gr.update(), instream
-    if instream is None:
-        ret = audio
-    else:
-        ret = (audio[0], np.concatenate((instream[1], audio[1])))
-    return ret, ret
+def process_audio(audio):
+    # This function will receive audio data from the client
+    # and can perform any server-side processing
+    # For this example, we'll just return the audio as-is
+    return audio
 
 with gr.Blocks() as demo:
-    inp = gr.Audio(source="microphone", streaming=True)  # Enable streaming mode
-    out = gr.Audio(streaming=True)  # Enable streaming output
-    stream = gr.State()
-    clear = gr.Button("Clear")
-
-    inp.stream(add_to_stream, [inp, stream], [out, stream])
-    clear.click(lambda: [None, None, None], None, [inp, out, stream])
+    audio_input = gr.Audio(source="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() {
+        audioContext = new (window.AudioContext || window.webkitAudioContext)();
+        const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+        mediaStreamSource = audioContext.createMediaStreamSource(stream);
+        
+        processor = audioContext.createScriptProcessor(1024, 1, 1);
+        mediaStreamSource.connect(processor);
+        processor.connect(audioContext.destination);
+        
+        processor.onaudioprocess = function(e) {
+            if (!recording) return;
+            const audioData = e.inputBuffer.getChannelData(0);
+            // 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'})]);
+            gradioApp().querySelector('#component-0').querySelector('button[type=submit]').click();
+        };
+        
+        recording = true;
+        document.getElementById('status').textContent = 'Recording...';
+    }
+    
+    function stopRecording() {
+        if (processor) {
+            processor.disconnect();
+            mediaStreamSource.disconnect();
+        }
+        recording = false;
+        document.getElementById('status').textContent = 'Stopped';
+    }
+    
+    document.getElementById('startButton').addEventListener('click', startRecording);
+    document.getElementById('stopButton').addEventListener('click', stopRecording);
+    </script>
+    """)
+    
+    audio_input.stream(process_audio, inputs=audio_input, outputs=audio_output)
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()