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

更新時間：2024年01月10日 09:16:52 作者：燈籠只能來教室體驗生活

這篇文章主要為大家詳細介紹了vue如何實現(xiàn)播放后端flask發(fā)送的mp3文件,文中的示例代碼講解詳細,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

演示

后端（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 請求參數(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)
            })
        }
    }