vue實(shí)現(xiàn)播放后端flask發(fā)送的mp3文件
演示

后端(flask)
后端返回的是 mp3 文件的 url,是可以直接在瀏覽器上打開(kāi)后播放的
處理跨域請(qǐng)求
pip install flask-cors
后端代碼
from flask import Flask, request, jsonify
from flask_cors import CORS
# 我的 mp3 文件存放路徑
audio_temp_dir = 'garbage_can'
# static_folder 下的文件,可以直接通過(guò) url 訪問(wèn)
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() 時(shí),控制臺(tái)打印的那個(gè) 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 請(qǐng)求參數(shù)
}).then(response => {
// 后端返回的數(shù)據(jù)是 { url : xxxx }
this.audioUrl = response.data.url;
this.$refs.audioPlayer.src = this.audioUrl;
// 直接播放聲音
this.$refs.audioPlayer.play();
// 打印的鏈接是可以直接在瀏覽器端播放的
console.log(this.audioUrl)
})
}
}重要說(shuō)明
我嘗試在 vue 中使用 v-model 來(lái)綁定 audio 標(biāo)簽的 src(得到響應(yīng)后設(shè)置src),但是這樣做無(wú)法正常播放音頻,原因不明
如果通過(guò)設(shè)置標(biāo)簽的 ref 屬性,再通過(guò) this.$refs 設(shè)置 audio 標(biāo)簽的 src,就可以成功播放
到此這篇關(guān)于vue實(shí)現(xiàn)播放后端flask發(fā)送的mp3文件的文章就介紹到這了,更多相關(guān)vue播放mp3內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
解決element-ui的table表格控件表頭與內(nèi)容列不對(duì)齊問(wèn)題
這篇文章主要介紹了解決element-ui的table表格控件表頭與內(nèi)容列不對(duì)齊問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07
vue+element項(xiàng)目實(shí)時(shí)監(jiān)聽(tīng)div寬度的變化
這篇文章主要介紹了vue+element項(xiàng)目里實(shí)時(shí)監(jiān)聽(tīng)某個(gè)div寬度的變化,然后執(zhí)行相應(yīng)的事件,本文結(jié)合示例代碼給大家介紹的非常詳細(xì),感興趣的朋友一起看看吧2024-08-08
在uni-app中使用element-ui的方法與報(bào)錯(cuò)解決
我們?cè)陂_(kāi)web開(kāi)發(fā)的時(shí)候,經(jīng)常會(huì)使用到element或者uview-ui,下面這篇文章主要給大家介紹了關(guān)于在uni-app中使用element-ui的方法與報(bào)錯(cuò)解決的相關(guān)資料,需要的朋友可以參考下2022-04-04
一文詳解Vue如何整合Echarts實(shí)現(xiàn)可視化界面
ECharts,縮寫來(lái)自Enterprise Charts,商業(yè)級(jí)數(shù)據(jù)圖表,一個(gè)純Javascript的圖表庫(kù),可以流暢的運(yùn)行在PC和移動(dòng)設(shè)備上。本文將在Vue中整合Echarts實(shí)現(xiàn)可視化界面,感興趣的可以了解一下2022-04-04
使用Element實(shí)現(xiàn)表格表頭添加搜索圖標(biāo)和功能
這篇文章主要介紹了使用Element實(shí)現(xiàn)表格表頭添加搜索圖標(biāo)和功能,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07

