Reactjs 对react中的音频文件使用FFmpeg.wasm时出错："；ffmpeg.FS（'；readFile'；，'；output.mp3'；）错误。检查路径是否存在"；

我目前正在构建一个基于浏览器的音频编辑器，我正在使用ffmpeg.wasm（ffmpeg的纯WebAssembly/JavaScript端口）来实现它

我正在使用这个优秀的示例，它允许您上传视频文件并将其转换为gif：

import React, { useState, useEffect } from 'react';
import './App.css';

import { createFFmpeg, fetchFile } from '@ffmpeg/ffmpeg';
const ffmpeg = createFFmpeg({ log: true });

function App() {
  const [ready, setReady] = useState(false);
  const [video, setVideo] = useState();
  const [gif, setGif] = useState();

  const load = async () => {
    await ffmpeg.load();
    setReady(true);
  }

  useEffect(() => {
    load();
  }, [])

  const convertToGif = async () => {
    // Write the file to memory 
    ffmpeg.FS('writeFile', 'test.mp4', await fetchFile(video));

    // Run the FFMpeg command
    await ffmpeg.run('-i', 'test.mp4', '-t', '2.5', '-ss', '2.0', '-f', 'gif', 'out.gif');

    // Read the result
    const data = ffmpeg.FS('readFile', 'out.gif');

    // Create a URL
    const url = URL.createObjectURL(new Blob([data.buffer], { type: 'image/gif' }));
    setGif(url)
  }

  return ready ? (
    
    <div className="App">
      { video && <video
        controls
        width="250"
        src={URL.createObjectURL(video)}>

      </video>}


      <input type="file" onChange={(e) => setVideo(e.target.files?.item(0))} />

      <h3>Result</h3>

      <button onClick={convertToGif}>Convert</button>

      { gif && <img src={gif} width="250" />}

    </div>
  )
    :
    (
      <p>Loading...</p>
    );
}

export default App;

函数运行时不会出错，只返回输入文件。所以我假设ffmpeg.run（）行没有在内存中存储“output.mp3”可能有问题吧？我一辈子都搞不清楚发生了什么事……任何帮助都将不胜感激

修复了它

原来我需要在ffmpeg.run（）前面加上一个“wait”。如果没有这句话，下一行：

const data = ffmpeg.FS('readFile', 'output.mp3');

---

在生成output.mp3并将其存储在内存中之前运行。

我一直在等待，但仍然得到错误。@KhoPhi您能提出一个新问题并在其中为您的特定问题标记我吗？它正常工作了。我最初的ffmpeg命令不正确，并且没有创建输出。文件现在可以找到了。谢谢

const data = ffmpeg.FS('readFile', 'test.mp3');

const data = ffmpeg.FS('readFile', 'output.mp3');