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

LLM(3) : 浏览器录制16K的音频并上传到后端

news 2026/1/15 21:27:07

可被阿里云[qwen-audio-asr]大模型识别 

 HTML

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><title>录音并上传</title></head><body><button id="recordButton">开始/停止录音</button><audio id="audioPlayback" controls style="display:none;"></audio><script>let mediaRecorder;let audioChunks = [];let recording = false;document.getElementById('recordButton').addEventListener('click', () => {if (recording) {// 停止录音stopRecording();} else {// 开始录音startRecording();}});async function startRecording() {try {const stream = await navigator.mediaDevices.getUserMedia({audio: true});// 创建 MediaRecorder 实例，但不连接到任何音频输出mediaRecorder = new MediaRecorder(stream, {mimeType: 'audio/webm; codecs=opus'});mediaRecorder.ondataavailable = event => {audioChunks.push(event.data);};mediaRecorder.onstop = async () => {const audioBlob = new Blob(audioChunks, {type: 'audio/webm; codecs=opus'});const audioUrl = URL.createObjectURL(audioBlob);const audio = document.getElementById('audioPlayback');audio.src = audioUrl;audio.style.display = 'block';// 自动上传录音文件到后端接口await uploadAudioFile(audioBlob);// 清空 audioChunks 以便下次录音audioChunks = [];};mediaRecorder.start();recording = true;document.getElementById('recordButton').textContent = '停止录音';} catch (err) {console.error('Error accessing media devices.', err);}}function stopRecording() {if (mediaRecorder && mediaRecorder.state !== 'inactive') {mediaRecorder.stop();mediaRecorder.stream.getTracks().forEach(track => track.stop()); // 停止媒体流轨道}recording = false;document.getElementById('recordButton').textContent = '开始录音';}async function uploadAudioFile(blob) {const formData = new FormData();formData.append('file', blob, 'recording.webm');try {const response = await fetch('http://127.0.0.1:30025/sound', {method: 'POST',body: formData,});if (!response.ok) {throw new Error(`HTTP error! status: ${response.status}`);}const result = await response.json();console.log('Server response:', result);} catch (error) {console.error('There was a problem with the fetch operation:', error);}}</script></body>
</html>

python接口

@app.route('/sound', methods=['POST'])
def sound():file = request.files['file']# ... 处理文件return "SUCCESS"

相关文章：

LLM(3) : 浏览器录制16K的音频并上传到后端

可被阿里云[qwen-audio-asr]大模型识别 HTML <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8"><title>录音并上传</title></head><body><button id"recordButton">开始/停…...

编程日记 2025/1/21 9:54:24

PyTorch使用教程(13)-一文搞定模型的可视化和训练过程监控

一、简介 在现代深度学习的研究和开发中&#xff0c;模型的可视化和监控是不可或缺的一部分。PyTorch&#xff0c;作为一个流行的深度学习框架&#xff0c;通过其丰富的生态系统提供了多种工具来满足这一需求。其中&#xff0c;torch.utils.tensorboard 是一个强大的接口&…...

编程日记 2025/1/21 9:52:17

服务器日志自动上传到阿里云OSS备份

背景 公司服务器磁盘空间有限&#xff0c;只能存近15天日志&#xff0c;但是有时需要查看几个月前的日志&#xff0c;需要将服务器日志定时备份到某个地方&#xff0c;需要查询的时候有地方可查。 针对这个问题&#xff0c;想到3个解决方法&#xff1a; 1、买一个配置比较低…...

编程日记 2025/1/21 9:50:14

树莓派学习

飞书&#xff1a;https://hi06pny1nlj.feishu.cn/docx/GYsMdth7ooNlbJx8zBDcdbcPnec?fromfrom_copylink csdn&#xff1a;https://blog.csdn.net/qq_41685627/article/details/145250576 基础工作 安装和部署 1.1 树莓派三种连接电脑的方式 https://blog.csdn.net/weixin…...

编程日记 2025/1/21 9:48:12

NestJS中实现注入多个实现了同一个接口的Service

在NestJS中有一种场景&#xff0c;在注入的时候需要将多个实现了同一个接口的service都注入到系统里&#xff0c;而NestJS中默认时没有这种注入&#xff0c;此时我们可以使用一个变通的provider来实现这一功能。 看下面例子&#xff0c;假定我们有一个OSService接口&#xff0…...

编程日记 2025/1/21 9:47:10

Qt按钮美化教程

前言 Qt按钮美化主要有三种方式&#xff1a;QSS、属性和自绘 QSS 字体大小 font-size: 18px;文字颜色 color: white;背景颜色 background-color: rgb(10,88,163); 按钮边框 border: 2px solid rgb(114,188,51);文字对齐 text-align: left;左侧内边距 padding-left: 10…...

编程日记 2025/1/21 9:45:07

基于单片机的多功能蓝牙语音智能台灯（论文+源码）

1总体方案设计 通过需求分析&#xff0c;本设计多功能蓝牙语音智能台灯的系统框图如图2.1所示&#xff0c;系统架构包括主控制器STM32F103单片机、HC-06蓝牙通信模块、LU-ASR01语音识别模块、OLED液晶、LED灯、按键等器件&#xff0c;在使用时用户可以通过手机APP、语音识别、…...

编程日记 2025/1/21 9:42:58

第15章：Python TDD应对货币类开发变化（二）

写在前面 这本书是我们老板推荐过的&#xff0c;我在《价值心法》的推荐书单里也看到了它。用了一段时间 Cursor 软件后&#xff0c;我突然思考&#xff0c;对于测试开发工程师来说&#xff0c;什么才更有价值呢&#xff1f;如何让 AI 工具更好地辅助自己写代码&#xff0c;或许…...

编程日记 2025/1/21 9:41:55

算法随笔_13: 有效三角形的个数

上一篇:算法随笔_12:最短无序子数组-CSDN博客 题目描述如下: 给定一个包含非负整数的数组 nums &#xff0c;返回其中可以组成三角形三条边的三元组个数。 示例 1: 输入: nums [2,2,3,4] 输出: 3 解释:有效的组合是: 2,3,4 (使用第一个 2) 2,3,4 (使用第二个 2) 2,2,3 算法…...

编程日记 2025/1/21 9:36:48

WSL 2 自动更新 虚拟 IP 到 window hosts

window下的wsl2 开发中使用到 域名映射&#xff0c;但是WSL2 每次启动都会被分配一个虚拟的 ip 地址&#xff0c;每次启动虚拟ip 都不一样&#xff0c;导致要频繁 更改 window 的 hosts 文件&#xff0c;太麻烦了&#xff0c;所以写一个自动执行的 .sh 脚本&#xff0c;每次启动…...

编程日记 2025/1/21 9:29:41

我在广州学Mysql 系列——触发器的使用

ℹ️大家好&#xff0c;我是练小杰&#xff0c;这周是春节前的最后一周了&#xff0c;现在一双手数都能数得过来了&#xff01;&#xff01; 本播客将学习MYSQL中触发器的相关概念以及基础命令~~ 回顾&#xff1a;&#x1f449;【MYSQL视图相关例题】 数据库专栏&#x1f449;【…...

编程日记 2025/1/21 9:28:34

【useCallback Hook】在多次渲染中缓存组件中的函数，避免重复创建函数

文章目录 什么是 useCallback&#xff1f;基本语法 为什么需要 useCallback&#xff1f;示例1. 避免子组件重复创建函数2. 作为 useEffect 的依赖项 注意事项总结 在 React 开发中&#xff0c;性能优化是一个重要的主题。随着应用规模的增长&#xff0c;组件的重新渲染可能会变…...

编程日记 2025/1/21 9:26:29

2025/1/20 学习Vue的第三天

玩性太大了玩得也不开心&#xff0c;天天看电视刷视频。 内心实在空洞。 最近天天看小红书上的外国人&#xff0c;结实外国友人&#xff08;狗头&#xff09;哈哈哈认识了不少人&#xff0c;有埃及的有美国的&#xff0c;还有天天看菲利普吃糖葫芦哈哈哈哈哈一个阳光的德国大男…...

编程日记 2025/1/21 9:23:25

Kotlin Bytedeco OpenCV 图像图像49 仿射变换 图像裁剪

Kotlin Bytedeco OpenCV 图像图像49 仿射变换 图像裁剪 1 添加依赖2 测试代码3 测试结果 在OpenCV中&#xff0c;仿射变换&#xff08;Affine Transformation&#xff09;和透视变换&#xff08;Perspective Transformation&#xff09;是两种常用的图像几何变换方法。 变换方…...

编程日记 2025/1/21 9:18:21

金融项目实战 07|Python实现接口自动化——连接数据库和数据清洗、测试报告、持续集成

目录 一、投资模块&#xff08;投资接口投资业务&#xff09; 二、连接数据库封装 和 清洗数据 1、连接数据库 2、数据清洗 4、调用 三、批量执行测试用例 并 生成测试报告 四、持续集成 1、代码上传gitee 2、Jenkin持续集成 一、投资模块&#xff08;投资接口投资业务…...

编程日记 2025/1/21 9:15:11

（快速入门）保姆级详细的 Midjourney 基础教程

一、前言篇​ 1. 1. AI 绘图是什么？​ AI 绘画，顾名思义就是利用人工智能进行绘画，是人工智能生成内容（AIGC）的一个应用场景。其主要原理简单来说就是收集大量已有作品数据，通过算法对它们进行解析，最后再生成新作品，而算法也便是 AI 绘画的核心，是它得以爆火的基础…...

编程日记 2025/1/21 9:13:06

leetcode——找到字符串中所有字母异位词（java）

给定两个字符串 s 和 p&#xff0c;找到 s 中所有 p 的 异位词 的子串&#xff0c;返回这些子串的起始索引。不考虑答案输出的顺序。 示例 1: 输入: s "cbaebabacd", p "abc" 输出: [0,6] 解释: 起始索引等于 0 的子串是 "cba", 它是 "…...

编程日记 2025/1/21 9:09:00

大文件上传服务-后端V1V2

文章目录 大文件上传概述:minio分布式文件存储使用的一些技术校验MD5的逻辑 uploadV1 版本 1uploadv2 版本 2 大文件上传概述: 之前项目做了一个文件上传的功能,最近看到有面试会具体的问这个上传功能的细节&#xff0c;把之前做的项目拿过来总结一下&#xff0c;自己写的一个…...

编程日记 2025/1/21 9:07:56

Single-Model and Any-Modality for Video Object Tracking——2024——cvpr-阅读笔记

Single-Model and Any-Modality for Video Object Tracking 摘要相关工作创新处MethodShared embeddingModal promptingRGB Tracker based on TransformerOverall ExperiimentDatasetRGB-D samples are sourced from DepthTrackRGB-T samples are extracted from LasHeRRGB-E s…...

编程日记 2025/1/21 9:05:53

阳振坤：AI 大模型的基础是数据，AI越发达，数据库价值越大

2024年1月12日&#xff0c;第四届OceanBase数据库大赛决赛在北京圆满落幕。在大赛的颁奖典礼上&#xff0c;OceanBase 首席科学家阳振坤老师为同学们献上了一场主题为“爱上数据库”的公开课&#xff0c;他不仅分享了个人的成长历程&#xff0c;还阐述了对数据库行业现状与未来…...

编程日记 2025/1/21 9:02:47

VB.net复制Ntag213卡写入UID

本示例使用的发卡器&#xff1a;https://item.taobao.com/item.htm?ftt&id615391857885 一、读取旧Ntag卡的UID和数据 Private Sub Button15_Click(sender As Object, e As EventArgs) Handles Button15.Click轻松读卡技术支持:网站:Dim i, j As IntegerDim cardidhex, …...

编程新知 2026/1/15 5:29:50

盘古信息PCB行业解决方案：以全域场景重构，激活智造新未来

一、破局&#xff1a;PCB行业的时代之问 在数字经济蓬勃发展的浪潮中&#xff0c;PCB&#xff08;印制电路板&#xff09;作为 “电子产品之母”&#xff0c;其重要性愈发凸显。随着 5G、人工智能等新兴技术的加速渗透&#xff0c;PCB行业面临着前所未有的挑战与机遇。产品迭代…...

编程新知 2026/1/14 13:39:00

STM32+rt-thread判断是否联网

一、根据NETDEV_FLAG_INTERNET_UP位判断 static bool is_conncected(void) {struct netdev *dev RT_NULL;dev netdev_get_first_by_flags(NETDEV_FLAG_INTERNET_UP);if (dev RT_NULL){printf("wait netdev internet up...");return false;}else{printf("loc…...

编程新知 2025/9/23 20:06:08

最新SpringBoot+SpringCloud+Nacos微服务框架分享

文章目录 前言一、服务规划二、架构核心1.cloud的pom2.gateway的异常handler3.gateway的filter4、admin的pom5、admin的登录核心 三、code-helper分享总结 前言 最近有个活蛮赶的&#xff0c;根据Excel列的需求预估的工时直接打骨折&#xff0c;不要问我为什么&#xff0c;主要…...

编程新知 2026/1/15 6:11:24

MVC 数据库

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

编程新知 2025/10/30 4:58:11

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

编程新知 2025/10/24 9:13:44

三体问题详解

从物理学角度&#xff0c;三体问题之所以不稳定&#xff0c;是因为三个天体在万有引力作用下相互作用&#xff0c;形成一个非线性耦合系统。我们可以从牛顿经典力学出发&#xff0c;列出具体的运动方程&#xff0c;并说明为何这个系统本质上是混沌的&#xff0c;无法得到一般解…...

编程新知 2025/10/19 5:14:05

全面解析各类VPN技术：GRE、IPsec、L2TP、SSL与MPLS VPN对比

目录 引言 VPN技术概述 GRE VPN 3.1 GRE封装结构 3.2 GRE的应用场景 GRE over IPsec 4.1 GRE over IPsec封装结构 4.2 为什么使用GRE over IPsec&#xff1f; IPsec VPN 5.1 IPsec传输模式&#xff08;Transport Mode&#xff09; 5.2 IPsec隧道模式&#xff08;Tunne…...

编程新知 2025/11/3 0:44:41

如何理解 IP 数据报中的 TTL？

目录 前言理解 前言 面试灵魂一问&#xff1a;说说对 IP 数据报中 TTL 的理解&#xff1f;我们都知道&#xff0c;IP 数据报由首部和数据两部分组成&#xff0c;首部又分为两部分&#xff1a;固定部分和可变部分&#xff0c;共占 20 字节&#xff0c;而即将讨论的 TTL 就位于首…...

编程新知 2026/1/15 8:01:11

Java多线程实现之Thread类深度解析

Java多线程实现之Thread类深度解析 一、多线程基础概念1.1 什么是线程1.2 多线程的优势1.3 Java多线程模型 二、Thread类的基本结构与构造函数2.1 Thread类的继承关系2.2 构造函数 三、创建和启动线程3.1 继承Thread类创建线程3.2 实现Runnable接口创建线程 四、Thread类的核心…...

编程新知 2025/8/28 21:52:02