如何播放从flask send_file发送的音频文件？

Question

我正在使用 React 开发前端，使用 Flask 开发后端。
我想从Flask服务器发送一个mp3到客户端并在浏览器上播放。

反应

import React from "react";
import axios from "axios";

function App() {

  function handleClick() {
    axios
      .post(`http://localhost:5000/post`, { text: text })
      .then((res) => {
        // to set a audio from server into <audio controls>
      })
      .catch((error) => {console.log("axios error:", error);});
  }

  return (
    <div className="App">
      <button onClick={() => handleClick()}>BUTTON</button>
      <div>
        <audio controls>
          <source src="" type="audio/mpeg" />
        </audio>
      </div>
    </div>
  );
}

export default App;

烧瓶

@app.route('/post', methods=["POST"])
def testpost():
    req = request.get_json(force=True)
    # some process to send a file
    return send_file("test.mp3")

Answer 1

为了能够从 React 应用程序调用 Flask 应用程序，您首先需要考虑 cors。

您可能已经这样做了，但如果没有，您可以像这样使用

Flask-CORS

：

from flask import Flask, render_template, send_file, Response
from flask_cors import CORS, cross_origin


app = Flask(__name__)
cors = CORS(app)


@app.route("/post", methods=["POST"])
@cross_origin()
def testpost():
    return send_file("audio.mp3", mimetype="audio/mp3")

然后我们可以在react应用程序中做类似的事情

import React, { useState } from "react";
import axios from "axios";

function App() {
  const [src, setSrc] = useState("");

  function handleClick() {
    axios({
      url: "http://localhost:5000/post",
      method: "post",
      responseType: "blob",
    })
      .then((res) => {
        setSrc(URL.createObjectURL(res.data));
      })
      .catch((error) => {
        console.log("axios error:", error);
      });
  }

  return (
    <div className="App">
      <button onClick={() => handleClick()}>BUTTON</button>
      <div>
        <audio id="audio" controls src={src} />
      </div>
    </div>
  );
}

export default App;

如果您想在按下执行

handleClick

的按钮后立即播放音频，您可以执行类似

document.querySelector('audio').play()

的操作。

Answer 2

我如何在前端获取像这里这样的音频文件名，我想要audio.mp3作为文件名