如何在Next.js网站中调用Python模块处理音视频资源？

问题概述 #

想在React+Next.js构建的网站中调用Python算法处理音频/图像（比如过滤、修改），尝试过API但不清楚如何传输文件并取回处理后的结果，现有代码存在文件传递、处理后返回的问题。

核心实现思路 #

通过Next.js的API路由作为中间层，实现前后端与Python脚本的交互：

• 前端上传文件（FormData格式）到API路由
• API路由接收文件后保存到临时目录，调用Python脚本处理
• Python脚本处理完成后生成新文件，API路由读取该文件并返回给前端
• 前端接收后提供下载或预览

修正后的代码实现 #

1. 前端组件（app.js） #

整合上传逻辑，处理后端返回的处理后文件，提供下载功能：

"use client";
import React, { useState } from "react";
import { useDropzone } from "react-dropzone";

export default function AudioProcessor() {
  const [file, setFile] = useState(null);
  const [processedAudioUrl, setProcessedAudioUrl] = useState(null);
  const [isProcessing, setIsProcessing] = useState(false);

  // 拖拽上传逻辑
  const { getRootProps, getInputProps } = useDropzone({
    accept: { "audio/*": [] },
    onDrop: (acceptedFiles) => {
      const audioFile = acceptedFiles[0];
      setFile(audioFile);
      setProcessedAudioUrl(null);
    },
  });

  // 提交处理请求
  const handleProcess = async (e) => {
    e.preventDefault();
    if (!file) return;

    setIsProcessing(true);
    try {
      const formData = new FormData();
      formData.append("audio", file);

      const res = await fetch("/api/audio-process", {
        method: "POST",
        body: formData,
      });

      if (!res.ok) throw new Error("处理失败");

      // 接收处理后的音频文件，生成下载链接
      const blob = await res.blob();
      const url = URL.createObjectURL(blob);
      setProcessedAudioUrl(url);
    } catch (err) {
      console.error(err);
      alert("处理出错，请重试");
    } finally {
      setIsProcessing(false);
    }
  };

  return (
    <main className="p-8 max-w-md mx-auto">
      <h1 className="text-2xl font-bold mb-6">音频处理工具</h1>
      
      {/* 拖拽上传区域 */}
      <div {...getRootProps()} className="border-2 border-dashed border-gray-300 rounded-lg p-6 mb-4 cursor-pointer">
        <input {...getInputProps()} />
        {file ? (
          <p className="text-green-600">已选择文件：{file.name}</p>
        ) : (
          <p>拖拽音频文件到此处，或点击选择文件</p>
        )}
      </div>

      {/* 提交按钮 */}
      <button
        onClick={handleProcess}
        disabled={!file || isProcessing}
        className="bg-blue-500 text-white px-4 py-2 rounded disabled:bg-gray-300"
      >
        {isProcessing ? "处理中..." : "开始处理音频"}
      </button>

      {/* 处理后预览与下载 */}
      {processedAudioUrl && (
        <div className="mt-6">
          <h3 className="font-medium mb-2">处理后的音频：</h3>
          <audio controls className="w-full mb-2">
            <source src={processedAudioUrl} type="audio/mpeg" />
            浏览器不支持音频播放
          </audio>
          <a
            href={processedAudioUrl}
            download={`processed-${file.name}`}
            className="text-blue-500 underline"
          >
            下载处理后的音频
          </a>
        </div>
      )}
    </main>
  );
}

2. Next.js API路由（app/api/audio-process/route.js） #

负责接收文件、调用Python脚本、返回处理后的文件：

import { NextResponse } from "next/server";
import { exec } from "child_process";
import fs from "fs/promises";
import path from "path";
import os from "os";

export async function POST(request) {
  try {
    // 解析FormData中的音频文件
    const formData = await request.formData();
    const audioFile = formData.get("audio");
    if (!audioFile) {
      return NextResponse.json({ error: "未上传音频文件" }, { status: 400 });
    }

    // 创建临时目录存储上传和处理后的文件
    const tempDir = await fs.mkdtemp(path.join(os.tmpdir(), "audio-"));
    const inputPath = path.join(tempDir, audioFile.name);
    const outputPath = path.join(tempDir, `processed-${audioFile.name}`);

    // 将上传的文件写入临时目录
    const buffer = await audioFile.arrayBuffer();
    await fs.writeFile(inputPath, Buffer.from(buffer));

    // 调用Python处理脚本（注意适配你的Python环境路径）
    await new Promise((resolve, reject) => {
      exec(
        // 替换为你的Python环境激活命令和脚本路径
        `python ${path.join(process.cwd(), "audio_processing.py")} "${inputPath}" "${outputPath}"`,
        (error, stdout, stderr) => {
          if (error) {
            console.error(`Python脚本执行错误: ${error.message}`);
            console.error(`stderr: ${stderr}`);
            reject(error);
            return;
          }
          console.log(`Python脚本输出: ${stdout}`);
          resolve();
        }
      );
    });

    // 读取处理后的文件并返回
    const processedBuffer = await fs.readFile(outputPath);
    return new NextResponse(processedBuffer, {
      headers: {
        "Content-Type": audioFile.type,
        "Content-Disposition": `attachment; filename="processed-${audioFile.name}"`,
      },
    });
  } catch (err) {
    console.error(err);
    return NextResponse.json({ error: "服务器处理出错" }, { status: 500 });
  }
}

3. Python处理脚本（audio_processing.py） #

接收输入输出路径，处理音频并保存结果：

import sys
import librosa
import soundfile as sf

def process_audio(input_path, output_path):
    # 加载音频文件
    y, sr = librosa.load(input_path, sr=None)
    
    # 这里添加你的音频处理逻辑，例如：添加降噪、改变音调等
    # 示例：简单的音频增益调整（放大1.5倍）
    processed_y = y * 1.5
    
    # 保存处理后的音频
    sf.write(output_path, processed_y, sr)

if __name__ == "__main__":
    if len(sys.argv) != 3:
        print("用法: python audio_processing.py <输入文件路径> <输出文件路径>")
        sys.exit(1)
    
    input_path = sys.argv[1]
    output_path = sys.argv[2]
    
    try:
        process_audio(input_path, output_path)
        print(f"音频处理完成，已保存到: {output_path}")
    except Exception as e:
        print(f"处理出错: {str(e)}", file=sys.stderr)
        sys.exit(1)

关键注意事项 #

• Python环境配置：确保Next.js服务器所在环境已安装所需Python库（librosa、soundfile等），可通过pip install librosa soundfile安装。
• 临时文件清理：生产环境建议定期清理临时目录的文件，避免占用磁盘空间。
• 安全性：对上传的文件进行类型校验、大小限制，避免恶意文件执行风险。
• 性能优化：大文件处理可考虑流式传输，避免内存占用过高。

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