0

In a React-Native project, I am attempting to fetch an audio file created by a Python backend that uses the Google Text To Speech service to generate the audio file from text. The backend uses FastAPI to implement an endpoint for downloading the file. The endpoint implementation is as follows:

@router.get('/download', response_class=FileResponse)
async def download_audio_file():
    
    filename = 'temp.wav'
    headers = {'Content-Disposition': f'attachment; filename={filename}'}
    return FileResponse(tts.audio_path, headers=headers, media_type='audio/m4a')

In the frontend, I am unsure of how to handle the FileResponse object that is received from the endpoint in RN. The relevant part of the frontend code is:

  const downloadRecording = async () => {
    try {
      const res = await fetch(".../download", {
        method: "GET",
      });

    // handle response here to get file uri

    } catch (err) {
      console.error("Failed to download recording", err);
    }
  };

Once the audio file has been fetched, it needs to be loaded using expo-av in RN:

      const { sound } = await Audio.Sound.createAsync({uri});

How should I use the fetch response to get the uri or use it in any other way to load the file?

0 Answers0