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

蓝牙 BLE 扫描面试题大全(2):进阶面试题与实战演练

前文覆盖了 BLE 扫描的基础概念与经典问题蓝牙 BLE 扫描面试题大全(1)&#xff1a;从基础到实战的深度解析-CSDN博客&#xff0c;但实际面试中&#xff0c;企业更关注候选人对复杂场景的应对能力&#xff08;如多设备并发扫描、低功耗与高发现率的平衡&#xff09;和前沿技术的…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

Python实现prophet 理论及参数优化

文章目录 Prophet理论及模型参数介绍Python代码完整实现prophet 添加外部数据进行模型优化 之前初步学习prophet的时候&#xff0c;写过一篇简单实现&#xff0c;后期随着对该模型的深入研究&#xff0c;本次记录涉及到prophet 的公式以及参数调优&#xff0c;从公式可以更直观…...

基于数字孪生的水厂可视化平台建设:架构与实践

分享大纲&#xff1a; 1、数字孪生水厂可视化平台建设背景 2、数字孪生水厂可视化平台建设架构 3、数字孪生水厂可视化平台建设成效 近几年&#xff0c;数字孪生水厂的建设开展的如火如荼。作为提升水厂管理效率、优化资源的调度手段&#xff0c;基于数字孪生的水厂可视化平台的…...

Redis数据倾斜问题解决

Redis 数据倾斜问题解析与解决方案 什么是 Redis 数据倾斜 Redis 数据倾斜指的是在 Redis 集群中&#xff0c;部分节点存储的数据量或访问量远高于其他节点&#xff0c;导致这些节点负载过高&#xff0c;影响整体性能。 数据倾斜的主要表现 部分节点内存使用率远高于其他节…...

回溯算法学习

一、电话号码的字母组合 import java.util.ArrayList; import java.util.List;import javax.management.loading.PrivateClassLoader;public class letterCombinations {private static final String[] KEYPAD {"", //0"", //1"abc", //2"…...

日常一水C

多态 言简意赅&#xff1a;就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过&#xff0c;当子类和父类的函数名相同时&#xff0c;会隐藏父类的同名函数转而调用子类的同名函数&#xff0c;如果要调用父类的同名函数&#xff0c;那么就需要对父类进行引用&#…...

Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

ThreadLocal 源码

ThreadLocal 源码 此类提供线程局部变量。这些变量不同于它们的普通对应物&#xff0c;因为每个访问一个线程局部变量的线程&#xff08;通过其 get 或 set 方法&#xff09;都有自己独立初始化的变量副本。ThreadLocal 实例通常是类中的私有静态字段&#xff0c;这些类希望将…...

五、jmeter脚本参数化

目录 1、脚本参数化 1.1 用户定义的变量 1.1.1 添加及引用方式 1.1.2 测试得出用户定义变量的特点 1.2 用户参数 1.2.1 概念 1.2.2 位置不同效果不同 1.2.3、用户参数的勾选框 - 每次迭代更新一次 总结用户定义的变量、用户参数 1.3 csv数据文件参数化 1、脚本参数化 …...