如何在 django 中将 blob url 转换为 mp3 音频答案

【问题标题】：How to convert blob url into mp3 audio in django如何在 django 中将 blob url 转换为 mp3 音频
【发布时间】：2021-06-19 17:49:45
【问题描述】：

所以我正在使用 Mic recorder API 的浏览器录制音频，现在这个 Api 在录制后返回一个 blob url，我将它发送到我的项目的 django 后端，但问题是如何取回该音频文件来自后端的 blob url？

供您参考，这是它生成 blob url 的方式：

const Mp3Recorder = new MicRecorder({ bitRate: 128 });

     stop = () => {
        Mp3Recorder.stop()
          .getMp3()
          .then(([buffer, blob]) => {
            const blobURL = URL.createObjectURL(blob);
            console.log(blobURL);
            this.setState({ blobURL, isRecording: false });
            this.sendAudioFile(blobURL);
          })
          .catch((e) => console.log(e));
      };

这是将 blob url 发送到 django 后端的代码

sendAudioFile = (url) => {
    let data = new FormData();
    data.append("file", url);
    return axios
      .post("http://localhost:8000/recordings/", data, {
        headers: {
          "Content-Type": "multipart/form-data",
        },
      })
      .then((res) => {
        console.log(res);
        return res;
      });

请提出一个好的解决方案，因为我已经针对类似问题浏览了各种 stackoverflow 答案，但问题没有得到解决。

【问题讨论】：

标签： reactjs django api

【解决方案1】：

所以我找到了解决这个问题的方法，只需包含这行代码即可将您的 blob url 转换为 mp3/.wav 文件，然后将其发送到后端。

var wavfromblob = new File([blob], "incomingaudioclip.wav");

更多理解请参考此功能代码。

 Mp3Recorder.stop()
      .getMp3()
      .then(([buffer, blob]) => {
        const blobURL = URL.createObjectURL(blob);
        console.log(blobURL);
        var wavfromblob = new File([blob], "incomingaudioclip.wav");

        console.log(wavfromblob);
        const blobmp3 = new Blob();

        this.setState({ blobURL, isRecording: false });
        // this.createDownloadLink(blobURL);
        this.sendAudioFile(wavfromblob);
      })
      .catch((e) => console.log(e));

【讨论】：