当前位置: 首页 > news >正文

【web】vue 播放后端(flask)发送的 mp3 文件

文章目录

    • 演示
    • 后端(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_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,就可以成功播放

相关文章:

【web】vue 播放后端(flask)发送的 mp3 文件

文章目录 演示后端&#xff08;flask&#xff09;前端&#xff08;vue3&#xff09;重要说明 演示 后端&#xff08;flask&#xff09; 后端返回的是 mp3 文件的 url&#xff0c;是可以直接在浏览器上打开后播放的处理跨域请求pip install flask-cors后端代码from flask impor…...

vmware安装openEuler 22.03 LTS操作系统

vmware安装openEuler 22.03 LTS操作系统 1、下载openEuler操作系统镜像文件2、安装openEuler操作系统3、配置openEuler操作系统3.1、配置静态IP地址 和 dns3.2、查看磁盘分区3.3、查看系统版本 1、下载openEuler操作系统镜像文件 官网下载链接 链接: https://www.openeuler.or…...

Android registerForActivityResult

startActivityForResult 已经被标记为不推荐的方法&#xff0c;推荐的替代方案是使用 registerForActivityResult&#xff1a; // Activity 的 onCreate 方法中调用 registerForActivityResult val activityResultLauncher registerForActivityResult(ActivityResultContract…...

【CSS】布局方式梳理和总结

1. 前言 网页布局是CSS的重点功能&#xff0c;布局的传统方案是基于盒子模型&#xff0c;依靠display属性、position属性和float属性&#xff0c;它对一些特殊布局很麻烦。 CSS3推出的Flex布局和网格布局&#xff0c;让开发者更容易定制自己想要的布局。本篇梳理和总结一些布局…...

PHP计算某时间段内有几个周及某时间为今年第几周函数

date_default_timezone_set(PRC); function count_weeks($startDate, $endDate ){//开始时间$startDate date(Y-m-d, $startDate);//结束时间if(empty($endDate)) {$endDate date(Y-m-d);}else{$endDate date(Y-m-d, $endDate);}//跨越天数$n (strtotime($endDate)-strtot…...

华为无线AC内三层漫游配置详解

重要说明 1、在一台ac中实现三层漫游 2、ac和核心的互联vlan和ap的管理vlan是同一个广播域&#xff0c;可以不用配option 43 3、直接转发模式&#xff0c;ac上可以不起业务vlan&#xff0c;ac和核心交换机上可以只放行一个互联vlan 10 4、ac上要启两个vap魔板&#xff0c;两个…...

GPT-5、开源、更强的ChatGPT!OpenAI公布2024年计划

年终岁尾&#xff0c;正值圣诞节热闹气氛的OpenAI写下了2024年的发展清单。 OpenAI联合创始人兼首席执行官Sam Altman在社交平台公布&#xff0c;AGI&#xff08;稍晚一些&#xff09;、GPT-5、更好的语音模型、更高的费率限制&#xff1b; 更好的GPTs&#xff1b;更好的推理…...

java idea中做一个简易的图书管理系统(控制台输入输出,无数据库)

1&#xff1a;先创建增删改查四个接口 &#xff08;1&#xff09;QueryBook查询接口 package com.by.dao;import com.by.entity.Book;public interface QueryBook {/*** 查询所有图书信息* param bs*/void selectBook(Book[] bs);/*** 根据名字查询一个图书信息* param bookN…...

C# PrinterSettings修改打印机纸张类型,paperType

需求&#xff1a;直接上图&#xff0c;PrinterSettings只能改变纸张大小&#xff0c;打印质量&#xff0c;无法更改打印纸类型 爱普生打印机打印照片已经设置了最高质量&#xff0c;打印图片仍不清晰&#xff0c;需要修改打印纸类型&#xff0c;使用PrintDialog调出对话框&…...

TV端Web页面性能优化实践

01 背景 随着互联网技术的持续创新和电视行业的高速发展&#xff0c;通过电视观看在线视频已经逐渐成为大众的重要娱乐方式。奇异果App作为在TV设备上用户活跃度最高的应用之一&#xff0c;为广大用户提供了丰富的内容播放服务&#xff0c;除此之外&#xff0c;同样有会员运营、…...

2023年终总结

前言&#xff1a; 嘻嘻&#xff0c;12月底广州降温了又到了写年终总结的时间&#xff0c;这也是我第二年写年终总结。今年的年终总结主要记录了我大三下学期和大四上学期这两个时间段的学习和收获&#xff0c;也是我尝试走出校园&#xff0c;接触社会的第一年&#xff08;感触…...

深入探索MongoDB集群模式:从高可用复制集

MongoDB复制集概述 MongoDB复制集主要用于实现服务的高可用性&#xff0c;与Redis中的哨兵模式相似。它的核心作用是数据的备份和故障转移。 复制集的主要功能 数据复制&#xff1a;数据写入主节点&#xff08;Primary&#xff09;时&#xff0c;自动复制到一个或多个副本节…...

gem5学习(8):创建一个简单的缓存对象--Creating a simple cache object

目录 一、SimpleCache SimObject 二、Implementing the SimpleCache 1、getSlavePort() 2、handleRequest() 3、AccessEvent() 4、accessTiming() &#xff08;1&#xff09;缓存命中&#xff1a;sendResponse() &#xff08;2&#xff09;缓存未命中&#xff1a; 三、…...

【PTA-C语言】实验七-函数与指针I

如果代码存在问题&#xff0c;麻烦大家指正 ~ ~有帮助麻烦点个赞 ~ ~ 目录——实验七-函数与指针I 6-1 弹球距离&#xff08;分数 10&#xff09;6-2 使用函数输出一个整数的逆序数&#xff08;分数 10&#xff09;6-3 使用函数求最大公约数&#xff08;分数 10&#xff09;6-4…...

C# 让数据保留小数后两位,不足的补充0

在C#中&#xff0c;可以使用Math.Floor、Math.Ceiling或者Math.Round方法结合字符串格式化来实现小数点后两位的保留&#xff0c;并在不足的情况下补充0。 以下是一个例子&#xff1a; double value 1.2345; string formattedValue value.ToString("0.00"); // 输…...

RK3568驱动指南|第九篇 设备模型-第92章 引用计数器实验

瑞芯微RK3568芯片是一款定位中高端的通用型SOC&#xff0c;采用22nm制程工艺&#xff0c;搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码&#xff0c;支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU&#xff0c;可用于轻量级人工…...

苹果电脑Dock栏优化软件 mac功能亮点

hyperdock mac是一款Dock优化软件&#xff0c;hyperdock支持使用窗口自动排列功能&#xff0c;您可以直接通过将窗口拖拉至屏幕上方来快速最大化至全屏&#xff0c;又或者拖动到左右来进行左分屏和右分屏。而且Dock优化软件还有一个特色便是对Dock的强大管理哪里能力&#xff0…...

【UE5蓝图】读取本地json文件修改窗口大小

效果 插件 蓝图 1.判断文件存在 2.1文件不存在&#xff0c;生成文件 {"ResolutionX":540, "ResolutionY":960} 2.2文件存在&#xff0c;直接读取 3.设置窗口大小 遇到的坑 1.分辨率太大&#xff0c;导致效果不理想&#xff0c;建议先往小填写。 2.选对…...

ACM32F403/F433 12 位多通道国产芯片,支持 MPU 存储保护功能,应用于工业控制,智能家居等产品中

ACM32F403/F433 芯片的内核基于 ARMv8-M 架构&#xff0c;支持 Cortex-M33 和 Cortex-M4F 指令集。芯片内核 支持一整套DSP指令用于数字信号处理&#xff0c;支持单精度FPU处理浮点数据&#xff0c;同时还支持Memory Protection Unit &#xff08;MPU&#xff09;用于提升应用的…...

2024最新前端React面试题:JSX是什么,它和JS有什么区别

JSX是什么&#xff0c;它和JS有什么区别 回答思路&#xff1a;1.编写方式--->2.分别是什么&#xff1f;--->3.分别是怎么编译的&#xff1f;1.编写方式2.分别是什么&#xff1f;3.分别是怎么编译的&#xff1f; 回答思路&#xff1a;1.编写方式—>2.分别是什么&#x…...

使用docker在3台服务器上搭建基于redis 6.x的一主两从三台均是哨兵模式

一、环境及版本说明 如果服务器已经安装了docker,则忽略此步骤,如果没有安装,则可以按照一下方式安装: 1. 在线安装(有互联网环境): 请看我这篇文章 传送阵>> 点我查看 2. 离线安装(内网环境):请看我这篇文章 传送阵>> 点我查看 说明&#xff1a;假设每台服务器已…...

龙虎榜——20250610

上证指数放量收阴线&#xff0c;个股多数下跌&#xff0c;盘中受消息影响大幅波动。 深证指数放量收阴线形成顶分型&#xff0c;指数短线有调整的需求&#xff0c;大概需要一两天。 2025年6月10日龙虎榜行业方向分析 1. 金融科技 代表标的&#xff1a;御银股份、雄帝科技 驱动…...

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

基于uniapp+WebSocket实现聊天对话、消息监听、消息推送、聊天室等功能,多端兼容

基于 ​UniApp + WebSocket​实现多端兼容的实时通讯系统,涵盖WebSocket连接建立、消息收发机制、多端兼容性配置、消息实时监听等功能,适配​微信小程序、H5、Android、iOS等终端 目录 技术选型分析WebSocket协议优势UniApp跨平台特性WebSocket 基础实现连接管理消息收发连接…...

CMake基础:构建流程详解

目录 1.CMake构建过程的基本流程 2.CMake构建的具体步骤 2.1.创建构建目录 2.2.使用 CMake 生成构建文件 2.3.编译和构建 2.4.清理构建文件 2.5.重新配置和构建 3.跨平台构建示例 4.工具链与交叉编译 5.CMake构建后的项目结构解析 5.1.CMake构建后的目录结构 5.2.构…...

深入理解JavaScript设计模式之单例模式

目录 什么是单例模式为什么需要单例模式常见应用场景包括 单例模式实现透明单例模式实现不透明单例模式用代理实现单例模式javaScript中的单例模式使用命名空间使用闭包封装私有变量 惰性单例通用的惰性单例 结语 什么是单例模式 单例模式&#xff08;Singleton Pattern&#…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

【Java_EE】Spring MVC

目录 Spring Web MVC ​编辑注解 RestController RequestMapping RequestParam RequestParam RequestBody PathVariable RequestPart 参数传递 注意事项 ​编辑参数重命名 RequestParam ​编辑​编辑传递集合 RequestParam 传递JSON数据 ​编辑RequestBody ​…...

面向无人机海岸带生态系统监测的语义分割基准数据集

描述&#xff1a;海岸带生态系统的监测是维护生态平衡和可持续发展的重要任务。语义分割技术在遥感影像中的应用为海岸带生态系统的精准监测提供了有效手段。然而&#xff0c;目前该领域仍面临一个挑战&#xff0c;即缺乏公开的专门面向海岸带生态系统的语义分割基准数据集。受…...

免费PDF转图片工具

免费PDF转图片工具 一款简单易用的PDF转图片工具&#xff0c;可以将PDF文件快速转换为高质量PNG图片。无需安装复杂的软件&#xff0c;也不需要在线上传文件&#xff0c;保护您的隐私。 工具截图 主要特点 &#x1f680; 快速转换&#xff1a;本地转换&#xff0c;无需等待上…...