【web】vue 播放后端（flask）发送的 mp3 文件

文章目录

- 演示
- 后端（flask）
- 前端（vue3）
- 重要说明

演示

在这里插入图片描述

后端（flask）

后端返回的是 mp3 文件的 url，是可以直接在浏览器上打开后播放的
处理跨域请求
```
pip install flask-cors
```

后端代码

from flask import Flask, request, jsonify
from flask_cors import CORS# 我的 mp3 文件存放路径
audio_temp_dir = 'garbage_can'# static_folder 下的文件，可以直接通过 url 访问
app = Flask(__name__, static_folder=f'./{audio_temp_dir}')
# 全局跨域
CORS(app, supports_credentials=True)@app.route("/speech", methods=['POST'])
def transfer_text_to_speech():request_data = request.json# 处理 mp3 文件，得到文件名file_name = do_something()return jsonify({"""request.host_url : 后端 url（app.run() 时，控制台打印的那个 url）audio_temp_dir: 音频文件存放的文件夹（自定义的）file_name: mp3 文件"""'url': f'{request.host_url}{audio_temp_dir}/{file_name}'})if __name__ == '__main__':app.run(port=5000)

前端（vue3）

html

<template><!-- 演示中使用的是 element-plus 的 button 组件 --><button type="primary" @click="handleAudio"">播放</button><audio ref="audioPlayer" controls><source :src="audioUrl" type="audio/mpeg">Your browser does not support the audio element.</audio>
</template>

export default {name: "你的组件名",data() {return {audioUrl: null}},
}methods: {handleAudio() {axios.post('http://127.0.0.1:5000/speech', {// post 请求参数}).then(response => {// 后端返回的数据是 { url : xxxx }this.audioUrl = response.data.url;this.$refs.audioPlayer.src = this.audioUrl;// 直接播放声音this.$refs.audioPlayer.play();// 打印的链接是可以直接在浏览器端播放的console.log(this.audioUrl)})}}

重要说明

我尝试在 vue 中使用 v-model 来绑定 audio 标签的 src（得到响应后设置src），但是这样做无法正常播放音频，原因不明，知道的可以在评论区分享一下
如果通过设置标签的 ref 属性，再通过 this.$refs 设置 audio 标签的 src，就可以成功播放