React Native使用react-native-audio-streaming连接Node服务器流音频失败求助

我帮你梳理几个高概率的原因和对应的解决办法，你可以逐一排查：

1. 优先修正URL的低级错误 #

你代码里的URL前面多了个空格：" http://127.0.0.1:5000/get/..."，这个空格会直接导致URL无效，先把它去掉，改成"http://[你的电脑局域网IP]:5000/get/5abad23b4f078f94aaf75400"。

2. 解决本地服务器的网络可达性问题 #

在React Native设备（模拟器/真机）里，127.0.0.1指向的是设备自身，不是运行Node服务器的电脑。你需要：

• 找到电脑的局域网IP（比如Windows用ipconfig，Mac/Linux用ifconfig），格式一般是192.168.x.x
• 确保电脑防火墙没有拦截5000端口
• 用设备自带的浏览器访问这个局域网IP的URL，确认能正常播放音频（如果设备浏览器都打不开，RN组件肯定也不行）

3. 确保Node服务器返回正确的流式响应头 #

RN的音频组件对流式传输的响应头要求比浏览器严格，你需要在Node服务器里处理Range请求并返回正确的头信息。用Express的示例代码如下：

const express = require('express');
const fs = require('fs');
const path = require('path');
const cors = require('cors'); // 解决跨域问题
const app = express();

app.use(cors()); // 先启用CORS，避免RN请求被拦截

app.get('/get/:id', (req, res) => {
  // 替换成你的MP3文件实际路径
  const filePath = path.join(__dirname, `./music/${req.params.id}.mp3`);
  
  try {
    const stat = fs.statSync(filePath);
    const fileSize = stat.size;
    const range = req.headers.range;

    if (range) {
      // 处理分段请求（RN音频组件会发起这类请求）
      const parts = range.replace(/bytes=/, "").split("-");
      const start = parseInt(parts[0], 10);
      const end = parts[1] ? parseInt(parts[1], 10) : fileSize - 1;
      const chunksize = (end - start) + 1;
      const file = fs.createReadStream(filePath, { start, end });
      
      const head = {
        'Content-Range': `bytes ${start}-${end}/${fileSize}`,
        'Accept-Ranges': 'bytes',
        'Content-Length': chunksize,
        'Content-Type': 'audio/mpeg',
      };
      res.writeHead(206, head);
      file.pipe(res);
    } else {
      // 处理完整文件请求
      const head = {
        'Content-Length': fileSize,
        'Content-Type': 'audio/mpeg',
      };
      res.writeHead(200, head);
      fs.createReadStream(filePath).pipe(res);
    }
  } catch (err) {
    res.status(404).send('MP3 file not found');
  }
});

app.listen(5000, () => {
  console.log('Server running on port 5000');
});

4. 检查React Native项目的配置 #

• Android：确保AndroidManifest.xml里添加了网络权限：

  <uses-permission android:name="android.permission.INTERNET" />
  

• iOS：如果用的是HTTP协议（不是HTTPS），需要在Info.plist里添加ATS例外，允许访问你的服务器IP：

  <key>NSAppTransportSecurity</key>
  <dict>
    <key>NSExceptionDomains</key>
    <dict>
      <key>192.168.x.x</key> <!-- 替换成你的电脑局域网IP -->
      <dict>
        <key>NSIncludesSubdomains</key>
        <true/>
        <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
        <true/>
      </dict>
    </dict>
  </dict>
  

• 确认react-native-audio-streaming组件已正确链接（RN 0.60+自动链接，但iOS建议重新执行pod install）

5. 调试错误信息 #

打开React Native Debugger，查看Network面板里的请求状态，或者在代码里添加错误监听：

import ReactNativeAudioStreaming from 'react-native-audio-streaming';

ReactNativeAudioStreaming.addEventListener('error', (err) => {
  console.log('Audio streaming error:', err);
});

// 然后调用播放
ReactNativeAudioStreaming.play("http://192.168.x.x:5000/get/5abad23b4f078f94aaf75400", {
  showIniOSMediaCenter: false, 
  showInAndroidNotifications: false
});

先从URL空格、局域网IP这两个最简单的点排查，再逐步验证服务器响应和RN配置，应该能解决问题。

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