使用 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時添加前綴。