How do I send a recorded audio file from React Native to the Whisper API?

Below is one proven strategy: don’t try to pass your audio file as a Node.js stream (or as raw binary data) directly to the OpenAI client library. Instead, build a standard FormData object that includes the audio file – using its URI along with the proper content type and filename – and then send it via a standard fetch (or an HTTP library that supports multipart uploads). (Note that the current OpenAI Node library isn’t designed for React Native’s environment.)

Below is an example using fetch:

---

JAVASCRIPTCopied
export const getCompletion5 = async (apiKey) => {
  // Your local file URI from react-native-audio-recorder-player
  const filePath = "file:///data/user/0/com.xyz.app/cache/sound.mp4";

  // Create FormData and append the file info.
  // React Native’s FormData supports file uploads using a uri, type, and name.
  const formData = new FormData();
  formData.append("file", {
    uri: filePath,               // file URI from your recorder
    type: "audio/mp4",           // set based on your file type
    name: "sound.mp4",           // any name you choose
  });
  formData.append("model", "whisper-1");

  try {
    const response = await fetch("https://api.openai.com/v1/audio/transcriptions", {
      method: "POST",
      headers: {
        "Authorization": `Bearer ${apiKey}`,
        // Note: Do not manually set Content-Type here if you’re using FormData.
        // Leaving it unset lets fetch set the proper multipart boundary.
      },
      body: formData,
    });

    if (!response.ok) {
      const errorText = await response.text();
      throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`);
    }

    const data = await response.json();
    console.log("Transcription:", data.text);
    return data.text;
  } catch (error) {
    console.error("Failed to transcribe audio:", error);
    throw error;
  }
};

---

Key Points

1. FormData in React Native
   In React Native you build FormData by appending an object with the keys:
   • uri: your file’s local URI (keep the "file://" prefix)
   • type: the MIME type (for an mp4 audio file, “audio/mp4”)
   • name: a filename

2. Leave Content-Type Header Unset
   When using fetch with FormData, do not explicitly set “Content-Type” to “multipart/form-data”. Let fetch set that automatically with the correct multipart boundary.

3. Why Not Use openai.audio.transcriptions.create?
   The OpenAI client library is built for Node’s runtime and expects Node.js streams. In React Native, that isn’t available by default. It’s generally more reliable to hit the REST endpoint directly using fetch (or a library like axios).

Using the approach above should allow your React Native app to successfully send your recorded audio file to the Whisper API and receive a transcription result.

If you run into any issues reading the file or if additional encoding is needed, you may also consider libraries like react-native-fs or rn-fetch-blob. However, in many cases simply using the file URI with FormData works fine.