OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

How to call Open AI Transcription Audio from React Native. Expo GO. Invalid file format. Supported formats

  • Thread starter Thread starter Luis Valencia
  • Start date Start date
L

Luis Valencia

Guest
I have a react native app with expo go. The functionality is simple, I tap record, and then stop, and the audio file should be sent to Open AI and transcribe it to text.

However I am having difficulties as it requires a File, not an URI.

I get this error:

Code:
> ents/ExponentExperienceData/@levm38/ai-reminders/recording_1718887602296.mp3"}
> ERROR  Failed to transcribe audio: [AxiosError: Request failed with
> status code 400]  LOG  Response data: {"error": {"code": null,
> "message": "Invalid file format. Supported formats: ['flac', 'm4a',
> 'mp3', 'mp4', 'mpeg', 'mpga', 'oga', 'ogg', 'wav', 'webm']", "param":
> null, "type": "invalid_request_error"}}

The code is as follows:

Code:
  const stopRecording = async () => {
        console.log('Stopping recording...');
        setRecording(null);
        setIsRecording(false);
        await recording?.stopAndUnloadAsync();
    
        const uri = recording?.getURI();
        if (uri) {
          const timestamp = Date.now();
    
          try {
            // Convert recording to MP3
            const mp3FileUri = `${FileSystem.documentDirectory}recording_${timestamp}.mp3`;
            await FileSystem.copyAsync({
              from: uri,
              to: mp3FileUri,
            });
    
            console.log('Recording saved as MP3:', mp3FileUri);
    
            // Fetch duration of the recording
            const { sound } = await Audio.Sound.createAsync({ uri: mp3FileUri });
            const { durationMillis } = await sound.getStatusAsync();
            await sound.unloadAsync();
    
            await saveRecording(mp3FileUri, timestamp, durationMillis);
    
            // Read the MP3 file content into a Base64 string
            const mp3Base64String = await FileSystem.readAsStringAsync(mp3FileUri, {
              encoding: FileSystem.EncodingType.Base64,
            });
    
            // Convert Base64 string back to Blob
            const mp3Blob = await base64ToBlob(mp3Base64String, 'audio/mpeg');
    
            // Call the transcription function with the Blob object
            await transcribeAudio(mp3Blob);
          } catch (error) {
            console.error('Failed to save recording as MP3:', error);
          }
        }
      };
    
      const transcribeAudio = async (fileBlob) => {
        try {
          const formData = new FormData();
          formData.append('file', {
            uri: fileBlob.uri,
            type: 'audio/mpeg', // Set correct MIME type here
            name: `recording_${Date.now()}.mp3`, // Ensure the name is set appropriately
          });
          formData.append('model', 'whisper-1');
          formData.append('response_format', 'verbose_json');
          formData.append('timestamp_granularities', 'segment');
      
          const headers = {
            'Authorization': `Bearer ${openaiApiKey}`,
            'Content-Type': 'multipart/form-data',
          };
      
          const response = await axios.post('https://api.openai.com/v1/audio/transcriptions', formData, { headers });
          console.log('Transcription response:', response.data); // Log full response for debugging
      
          // Extract the actual transcription text from the response
          const transcriptionText = response.data.text;
          console.log('Transcription text:', transcriptionText);
        } catch (error) {
          console.error('Failed to transcribe audio:', error);
          if (error.response) {
            console.log('Response data:', error.response.data);
          }
        }
      };


const base64ToBlob = async (base64Data, contentType) => {
  console.log('Converting Base64 to Blob...');
  try {
    const response = await fetch(`data:${contentType};base64,${base64Data}`);
    const blob = await response.blob();
    console.log('Blob conversion successful:', blob);
    return blob;
  } catch (error) {
    console.error('Failed to convert Base64 to Blob:', error);
    throw error;
  }
};

If I check my logs I get this:

Code:
> LOG  Recording saved as MP3:
> file:///var/mobile/Containers/Data/Application/2C4F636D-9A6C-4FAD-976D-3A4D7D7B2EE7/Documents/ExponentExperienceData/@levm38/ai-reminders/recording_1718887873585.mp3
> LOG  Recording saved {"duration": 1858, "timestamp": 1718887873585,
> "uri":
> "file:///var/mobile/Containers/Data/Application/2C4F636D-9A6C-4FAD-976D-3A4D7D7B2EE7/Documents/ExponentExperienceData/@levm38/ai-reminders/recording_1718887873585.mp3"}
> LOG  Converting Base64 to Blob...  LOG  Blob conversion successful:
> {"_data": {"__collector": {}, "blobId":
> "92385B71-9F4F-4F40-9D2B-D09A84B06AF6", "name": "Unknown", "offset":
> 0, "size": 68915, "type": "audio/mpeg"}}  ERROR  Failed to transcribe
> audio: [AxiosError: Request failed with status code 400]  LOG 
> Response data: {"error": {"code": null, "message": "Invalid file
> format. Supported formats: ['flac', 'm4a', 'mp3', 'mp4', 'mpeg',
> 'mpga', 'oga', 'ogg', 'wav', 'webm']", "param": null, "type":
> "invalid_request_error"}}

