I keep getting "Invalid file format." Error on my React app

API
1

I keep getting I keep getting “Invalid file format.” Error on my React app.

This component should record audio from microphone and then use openai transcriptions to transcribe it. I can confirm that I can record the audio by playing it back using this line {audioUrl && <audio src={audioUrl} controls />}.

But when I check the console, the API returns a 400 bad request, invalid file format.

this is mycomponent

import { useEffect, useState } from 'react';

const VoiceInput = () => {
  const [isRecording, setIsRecording] = useState<boolean>(false);
  const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(
    null
  );
  const [recordedChunks, setRecordedChunks] = useState<Blob[]>([]);
  const [audioUrl, setAudioUrl] = useState<string>('');

  useEffect(() => {
    const audioBlob = new Blob(recordedChunks, { type: 'audio/wav' });
    const url = URL.createObjectURL(audioBlob);
    setAudioUrl(url);

    return () => {
      URL.revokeObjectURL(url);
    };
  }, [recordedChunks]);

  const startRecording = async () => {
    try {
      setRecordedChunks([]);
      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
      const mediaRecorderInstance = new MediaRecorder(stream);

      mediaRecorderInstance.ondataavailable = (e: BlobEvent) => {
        setRecordedChunks((prev: Blob[]) => [...prev, e.data]);
      };

      mediaRecorderInstance.start();
      setIsRecording(true);
      setMediaRecorder(mediaRecorderInstance);
    } catch (error) {
      console.error('Error accessing microphone:', error);
    }
  };

  const stopRecording = async () => {
    if (mediaRecorder) {
      mediaRecorder.stop();
      setIsRecording(false);

      const audioBlob = new Blob(recordedChunks, { type: 'audio/wav' });

      try {
        const formData = new FormData();
        formData.append('file', audioBlob, 'audio.wav');
        formData.append('model', 'whisper-1');

        const response = await fetch(
          'https://api.openai.com/v1/audio/transcriptions',
          {
            method: 'POST',
            headers: {
              Authorization: `Bearer ${import.meta.env.VITE_OPENAI_API_KEY}`,
            },
            body: formData,
          }
        );

        const data = await response.json();
        console.log('Transcription:', data);
      } catch (error) {
        console.error('Error sending audio to OpenAI:', error);
      }
    }
  };

  return (
    <div>
      {!isRecording ? (
        <button
          className="bg-green-400 p-4 rounded text-white shadow"
          onClick={startRecording}
          disabled={isRecording}
        >
          Start Recording
        </button>
      ) : (
        <button
          className="bg-green-400 p-4 rounded text-white shadow"
          onClick={stopRecording}
          disabled={!isRecording}
        >
          Stop Recording
        </button>
      )}

      {audioUrl && <audio src={audioUrl} controls />}
    </div>
  );
};

export default VoiceInput;
2

At first glance, I’d say that your MediaRecorder instance might be recording in a format other than WAV. For instance, on my Chrome browser, the default for an audio recording from the mic set up similarly to yours is to record in Opus in a WebM container. Yours might be using something like AAC.

You’re telling the blob that you’re giving it audio/wav, but it’s actually whatever format your MediaRecorder recorded in. Blob isn’t going to transcode the data to a different format.

Take a look at MediaRecorder: MediaRecorder() constructor - Web APIs | MDN and set your options parameter to MediaRecorder appropriately.

1 Like
3

I will get back to you after I can modify my app. Thanks for the insight, you might be right about the MediaRecorder instance recording in another format.