从 Flask 服务器获取音频并在 React 上以可播放的格式显示音频

Question

背景故事

我正在从事一个音乐项目，该项目接收一个音频文件并将钢琴主干与该音频分开。分离音频后，它会将文件本地保存在 api 文件夹中。然后我从我的 React 应用程序向我的烧瓶 api 发送一个 GET 请求，return 音频文件。

我需要什么

问题是二进制格式的 flask returns 音频（我不确定是否看到下图），我想知道如何 以可播放的格式显示它反应或至少在本地 以音频格式保存。感谢您的任何帮助。

axios 配置

import axios from "axios";

export default axios.create({
  baseURL: "http://localhost:5000"
});

反应端的代码

try {
     const res = await api.get("/download");
     console.log(res);
   } catch (error) {
     console.log(error);
   }

Flask 上的代码 api

@app.route('/download')
  @cross_origin()
   def download():
       
       instrument = 'piano'
   
       stem_path = f"backend/audio/{instrument}.wav"
       if os.path.isfile(stem_path):
           return send_file(stem_path, mimetype="audio/wav", as_attachment=True)
       else:
          return {"message": "cannot download stem"}, 401

Answer 1

正确，这是二进制 RIFF/WAV header。您的客户端可以将二进制响应解析为 ArrayBuffer 并创建一个 Blob 来播放或保存：

setAudio(
  document.querySelector('audio'),
  'https://opus-bitrates.anthum.com/audio/music-96.opus',
)

async function setAudio(audio, url) {
  audio.src = URL.createObjectURL(
    new Blob([ await (await fetch(url)).arrayBuffer() ])
  )
}

<audio controls></audio>

从 Flask 服务器获取音频并在 React 上以可播放的格式显示音频

Get audio from a Flask server and showing audio in a playable format on React

javascript

audio

flask

html5-audio

reactjs