<p>I have a react native app with expo go. The functionality is simple, I tap record, and then stop, and the audio file should be sent to Open AI and transcribe it to text.</p>
<p>However I am having difficulties as it requires a File, not an URI.</p>
<p>I get this error:</p>
<pre><code>> ents/ExponentExperienceData/@levm38/ai-reminders/recording_1718887602296.mp3"}
> ERROR Failed to transcribe audio: [AxiosError: Request failed with
> status code 400] LOG Response data: {"error": {"code": null,
> "message": "Invalid file format. Supported formats: ['flac', 'm4a',
> 'mp3', 'mp4', 'mpeg', 'mpga', 'oga', 'ogg', 'wav', 'webm']", "param":
> null, "type": "invalid_request_error"}}
</code></pre>
<p>The code is as follows:</p>
<pre><code> const stopRecording = async () => {
console.log('Stopping recording...');
setRecording(null);
setIsRecording(false);
await recording?.stopAndUnloadAsync();

const uri = recording?.getURI();
if (uri) {
const timestamp = Date.now();

try {
// Convert recording to MP3
const mp3FileUri = `${FileSystem.documentDirectory}recording_${timestamp}.mp3`;
await FileSystem.copyAsync({
from: uri,
to: mp3FileUri,
});

console.log('Recording saved as MP3:', mp3FileUri);

// Fetch duration of the recording
const { sound } = await Audio.Sound.createAsync({ uri: mp3FileUri });
const { durationMillis } = await sound.getStatusAsync();
await sound.unloadAsync();

await saveRecording(mp3FileUri, timestamp, durationMillis);

// Read the MP3 file content into a Base64 string
const mp3Base64String = await FileSystem.readAsStringAsync(mp3FileUri, {
encoding: FileSystem.EncodingType.Base64,
});

// Convert Base64 string back to Blob
const mp3Blob = await base64ToBlob(mp3Base64String, 'audio/mpeg');

// Call the transcription function with the Blob object
await transcribeAudio(mp3Blob);
} catch (error) {
console.error('Failed to save recording as MP3:', error);
}
}
};

const transcribeAudio = async (fileBlob) => {
try {
const formData = new FormData();
formData.append('file', {
uri: fileBlob.uri,
type: 'audio/mpeg', // Set correct MIME type here
name: `recording_${Date.now()}.mp3`, // Ensure the name is set appropriately
});
formData.append('model', 'whisper-1');
formData.append('response_format', 'verbose_json');
formData.append('timestamp_granularities', 'segment');

const headers = {
'Authorization': `Bearer ${openaiApiKey}`,
'Content-Type': 'multipart/form-data',
};

const response = await axios.post('https://api.openai.com/v1/audio/transcriptions', formData, { headers });
console.log('Transcription response:', response.data); // Log full response for debugging

// Extract the actual transcription text from the response
const transcriptionText = response.data.text;
console.log('Transcription text:', transcriptionText);
} catch (error) {
console.error('Failed to transcribe audio:', error);
if (error.response) {
console.log('Response data:', error.response.data);
}
}
};


const base64ToBlob = async (base64Data, contentType) => {
console.log('Converting Base64 to Blob...');
try {
const response = await fetch(`data:${contentType};base64,${base64Data}`);
const blob = await response.blob();
console.log('Blob conversion successful:', blob);
return blob;
} catch (error) {
console.error('Failed to convert Base64 to Blob:', error);
throw error;
}
};
</code></pre>
<p>If I check my logs I get this:</p>
<pre><code>> LOG Recording saved as MP3:
> file:///var/mobile/Containers/Data/Application/2C4F636D-9A6C-4FAD-976D-3A4D7D7B2EE7/Documents/ExponentExperienceData/@levm38/ai-reminders/recording_1718887873585.mp3
> LOG Recording saved {"duration": 1858, "timestamp": 1718887873585,
> "uri":
> "file:///var/mobile/Containers/Data/Application/2C4F636D-9A6C-4FAD-976D-3A4D7D7B2EE7/Documents/ExponentExperienceData/@levm38/ai-reminders/recording_1718887873585.mp3"}
> LOG Converting Base64 to Blob... LOG Blob conversion successful:
> {"_data": {"__collector": {}, "blobId":
> "92385B71-9F4F-4F40-9D2B-D09A84B06AF6", "name": "Unknown", "offset":
> 0, "size": 68915, "type": "audio/mpeg"}} ERROR Failed to transcribe
> audio: [AxiosError: Request failed with status code 400] LOG
> Response data: {"error": {"code": null, "message": "Invalid file
> format. Supported formats: ['flac', 'm4a', 'mp3', 'mp4', 'mpeg',
> 'mpga', 'oga', 'ogg', 'wav', 'webm']", "param": null, "type":
> "invalid_request_error"}}
</code></pre>
 

Latest posts

A
Replies
0
Views
1
Ashrik Ahamed
A
A
Replies
0
Views
1
Ashrik Ahamed
A

Online statistics

Members online
0
Guests online
4
Total visitors
4
Top