Why isn't my fetched blob audio file getting played? I'm using React Native Track Player

Question

I'm currently using the React Native Track Player for playing audio, and it plays local audio tracks fine. When I fetch it through my private api it correctly gets the audio object in blob form - here is what the console returns when I logged it.

{"_bodyBlob": {"_data": {"__collector": [Object], "blobId": "F7F673C8-A5E6-4941-AD52-7EBA03F47290", "name": "9to5.mp3", "offset": 0, "size": 8035972, "type": "audio/mpeg"}}, "_bodyInit": {"_data": {"__collector": [Object], "blobId": "F7F673C8-A5E6-4941-AD52-7EBA03F47290", "name": "9to5.mp3", "offset": 0, "size": 8035972, "type": "audio/mpeg"}}, "bodyUsed": false, "headers": {"map": {"accept-ranges": "bytes", "connection": "keep-alive", "content-disposition": "attachment; filename=\"9to5.mp3\"", "content-length": "8035972", "content-type": "audio/mpeg", "date": "Thu, 15 Dec 2022 01:50:39 GMT", "keep-alive": "timeout=60"}}, "ok": true, "status": 200, "statusText": "", "type": "default", "url": "http://localhost:8080/downloadFile/9to5.mp3"}

I converted this blob into a url so I'm confused why this wouldn't work. Here is my code - `

export const FetchGetFile = async () => {
  let res = await fetch('http://localhost:8080/downloadFile/9to5.mp3');
  console.log(res);
  const data = await res.blob();
  let bloburl = URL.createObjectURL(data);
  const track = {
    url: bloburl,
    title: 'a',
    artist: 'b',
    duration: 166,
  };
  TrackPlayer.add(track)
};

`

Inside of FetchGetFile() I have substituted a local audio file in the url property in track with require(./song.mp3) and this works, so I think it has something to do with the audio blob url or react native track player.

Answer 1

Use RN fetch blob https://github.com/joltup/rn-fetch-blob

RNFetchBlob.config({
  // add this option that makes response data to be stored as a file,
  // this is much more performant.
  fileCache: true,
})
  .fetch("GET", "http://www.example.com/file/example.zip", {
    //some headers ..
  })
  .then((res) => {
    // the temp file path
    console.log("The file saved to ", res.path());
  });