最新国产好看的视频,伊人天堂AV在线,国产Aaaaaa视频,蜜臀视频在线观看一区,人妻av色图,密臀久久久精品影片,青青视频免费观看毛片,久草在线观看视,国产三级精品色情在线

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

 更新時(shí)間:2024年01月10日 09:16:52   作者:燈籠只能來(lái)教室體驗(yàn)生活  
這篇文章主要為大家詳細(xì)介紹了vue如何實(shí)現(xiàn)播放后端flask發(fā)送的mp3文件,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

演示

后端(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)題

    這篇文章主要介紹了解決element-ui的table表格控件表頭與內(nèi)容列不對(duì)齊問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • VUE3中的函數(shù)的聲明和使用

    VUE3中的函數(shù)的聲明和使用

    這篇文章主要介紹了VUE3中的函數(shù)的聲明和使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • vue+element項(xiàng)目實(shí)時(shí)監(jiān)聽(tīng)div寬度的變化

    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ò)解決

    在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)可視化界面

    一文詳解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
  • 談?wù)勎以趘ue-cli3中用預(yù)渲染遇到的坑

    談?wù)勎以趘ue-cli3中用預(yù)渲染遇到的坑

    這篇文章主要介紹了談?wù)勎以趘ue-cli3中用預(yù)渲染遇到的坑,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧
    2020-04-04
  • 使用Element實(shí)現(xiàn)表格表頭添加搜索圖標(biāo)和功能

    使用Element實(shí)現(xiàn)表格表頭添加搜索圖標(biāo)和功能

    這篇文章主要介紹了使用Element實(shí)現(xiàn)表格表頭添加搜索圖標(biāo)和功能,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-07-07
  • 利用Vue.js指令實(shí)現(xiàn)全選功能

    利用Vue.js指令實(shí)現(xiàn)全選功能

    最近做了兩個(gè)vue的項(xiàng)目,都需要實(shí)現(xiàn)全選反選的功能,兩個(gè)項(xiàng)目用了兩種實(shí)現(xiàn)方法,第一個(gè)項(xiàng)目用vue的computed,第二個(gè)項(xiàng)目用指令來(lái)實(shí)現(xiàn),用起來(lái),發(fā)覺(jué)指令更加方便。下面就來(lái)介紹如何利用指令來(lái)實(shí)現(xiàn)全選。
    2016-09-09
  • Vue3如何清空Reactive定義的數(shù)組

    Vue3如何清空Reactive定義的數(shù)組

    這篇文章主要介紹了Vue3如何清空Reactive定義的數(shù)組問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2023-10-10
  • Antd的table組件表格的序號(hào)自增操作

    Antd的table組件表格的序號(hào)自增操作

    這篇文章主要介紹了Antd的table組件表格的序號(hào)自增操作,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-10-10

最新評(píng)論

温宿县| 南木林县| 库伦旗| 海口市| 崇州市| 靖西县| 庆安县| 浦东新区| 杭州市| 临邑县| 德兴市| 襄城县| 安庆市| 乌海市| 芷江| 大方县| 罗甸县| 仪陇县| 海南省| 东明县| 钟祥市| 壶关县| 东丰县| 社会| 邵阳县| 雅江县| 柘荣县| 九龙城区| 定边县| 龙游县| 湟中县| 上杭县| 建宁县| 巴塘县| 赤峰市| 宜阳县| 马尔康县| 绍兴县| 丰都县| 教育| 德化县|