Update app.py

app.py

@@ -12,13 +12,48 @@ st.title("Microphone Input in Streamlit")
 
 # Load the custom component
 audio_recorder_html = """
-<script src="mic_component.js"></script>
+<script>
+const recordButton = document.getElementById("recordButton");
+const stopButton = document.getElementById("stopButton");
+const audioChunks = [];
+
+let mediaRecorder;
+
+navigator.mediaDevices.getUserMedia({ audio: true })
+.then(function(stream) {
+  mediaRecorder = new MediaRecorder(stream);
+
+  recordButton.onclick = function() {
+    mediaRecorder.start();
+    console.log("Recording started...");
+  };
+
+  stopButton.onclick = function() {
+    mediaRecorder.stop();
+    console.log("Recording stopped...");
+  };
+
+  mediaRecorder.ondataavailable = function(e) {
+    audioChunks.push(e.data);
+  };
+
+  mediaRecorder.onstop = function(e) {
+    const audioBlob = new Blob(audioChunks, { type: "audio/wav" });
+    const reader = new FileReader();
+    reader.readAsDataURL(audioBlob);
+    reader.onloadend = function() {
+      const base64data = reader.result.split(',')[1];
+      Streamlit.setComponentValue(base64data);
+    };
+  };
+});
+</script>
 <button id="recordButton">Start Recording</button>
 <button id="stopButton">Stop Recording</button>
 """
 
 # Embed the JavaScript and HTML in Streamlit
-components.html(audio_recorder_html, height=200)
+components.html(audio_recorder_html, height=300)
 
 # Retrieve the audio data from the component (if available)
 audio_data = st.experimental_get_query_params().get("value")