如何在react中创建一个音频文件转换器？

npx create-react-app audio-converter
cd audio-converter

npm install react-dropzone fluent-ffmpeg @ffmpeg-installer/ffmpeg

import React, { useState } from 'react';
import Dropzone from 'react-dropzone';
import ffmpeg from 'fluent-ffmpeg';

const AudioConverter = () => {
  const [convertedFile, setConvertedFile] = useState(null);

  const handleDrop = async (acceptedFiles) => {
    const file = acceptedFiles[0];

    ffmpeg(file)
      .audioCodec('libmp3lame')
      .save(`converted_${file.name}`)
      .on('end', () => {
        setConvertedFile(`converted_${file.name}`);
      });
  };

  return (
    <div>
      <Dropzone onDrop={handleDrop}>
        {({ getRootProps, getInputProps }) => (
          <div {...getRootProps({ className: 'dropzone' })}>
            <input {...getInputProps()} />
            <p>将音频文件拖放到此处或点击选择文件。</p>
          </div>
        )}
      </Dropzone>
      {convertedFile && (
        <audio controls>
          <source src={convertedFile} type="audio/mpeg" />
        </audio>
      )}
    </div>
  );
};

export default AudioConverter;

import React from 'react';
import AudioConverter from './AudioConverter';

const App = () => {
  return (
    <div className="App">
      <h1>音频文件转换器</h1>
      <AudioConverter />
    </div>
  );
};

export default App;

npm start