当前位置: 首页 > 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…...

C++初阶-list的底层

目录 1.std::list实现的所有代码 2.list的简单介绍 2.1实现list的类 2.2_list_iterator的实现 2.2.1_list_iterator实现的原因和好处 2.2.2_list_iterator实现 2.3_list_node的实现 2.3.1. 避免递归的模板依赖 2.3.2. 内存布局一致性 2.3.3. 类型安全的替代方案 2.3.…...

(十)学生端搭建

本次旨在将之前的已完成的部分功能进行拼装到学生端&#xff0c;同时完善学生端的构建。本次工作主要包括&#xff1a; 1.学生端整体界面布局 2.模拟考场与部分个人画像流程的串联 3.整体学生端逻辑 一、学生端 在主界面可以选择自己的用户角色 选择学生则进入学生登录界面…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

生成 Git SSH 证书

&#x1f511; 1. ​​生成 SSH 密钥对​​ 在终端&#xff08;Windows 使用 Git Bash&#xff0c;Mac/Linux 使用 Terminal&#xff09;执行命令&#xff1a; ssh-keygen -t rsa -b 4096 -C "your_emailexample.com" ​​参数说明​​&#xff1a; -t rsa&#x…...

从零开始打造 OpenSTLinux 6.6 Yocto 系统(基于STM32CubeMX)(九)

设备树移植 和uboot设备树修改的内容同步到kernel将设备树stm32mp157d-stm32mp157daa1-mx.dts复制到内核源码目录下 源码修改及编译 修改arch/arm/boot/dts/st/Makefile&#xff0c;新增设备树编译 stm32mp157f-ev1-m4-examples.dtb \stm32mp157d-stm32mp157daa1-mx.dtb修改…...

12.找到字符串中所有字母异位词

&#x1f9e0; 题目解析 题目描述&#xff1a; 给定两个字符串 s 和 p&#xff0c;找出 s 中所有 p 的字母异位词的起始索引。 返回的答案以数组形式表示。 字母异位词定义&#xff1a; 若两个字符串包含的字符种类和出现次数完全相同&#xff0c;顺序无所谓&#xff0c;则互为…...

c#开发AI模型对话

AI模型 前面已经介绍了一般AI模型本地部署&#xff0c;直接调用现成的模型数据。这里主要讲述讲接口集成到我们自己的程序中使用方式。 微软提供了ML.NET来开发和使用AI模型&#xff0c;但是目前国内可能使用不多&#xff0c;至少实践例子很少看见。开发训练模型就不介绍了&am…...

Unity | AmplifyShaderEditor插件基础(第七集:平面波动shader)

目录 一、&#x1f44b;&#x1f3fb;前言 二、&#x1f608;sinx波动的基本原理 三、&#x1f608;波动起来 1.sinx节点介绍 2.vertexPosition 3.集成Vector3 a.节点Append b.连起来 4.波动起来 a.波动的原理 b.时间节点 c.sinx的处理 四、&#x1f30a;波动优化…...

安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

Kubernetes 节点自动伸缩(Cluster Autoscaler)原理与实践

在 Kubernetes 集群中&#xff0c;如何在保障应用高可用的同时有效地管理资源&#xff0c;一直是运维人员和开发者关注的重点。随着微服务架构的普及&#xff0c;集群内各个服务的负载波动日趋明显&#xff0c;传统的手动扩缩容方式已无法满足实时性和弹性需求。 Cluster Auto…...