如何播放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()的操作。