【web】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，就可以成功播放