使用 react-native-audio-recorder-player 和 RNFetchBlob 无法在 iOS 上播放远程音频

Question

我正在开发一个React Native应用程序，我需要从后端加载音频文件并在应用程序中播放它。

为此，我使用RNFetchBlob和react-native-audio-recorder-player 包。

问题是我的实现在Android 上完美运行，但在iOS 上不起作用......即使播放使用iOS内部的react-native-audio-recorder-player录制的文件也是如此。

播放使用RNFetchBlob下载的文件时，出现以下错误：

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

重要的代码部分：

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)

正如我之前所说，相同的代码在Android上就像一个魅力。 知道如何解决这个问题吗？ 我被困在这个......我感谢任何帮助！

Answer 1

最后我发现问题出在这一行：

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

对于iOS和Android ，在传递给“ startPlayer ”方法之前，必须在文件路径中添加前缀“ file:// ”。

我之前只在 Android 上添加前缀的原因是因为我使用相同的代码片段来加载其他格式（不是音频）的文件。 例如，在iOS上使用组件“ <Image source={{ uri }} /> ” uri 不能有前缀。

所以解决方案是在调用“ startPlayer ”方法之前创建一个特定的处理，当平台是iOS时添加前缀。