match filereader from example

app/input.tsx

@@ -50,11 +50,6 @@ const VoiceInputForm: React.FC<VoiceInputFormProps> = ({ handleSubmit, input, se
     const [recognizedText, setRecognizedText] = useState('');
     const transcriber = useTranscriber();
 
-    const onFormSubmit = (e: React.FormEvent<HTMLFormElement>) => {
-        e.preventDefault();
-        handleSubmit(input); // Assuming handleSubmit now takes the input as an argument
-    };
-
     const startListening = useCallback((audioData: any) => {
         transcriber.start(audioData);
     }, [transcriber]);
@@ -98,17 +93,21 @@ const VoiceInputForm: React.FC<VoiceInputFormProps> = ({ handleSubmit, input, se
     useEffect(() => {
         const processRecording = async () => {
             if (recordedBlob) {
-                // Process the blob for transcription
-                const audioBuffer = await convertBlobToAudioBuffer(recordedBlob);
-                startListening(audioBuffer); // Start the transcription process
-
-                // Reset the blob state if you want to prepare for a new recording
-                setRecordedBlob(null);
+                const fileReader = new FileReader();
+    
+                fileReader.onloadend = async () => {
+                    const audioCTX = new AudioContext();
+                    const arrayBuffer = fileReader.result as ArrayBuffer;
+                    const decoded = await audioCTX.decodeAudioData(arrayBuffer);
+                    startListening(decoded);
+                };
+    
+                fileReader.readAsArrayBuffer(recordedBlob);
             }
         };
-
+    
         processRecording();
-    }, [recordedBlob, startListening]);
+    }, [recordedBlob, startListening]);    
 
     const vad = useMicVAD({
         modelURL: "/_next/static/chunks/silero_vad.onnx",
@@ -227,6 +226,12 @@ const VoiceInputForm: React.FC<VoiceInputFormProps> = ({ handleSubmit, input, se
                     ))}
                 </div>
             )}
+            {recordedBlob && (
+                <audio controls>
+                    <source src={URL.createObjectURL(recordedBlob)} type={recordedBlob.type} />
+                    Your browser does not support the audio element.
+                </audio>
+            )}
             <form onSubmit={handleSubmit} className={styles.form}>
                 <input
                     type="text"