网站查询 工信部,手机微网站平台登录入口,南昌企业做网站设计,erp系统下载手机版文章目录 演示后端#xff08;flask#xff09;前端#xff08;vue3#xff09;重要说明 演示 后端#xff08;flask#xff09;
后端返回的是 mp3 文件的 url#xff0c;是可以直接在浏览器上打开后播放的处理跨域请求pip install flask-cors后端代码from flask impor… 文章目录 演示后端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_folderf./{audio_temp_dir})
# 全局跨域
CORS(app, supports_credentialsTrue)app.route(/speech, methods[POST])
def transfer_text_to_speech():request_data request.json# 处理 mp3 文件得到文件名file_name do_something()return jsonify({request.host_url : 后端 urlapp.run() 时控制台打印的那个 urlaudio_temp_dir: 音频文件存放的文件夹自定义的file_name: mp3 文件url: f{request.host_url}{audio_temp_dir}/{file_name}})if __name__ __main__:app.run(port5000)
前端vue3
htmltemplate!-- 演示中使用的是 element-plus 的 button 组件 --button typeprimary clickhandleAudio播放/buttonaudio refaudioPlayer controlssource :srcaudioUrl typeaudio/mpegYour browser does not support the audio element./audio
/templatejsexport 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就可以成功播放
