Play remote audio with react-native-audio-recorder-player and RNFetchBlob not working on iOS

Question

I'm working on a React Native app where I need to load an audio file from the backend and play it in the app.

For this I'm using the packages RNFetchBlob and react-native-audio-recorder-player .

The problem is that my implementation works perfectly on Android , but it doesn't work on iOS ... Even for playing files that were recorded using the react-native-audio-recorder-player inside iOS itself.

When playing files downloaded using RNFetchBlob I get the following error:

FigFileForkOpenMainByCFURL signalled err=2 (errno) (open failed) at /Library/Caches/com.apple.xbs/Sources/EmbeddedCoreMediaFramework_Sim/EmbeddedCoreMedia-2765.6/Sources/Platform/Darwin/DarwinFile.c:576

The part of the code that matters:

import AudioRecorderPlayer from 'react-native-audio-recorder-player';
import RNFetchBlob from 'rn-fetch-blob';

// THIS IS A SAMPLE, NOT THE REAL URL AND TOKEN.
const fileRemoteUrl = 'https://my-backend.com/files/file-id';
const authToken = 'my-authtoken';

// could be 'mp3' or 'aac', etc...
const fileExtension = 'm4a'; 

const dir = NFetchBlob.fs.dirs.DocumentDir;
const path = `${dir}/${Base64.btoa(fileRemoteUrl)}.${fileExtension}`;

const res = await RNFetchBlob.config({
    fileCache: false,
    appendExt: fileExtension,
    path,
}).fetch('GET', fileRemoteUrl, { Authorization: `Bearer ${authToken}` });

const internalUrl = `${Platform.OS === 'android' ? 'file://' : ''}${res.path()}`;

const audioRecorderPlayer = new AudioRecorderPlayer();
await audioRecorderPlayer.startPlayer(internalUrl);
// here the audio should start playing,
// but I get the error on the device(simulator) console (xcode output)

As I said before, the same code works like a charm on Android . Any idea how to solve this problem? I'm stuck in this... I appreciate any help!

Answer 1

In the end I found that the problem was in this line:

const internalUrl = `${Platform.OS === 'android' ? 'file://' : ''}${res.path()}`;

For both iOS and Android it is necessary to add the prefix " file:// " to the file path before passing to the " startPlayer " method.

The reason I was previously only adding the prefix on Android is because I use the same code snippet to load files of other formats (not audio). And for example to use the component " <Image source={{ uri }} /> " on iOS the uri cannot have the prefix.

So the solution was to create a specific treatment to add the prefix when the platform is iOS just before calling the " startPlayer " method.