node.js - 有没有办法将音频下载从本地磁盘传递到 React.js 中的页面

Question

我正在开发一个录音机来保存用户录音，当点击三个点时，它会提供一个下载选项。我正在尝试做两件事：

1. 下载为 .mp3 （现在它正在下载为 .weba 文件
2. 我在休息 API（node.js）。如何将下载到本地磁盘的文件自动传递到另一个页面。（我已经创建了 React 路由，并希望将下载直接从编辑器页面传递到项目页面）。

我已经完成了 Matt damon 音频演示，但是我无法让我的工作。我仍在学习反应，希望有人能提供帮助。我已经在这里搜索了答案，但是不知道该怎么做。

//recorder.js
import { useEffect, useState } from "react";

const Recorder = () => {
  const [audioURL, setAudioURL] = useState("");
  const [isRecording, setIsRecording] = useState(false);
  const [recorder, setRecorder] = useState(null);

  
  useEffect(() => {
    // Lazily obtain recorder first time we're recording.
    if (recorder === null) {
      if (isRecording) {
        requestRecorder().then(setRecorder, console.error);
      }
      return;
    }

    // Manage recorder state
    if (isRecording) {
      recorder.start();
    } else {
      recorder.stop();
    }

    // Obtain the audio when ready.
    const handleAudio = e => {
      setAudioURL(URL.createObjectURL(e.data));
    };

    recorder.addEventListener("dataavailable", handleAudio);
    return () => recorder.removeEventListener("dataavailable", handleAudio);
      }, [recorder, isRecording]);
    
      
  const startRecording = () => {
    setIsRecording(true);
    console.log(setIsRecording);
    };

  const stopRecording = () => {
    setIsRecording(false);
  };

  return [audioURL, isRecording, startRecording, stopRecording];
};

async function requestRecorder() {
  //const audio = audioToggle.checked || false;
  const stream = await navigator.mediaDevices.getUserMedia({audio: true});
  return new MediaRecorder(stream, {'type' : 'audio/mp3;'});
}

export default Recorder;

import React from "react";
import Recorder from "./recorder";

function Editor() {
    let [audioURL, isRecording, startRecording, stopRecording] = Recorder();
    

    return (
        <div>
            <div className="recorder">
                <Recorder />
                <audio src={audioURL} controls />
                <button onClick={startRecording} disabled={isRecording}>Start</button>
                <button onClick={stopRecording} disabled={!isRecording}>Stop</button>
                {/* <button onClick={postRecording} disabled={!isRecording}>Save</button> */}

            </div>
            
        </div>
    );
}

export default Editor;

标签： node.jsreactjsaudioaudio-recording