Search code examples
iosreact-nativeaudiorn-fetch-blob

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

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!

Solution

  • 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.