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

前端调用浏览器录音功能且生成文件(vue)

如果可以实现记得点赞分享,谢谢老铁~

首先在页面中给两个按钮,分别是“开始录音”,“结束录音”。以及录音成功后生成一个下载语音的链接。

1. 先看页面展示
<template><div><button @click="startRecording" :disabled="isRecording">Start Recording</button><button @click="stopRecording" :disabled="!isRecording">Stop Recording</button><a v-if="downloadLink" :href="downloadLink" download="recording.pcm">Download Recording</a></div>
</template>
2. 看vue3.0的代码实现
<script setup>
import { ref, onBeforeUnmount } from 'vue';const isRecording = ref(false);
const downloadLink = ref('');
let audioContext = null;
let processor = null;
let socket = null;
let mediaStream = null;
let audioChunks = [];
let silenceTimeout = null;
const silenceDelay = 2000; // 停止录音的延迟时间(毫秒)
const desiredSampleRate = 16000; // 期望的采样率为16kHzconst startRecording = async () => {try {mediaStream = await navigator.mediaDevices.getUserMedia({ audio: {sampleRate: desiredSampleRate,sampleSize: 16,channelCount: 1,} });audioContext = new (window.AudioContext || window.webkitAudioContext)({sampleRate: desiredSampleRate});const source = audioContext.createMediaStreamSource(mediaStream);processor = audioContext.createScriptProcessor(4096, 1, 1);source.connect(processor);processor.connect(audioContext.destination);socket = new WebSocket('ws://yourserver.com');socket.binaryType = 'arraybuffer';// 接收 WebSocket 消息socket.onmessage = (event) => {const receivedData = event.data;console.log('Received data from server:', receivedData);// 这里可以处理接收到的数据,例如显示在 UI 上};processor.onaudioprocess = processAudio;isRecording.value = true;audioChunks = []; // 清空之前的音频数据} catch (error) {console.error('Error accessing media devices.', error);}
};const stopRecording = async () => {if (processor) {processor.disconnect();}if (mediaStream) {mediaStream.getTracks().forEach(track => track.stop());}if (audioContext && audioContext.state !== 'closed') {await audioContext.close();audioContext = null}if (socket) {socket.close();}isRecording.value = false;createDownloadLink();
};const processAudio = (event) => {const inputBuffer = event.inputBuffer;const outputBuffer = new Float32Array(inputBuffer.length);inputBuffer.copyFromChannel(outputBuffer, 0);const pcmData = convertFloat32ToPCM(outputBuffer);// 检查音量是否为静音const isSilent = outputBuffer.every(sample => Math.abs(sample) < 0.01);if (!isSilent) {clearTimeout(silenceTimeout);silenceTimeout = setTimeout(() => stopRecording(), silenceDelay);}if (socket && socket.readyState === WebSocket.OPEN) {socket.send(pcmData);}audioChunks.push(pcmData);
};const convertFloat32ToPCM = (input) => {const buffer = new ArrayBuffer(input.length * 2);const output = new DataView(buffer);for (let i = 0; i < input.length; i++) {const s = Math.max(-1, Math.min(1, input[i]));output.setInt16(i * 2, s < 0 ? s * 0x8000 : s * 0x7FFF, true);}return buffer;
};const createDownloadLink = () => {const blob = new Blob(audioChunks, { type: 'application/octet-stream' });downloadLink.value = URL.createObjectURL(blob);
};onBeforeUnmount(() => {stopRecording();
});
</script>
解释

audioChunks 数组:
存储录音过程中的 PCM 数据块。

processAudio 方法:
将 PCM 数据块添加到 audioChunks 数组中。

stopRecording 方法:
停止录音,并调用 createDownloadLink 方法生成下载链接。

createDownloadLink 方法:
将存储的音频数据块创建为一个 Blob 对象,并生成一个下载链接。

downloadLink 变量:
存储生成的下载链接,供用户下载录音文件。

注意事项

确保WebSocket服务器可以处理PCM数据。
处理音频数据时,注意性能问题,避免阻塞主线程。
Web Audio API和WebSocket在不同浏览器上的实现可能会有所不同,确保在目标浏览器上测试。

OK,收工!如果可以实现记得点赞分享,谢谢老铁~

相关文章:

前端调用浏览器录音功能且生成文件(vue)

如果可以实现记得点赞分享&#xff0c;谢谢老铁&#xff5e; 首先在页面中给两个按钮&#xff0c;分别是“开始录音”&#xff0c;“结束录音”。以及录音成功后生成一个下载语音的链接。 1. 先看页面展示 <template><div><button click"startRecording…...

「大数据」Kappa架构

Kappa架构是一种处理大数据的架构&#xff0c;它作为Lambda架构的替代方案出现。Kappa架构的核心思想是简化数据处理流程&#xff0c;通过使用单一的流处理层来同时处理实时和批量数据&#xff0c;从而避免了Lambda架构中需要维护两套系统&#xff08;批处理层和速度层&#xf…...

详细分析Element Plus中的ElMessageBox弹窗用法(附Demo及模版)

