React Native Track Player无法播放获取的Blob音频文件

核心问题：React Native里URL.createObjectURL生成的Blob URL是Web JS环境专属的临时内存地址，Track Player底层依赖原生播放器，无法识别这类Web环境资源，所以直接用Blob URL会播放失败。

下面提供两种可行的解决方法：

方法1：将Blob保存到本地文件后播放 #

把下载到的Blob写入设备本地沙盒，用本地文件路径作为音频源，原生播放器可以直接访问：

import * as FileSystem from 'expo-file-system'; // 也可使用react-native-fs替代
import TrackPlayer from 'react-native-track-player';

export const FetchGetFile = async () => {
  const res = await fetch('http://localhost:8080/downloadFile/9to5.mp3');
  const blob = await res.blob();
  
  // 将Blob转为Base64格式
  const base64Data = await new Promise((resolve) => {
    const reader = new FileReader();
    reader.readAsDataURL(blob);
    reader.onloadend = () => resolve(reader.result.split(',')[1]);
  });
  
  // 定义本地保存路径（沙盒目录下的文件）
  const localFileUri = `${FileSystem.documentDirectory}9to5.mp3`;
  
  // 写入本地文件
  await FileSystem.writeAsStringAsync(localFileUri, base64Data, {
    encoding: FileSystem.EncodingType.Base64,
  });
  
  // 添加到Track Player
  const track = {
    url: localFileUri,
    title: 'a',
    artist: 'b',
    duration: 166,
  };
  await TrackPlayer.add(track);
};

方法2：直接使用API地址并配置认证头（如果需要） #

如果你的私有API只需要简单的认证（比如Token），可以直接把API地址作为音频源，同时给Track Player配置请求头，无需下载Blob：

import TrackPlayer from 'react-native-track-player';

// 初始化Player时配置全局请求头
TrackPlayer.setupPlayer().then(async () => {
  await TrackPlayer.updateOptions({
    // 其他配置项（如通知样式、播放控制等）
    headers: {
      Authorization: 'Bearer YOUR_AUTH_TOKEN', // 替换成你的认证Token
      // 其他需要的请求头
    },
  });
});

export const FetchGetFile = async () => {
  const track = {
    url: 'http://localhost:8080/downloadFile/9to5.mp3',
    title: 'a',
    artist: 'b',
    duration: 166,
  };
  await TrackPlayer.add(track);
};

补充说明 #

• 方法1适合需要离线播放的场景，缺点是会占用设备存储；
• 方法2更轻量化，适合在线播放的场景，前提是API支持直接被原生播放器请求（跨域、认证等问题已处理）。

内容的提问来源于stack exchange，提问作者Dean Campagnolo