如何使用 FFmpeg 和 Next.js 构建音频转换器

使用 FFmpeg 和 Next.js 构建音频转换器需要处理文件上传，使用 FFmpeg 处理音频，然后将转换后的文件提供给用户。以下是基本概要和实现方法：

前提条件

• 需要在服务器上安装 FFmpeg。
• 安装所需的依赖项：

npm install next multer

步骤

1. 文件上传处理：

我们将在 Next.js 中使用 multer 中间件来处理文件上传。

2. 使用 FFmpeg 进行音频转换：

文件上传后，我们将使用 FFmpeg 转换音频格式。

3. 提供转换后的文件：

转换后，新文件可供下载。

执行

1. 用于文件上传和转换的 API 路由：

创建新的 API 路由：pages/api/convert.js

import multer from 'multer';
import { exec } from 'child_process';
import { promises as fs } from 'fs';

const upload = multer({ dest: '/tmp' }); // Store the uploaded file temporarily in /tmp

export const config = {
  api: {
    bodyParser: false,
  },
};

export default async (req, res) => {
  if (req.method === 'POST') {
    const convertAudio = async (filePath, outputFormat) => {
      return new Promise((resolve, reject) => {
        const outputPath = `/tmp/output.${outputFormat}`;
        exec(`ffmpeg -i ${filePath} ${outputPath}`, (error) => {
          if (error) {
            reject(error);
          } else {
            resolve(outputPath);
          }
        });
      });
    };

    const fileHandlingMiddleware = upload.single('audioFile');

    fileHandlingMiddleware(req, res, async (err) => {
      if (err) {
        return res.status(500).json({ error: 'Error uploading file.' });
      }

      try {
        const convertedFilePath = await convertAudio(req.file.path, 'mp3'); // Convert to mp3 for this example
        const fileBuffer = await fs.readFile(convertedFilePath);

        res.setHeader('Content-Disposition', 'attachment; filename=converted.mp3');
        res.setHeader('Content-Type', 'audio/mpeg');
        res.end(fileBuffer);

        // Cleanup temp files
        await fs.unlink(req.file.path);
        await fs.unlink(convertedFilePath);
      } catch (error) {
        res.status(500).json({ error: 'Error converting audio.' });
      }
    });
  } else {
    res.status(405).json({ error: 'Only POST requests are allowed.' });
  }
};

2. 文件上传前端：

可以在页面中创建一个简单的表单，让用户上传文件。

import React, { useRef } from 'react';

const ConverterPage = () => {
  const fileRef = useRef(null);

  const handleUpload = async (event) => {
    event.preventDefault();
    const formData = new FormData();
    formData.append('audioFile', fileRef.current.files[0]);

    const response = await fetch('/api/convert', {
      method: 'POST',
      body: formData,
    });

    if (response.ok) {
      const blob = await response.blob();
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.style.display = 'none';
      a.href = url;
      a.download = 'converted.mp3';
      document.body.appendChild(a);
      a.click();
      window.URL.revokeObjectURL(url);
    } else {
      console.error('Failed to convert audio');
    }
  };

  return (
    <div>
      <form onSubmit={handleUpload}>
        <input type="file" ref={fileRef} accept="audio/*" required />
        <button type="submit">Convert</button>
      </form>
    </div>
  );
};

export default ConverterPage;

这是一个非常基本的实现。您可能希望添加更多错误处理功能，允许用户选择输出格式，或使用类似 ffmpeg.wasm 的库在浏览器中处理音频（无需在服务器端安装 FFmpeg）。请务必仔细管理上传的文件，以避免任何安全风险。