目录 前言1. 基本知识2. Demo3. 实战4. 模版 前言 由于需要在登录时&#xff0c;附上一些用户说明书的弹窗 对于ElMessageBox的基本知识详细了解 可通过官网了解基本的语法知识ElMessageBox官网基本知识 1. 基本知识 Element Plus 是一个基于 Vue 3 的组件库&#xff0c;其中…...

Python自动化工具(桌面自动化、Web自动化、游戏辅助)

工具介绍 连点工具是一款可以模拟键鼠后台操作的连点器工具。支持鼠标连点、键鼠脚本录制&#xff0c;支持辅助您实现办公自动化以及辅助游戏操作。功能简洁易用&#xff0c;非常方便操作。连点工具让您在在玩游戏、网购抢购的时候全自动点击鼠标&#xff01;主要功能有&#…...

opencv进阶 ——(五)图像处理之马赛克

一、遍历图像并对每个马赛克区域进行像素化处理 for (int y 0; y < image.rows; y blockSize) {for (int x 0; x < image.cols; x blockSize) {cv::Rect rect cv::Rect(x, y, std::min(blockSize, image.cols - x), std::min(blockSize, image.rows - y));cv::Scal…...

电机控制系列模块解析(22)—— 零矢量刹车

一、零矢量刹车 基本概念 逆变器通常采用三相桥式结构&#xff0c;包含六个功率开关元件&#xff08;如IGBT或MOSFET&#xff09;&#xff0c;分为上桥臂和下桥臂。每个桥臂由两个反并联的开关元件组成&#xff0c;上桥臂和下桥臂对应于电机三相绕组的正负端。正常工作时&…...

自定义一个SpringBoot场景启动器

前言 一个刚刚看完SpringBoot自动装配原理的萌新依据自己的理解写下的文章&#xff0c;如有大神发现错误&#xff0c;敬请斧正&#xff0c;不胜感激。 分析SpringBoot自动配置原理 SpringBoot的启动从被SpringBootApplication修饰的启动类开始,SpringBootApplicaiotn注解中最…...

UDP的报文结构和注意事项

UDP协议是在传输层的协议。 UDP无连接&#xff0c;不可靠传输&#xff0c;面向数据报&#xff0c;全双工。 UDP的报文结构 学习网络协议&#xff0c;最主要的就是报文格式。 对于UDP来说&#xff0c;应用层的数据到达&#xff0c;UDP之后&#xff0c;就会给应用层的数据报前面…...

rust语言一些规则学习

目录 rust中迭代器的使用&#xff08;iter().map()与for循环的区别&#xff09;map()与for的描述区别总结 最后更新时间2024-05-24 rust中迭代器的使用&#xff08;iter().map()与for循环的区别&#xff09; map()与for的描述 rust源码中关于iter().map()函数的解释&#xff…...

QML基本语法介绍

为什么使用QML 开发者效率 将前后端分离,QML和JavaScript语言主要用于前度UI的方法,后端有C++来完成绘制。将JavaScript和C++分开能够快速迭代开发; 跨平台移植性 基于Qt平台的统一抽象概念,现在可以更加容易和快速和将Qt移植到更多的平台上。 开发的开放 Qt是由Qt-Proje…...

学习和分享关于 Vue.js 的路由(vue-router)

学习和分享关于 Vue.js 的路由&#xff08;vue-router&#xff09;是一个非常有价值的主题&#xff0c;因为路由是构建单页应用程序&#xff08;SPA&#xff09;的核心部分。本文将介绍 Vue.js 路由的基本概念和实现&#xff0c;并展示一个典型的项目目录结构。 目录 Vue.js 路…...

小猪APP分发:一站式免费应用推广解决方案

在竞争激烈的移动应用市场中&#xff0c;寻找一个高效且成本友好的方式来推广自己的应用程序&#xff0c;成为了众多开发者面临的共同挑战。幸运的是&#xff0c;像"小猪APP分发www.appzhu.cn"这样的平台应运而生&#xff0c;为开发者提供了一个全面、免费的应用分发…...

新抖:抖音的数据分析平台,敢用深色系,别的真不敢!

举报 评论 0...

独享IP是原生IP吗?二者有何区别?

原生IP&#xff1a; 原生IP是指由Internet服务提供商&#xff08;ISP&#xff09;直接分配给用户的IP地址&#xff0c;这些IP地址通常反映了用户的实际地理位置和网络连接。原生IP是用户在其所在地区或国家使用的真实IP地址&#xff0c;与用户的物理位置直接相关。在跨境电商中…...

AI大模型探索之路-实战篇7:Function Calling技术实战:自动生成函数

系列篇章&#x1f4a5; AI大模型探索之路-实战篇4&#xff1a;深入DB-GPT数据应用开发框架调研 AI大模型探索之路-实战篇5&#xff1a;探索Open Interpreter开放代码解释器调研 AI大模型探索之路-实战篇6&#xff1a;掌握Function Calling的详细流程 目录 系列篇章&#x1f4a…...

Android14 - 绘制系统 - 概览

从Android 12开始&#xff0c;Android的绘制系统有结构性变化&#xff0c; 在绘制的生产消费者模式中&#xff0c;新增BLASTBufferQueue&#xff0c;客户端进程自行进行queue的生产和消费&#xff0c;随后通过Transation提交到SurfaceFlinger&#xff0c;如此可以使得各进程将缓…...

Add object from object library 从对象库中添加内置器件

Add object from object library 从对象库中添加内置器件 正文正文 对于 Lumerical,有些时候我们在使用中,可能需要从 Object library 中添加器件,通常我们的做法是手动添加。如下图所示,我们添加一个 Directional Coupler 到我们的工程文件中: 但是这种操作方式不够智能…...

天诚公租房/人才公寓WiFi人脸识别物联网智能门锁解决方案

人才是引领城市高质量发展的重要因素&#xff0c;城市要想吸纳人才的保障便是人才公寓。近年来&#xff0c;全国各地一二三线城市都在大力建设人才公寓&#xff0c;集聚菁英人才&#xff0c;倾力打造人才高地。 一、人才公寓如火如荼建设 2023年底&#xff0c;山东德州提出三年…...

JAVA学习-练习试用Java实现“子集”

问题&#xff1a; 给定一个整数数组 nums&#xff0c;数组中的元素互不相同。返回该数组所有可能的子集&#xff08;幂集&#xff09;。解集不能包含重复的子集。可以按任意顺序返回解集。 示例 1&#xff1a; 输入&#xff1a;nums [1,2,3] 输出&#xff1a;[[],[1],[2],[…...

揭秘《庆余年算法番外篇》:范闲如何使用维吉尼亚密码解密二皇子密信

❤️❤️❤️ 欢迎来到我的博客。希望您能在这里找到既有价值又有趣的内容&#xff0c;和我一起探索、学习和成长。欢迎评论区畅所欲言、享受知识的乐趣&#xff01; 推荐&#xff1a;数据分析螺丝钉的首页 格物致知 终身学习 期待您的关注 导航&#xff1a; LeetCode解锁100…...

龙虎榜——20250610

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

Prompt Tuning、P-Tuning、Prefix Tuning的区别

一、Prompt Tuning、P-Tuning、Prefix Tuning的区别 1. Prompt Tuning(提示调优) 核心思想:固定预训练模型参数,仅学习额外的连续提示向量(通常是嵌入层的一部分)。实现方式:在输入文本前添加可训练的连续向量(软提示),模型只更新这些提示参数。优势:参数量少(仅提…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端

&#x1f31f; 什么是 MCP&#xff1f; 模型控制协议 (MCP) 是一种创新的协议&#xff0c;旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议&#xff0c;它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...

屋顶变身“发电站” ,中天合创屋面分布式光伏发电项目顺利并网!

5月28日&#xff0c;中天合创屋面分布式光伏发电项目顺利并网发电&#xff0c;该项目位于内蒙古自治区鄂尔多斯市乌审旗&#xff0c;项目利用中天合创聚乙烯、聚丙烯仓库屋面作为场地建设光伏电站&#xff0c;总装机容量为9.96MWp。 项目投运后&#xff0c;每年可节约标煤3670…...

零基础设计模式——行为型模式 - 责任链模式

第四部分&#xff1a;行为型模式 - 责任链模式 (Chain of Responsibility Pattern) 欢迎来到行为型模式的学习&#xff01;行为型模式关注对象之间的职责分配、算法封装和对象间的交互。我们将学习的第一个行为型模式是责任链模式。 核心思想&#xff1a;使多个对象都有机会处…...

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

sipsak:SIP瑞士军刀!全参数详细教程!Kali Linux教程!

简介 sipsak 是一个面向会话初始协议 (SIP) 应用程序开发人员和管理员的小型命令行工具。它可以用于对 SIP 应用程序和设备进行一些简单的测试。 sipsak 是一款 SIP 压力和诊断实用程序。它通过 sip-uri 向服务器发送 SIP 请求&#xff0c;并检查收到的响应。它以以下模式之一…...

初探Service服务发现机制

1.Service简介 Service是将运行在一组Pod上的应用程序发布为网络服务的抽象方法。 主要功能&#xff1a;服务发现和负载均衡。 Service类型的包括ClusterIP类型、NodePort类型、LoadBalancer类型、ExternalName类型 2.Endpoints简介 Endpoints是一种Kubernetes资源&#xf…...

C++:多态机制详解

目录 一. 多态的概念 1.静态多态&#xff08;编译时多态&#xff09; 二.动态多态的定义及实现 1.多态的构成条件 2.虚函数 3.虚函数的重写/覆盖 4.虚函数重写的一些其他问题 1&#xff09;.协变 2&#xff09;.析构函数的重写 5.override 和 final关键字 1&#…...

Java求职者面试指南:计算机基础与源码原理深度解析

Java求职者面试指南&#xff1a;计算机基础与源码原理深度解析 第一轮提问&#xff1a;基础概念问题 1. 请解释什么是进程和线程的区别&#xff1f; 面试官&#xff1a;进程是程序的一次执行过程&#xff0c;是系统进行资源分配和调度的基本单位&#xff1b;而线程是进程中的…...