如何在React应用中从Node.js API读取并播放MP3文件？

你的方案1完全是可行的，而且是这类音频转发播放场景下非常常规的实现思路，我给你拆解一下具体怎么落地，还有几个必须注意的坑点：

一、核心流程的合理性确认 #

你的思路逻辑通顺，完全符合前后端分离架构下的资源流转模式：

• React客户端传递音频标识/源地址参数给Node.js API（3100端口）
• API完成MP3文件的下载与本地临时存储
• API返回文件的可访问URL给React
• React将该URL直接赋值给<audio>标签的src属性实现播放

二、具体实现步骤 #

1. Node.js API端配置与逻辑编写 #

首先要在API里开启静态文件服务，让临时目录的MP3能通过URL被访问到，以Express框架为例：

const express = require('express');
const app = express();
const path = require('path');
const fs = require('fs');
const axios = require('axios');
const cors = require('cors');

// 处理跨域问题，开发环境可直接放开，生产环境需配置指定域名
app.use(cors());

// 配置静态文件路由，映射到服务器临时音频目录
app.use('/sound', express.static(path.join(__dirname, 'temp', 'sounds')));

// 处理React的音频下载请求
app.get('/api/fetch-audio', async (req, res) => {
  try {
    const { audioId } = req.query; // React传递的音频标识参数
    const tempFilePath = path.join(__dirname, 'temp', 'sounds', `${audioId}.mp3`);

    // 先判断文件是否已存在，避免重复下载
    if (fs.existsSync(tempFilePath)) {
      return res.json({
        audioUrl: `http://localhost:3100/sound/${audioId}.mp3`
      });
    }

    // 替换为实际的音频源地址（可根据audioId从数据库/配置中获取）
    const sourceAudioUrl = `https://example.com/audios/${audioId}.mp3`;
    const writer = fs.createWriteStream(tempFilePath);

    // 流式下载音频到临时目录
    const response = await axios({
      url: sourceAudioUrl,
      method: 'GET',
      responseType: 'stream'
    });
    response.data.pipe(writer);

    await new Promise((resolve, reject) => {
      writer.on('finish', resolve);
      writer.on('error', reject);
    });

    // 返回可播放的URL
    res.json({
      audioUrl: `http://localhost:3100/sound/${audioId}.mp3`
    });
  } catch (err) {
    res.status(500).json({ error: '音频下载失败' });
  }
});

app.listen(3100, () => console.log('API服务运行在3100端口'));

2. React客户端播放逻辑实现 #

React这边拿到API返回的URL后，直接绑定到<audio>标签即可：

import { useState } from 'react';

function AudioPlayer() {
  const [audioUrl, setAudioUrl] = useState('');

  const loadAudio = async () => {
    try {
      const response = await fetch('http://localhost:3100/api/fetch-audio?audioId=exemple');
      const data = await response.json();
      setAudioUrl(data.audioUrl);
    } catch (err) {
      alert('加载音频失败');
    }
  };

  return (
    <div className="audio-player">
      <button onClick={loadAudio} disabled={!!audioUrl}>
        加载示例音频
      </button>
      {audioUrl && (
        <audio controls className="audio-element">
          <source src={audioUrl} type="audio/mpeg" />
          你的浏览器不支持音频播放
        </audio>
      )}
    </div>
  );
}

export default AudioPlayer;

三、关键优化与避坑点 #

• 临时文件清理：服务器的临时音频目录会持续占用磁盘空间，建议添加定时清理逻辑，比如用node-schedule每天凌晨清理7天前的文件：

  const schedule = require('node-schedule');
  const tempDir = path.join(__dirname, 'temp', 'sounds');
  
  // 每天凌晨2点清理7天前的过期文件
  schedule.scheduleJob('0 0 2 * * *', () => {
    const sevenDaysAgo = Date.now() - 7 * 24 * 60 * 60 * 1000;
    fs.readdir(tempDir, (err, files) => {
      if (err) return console.error('读取临时目录失败:', err);
      files.forEach(file => {
        const filePath = path.join(tempDir, file);
        fs.stat(filePath, (err, stats) => {
          if (err) return console.error('获取文件信息失败:', err);
          if (stats.mtime.getTime() < sevenDaysAgo) {
            fs.unlink(filePath, err => {
              if (err) console.error('删除过期文件失败:', err);
            });
          }
        });
      });
    });
  });
  

• 统一域名代理：如果不想在React里暴露API端口，可以在package.json中配置代理，将/api和/sound请求转发到3100端口：

  {
    "proxy": "http://localhost:3100"
  }
  

  之后React的请求可以简写为/api/fetch-audio，返回的URL也可以写成/sound/exemple.mp3，更简洁安全。

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