vue实现播放后端flask发送的mp3文件
作者：灯笼只能来教室体验生活
这篇文章主要为大家详细介绍了vue如何实现播放后端flask发送的mp3文件,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
演示
后端（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>
js
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，就可以成功播放
到此这篇关于vue实现播放后端flask发送的mp3文件的文章就介绍到这了,更多相关vue播放mp3内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！