黑豹程序员-h5前端录音、播放
H5支持页面中调用录音机进行录音
H5加入录音组件,录音后可以进行播放,并形成录音文件,其采样率固化48000,传言是google浏览器的BUG,它无法改动采样率。
大BUG,目前主流的支持16000hz的采样率。
录音组件
D:\workspace\vue\vzx-admin\src\components\Recorder\recorder.vue
<template><div><button @click="startRecording" :disabled="isRecording">开始录音</button> <button @click="stopRecording" :disabled="!isRecording">停止录音</button> <el-checkbox size="small" checked="isplay">是否播放</el-checkbox></div>
</template><script>
import axios from "axios";export default {data() {return {mediaRecorder: null,isRecording: false,chunks: [],isplay: true};},methods: {async startRecording() {const stream = await navigator.mediaDevices.getUserMedia({ audio: true });let track = stream.getAudioTracks()[0];//获取音频文件的信息console.log(track.getCapabilities());this.mediaRecorder = new MediaRecorder(stream);this.chunks = [];this.mediaRecorder.ondataavailable = (event) => {if (event.data.size > 0) {this.chunks.push(event.data);}};this.mediaRecorder.onstop = () => {const audioBlob = new Blob(this.chunks, { type: 'audio/wav' });const audioUrl = URL.createObjectURL(audioBlob);// ==在这里你可以处理录制完成的音频,比如播放或上传到服务器===========// 创建FormData对象let formData = new FormData();// 第一个参数是后台接收的文件参数名,第二个参数是blob数据,第三个参数是文件名formData.append('file', audioBlob, 'rd.wav');// 发送ajax请求axios.post('http://localhost:6070/basic/coursepic', formData, {headers: {'Content-Type': 'multipart/form-data'}}).then(response => {// 处理响应数据console.log(response)}).catch(error => {// 处理错误console.log(error)})//==播放=================if(this.isplay){var audio=document.createElement("audio");audio.controls=true;document.body.appendChild(audio);audio.src=audioUrl;audio.play(); //这样就能播放了audio.style.display = "none";//注意不用了时需要revokeObjectURL,否则霸占内存setTimeout(function(){ URL.revokeObjectURL(audio.src) },5000);}};this.mediaRecorder.start();this.isRecording = true;},stopRecording() {if (this.mediaRecorder && this.isRecording) {this.mediaRecorder.stop();this.isRecording = false;}},},
};
</script>
测试页面
<template><Recorder />
</template><script setup>
import Recorder from '../../components/Recorder/recorder.vue';</script>
相关文章:
黑豹程序员-h5前端录音、播放
H5支持页面中调用录音机进行录音 H5加入录音组件,录音后可以进行播放,并形成录音文件,其采样率固化48000,传言是google浏览器的BUG,它无法改动采样率。 大BUG,目前主流的支持16000hz的采样率。 录音组件 …...

Leetcode622.设计循环队列
本专栏内容为:leetcode刷题专栏,记录了leetcode热门题目以及重难点题目的详细记录 💓博主csdn个人主页:小小unicorn ⏩专栏分类:Leetcode 🚚代码仓库:小小unicorn的代码仓库🚚 &…...

二十二、【形状工具组】
文章目录 基础图形多边形直线工具自定义形状工具 形状工具组画的图形是矢量图形,在放大和缩小后像素不变看起来不会模糊,位图和矢量图形的存储方式不一样,位图的存储方式是按各个像素的数据来进行存储的,而矢量图形是根据算法来进…...
设计模式~迭代器模式(Iterator)-20
目录 迭代器模式(Iterator) (1)优点 (2)缺点 (3)使用场景 (4)注意事项 (5)应用实例: 代码 迭代器模式(Iterator) 迭代器模式(…...

亳州市的自然风光与旅游资源:欣赏安徽省中部的壮丽景色
亳州市是中国安徽省的一个地级市,位于该省的中部。 亳州市辖区包括谯城区、涡阳县、蒙城县和利辛县等地。亳州市拥有悠久的历史和丰富的文化遗产,同时也以其独特的自然风光而闻名。 首先,让我们来了解一下亳州的历史和景点。亳州的历史可以…...

windows安装nvm以及解决yarn问题
源代码 下载 下一步一下步安装即可 检查是否安装成功 nvm出现上面的代码即可安装成功 常用命令 查看目前安装的node版本 nvm list [available]说明没有安装任何版本,下面进行安装 nvm install 18.14使用该版本 node use 18.14.2打开一个新的cmd输入node -…...

【TA 挖坑04】薄膜干涉 镭射材质 matcap
镭射材质,相对物理的实现? 万物皆可镭射,个性吸睛的材质渲染技术 - 知乎 (zhihu.com) 薄膜干涉材质,matcap更trick的方法?matcapremap, MatCap原理介绍及应用 - 知乎 (zhihu.com) 庄懂的某节课也做了mat…...
OpenCV13-图像噪声:椒盐噪声和高斯噪声
OpenCV13-图像噪声:椒盐噪声和高斯噪声 1.噪声种类2.椒盐噪声3.高斯噪声 1.噪声种类 图像噪声是指图像中的随机或非随机的不希望的视觉扰动。它可以出现在数字图像中的各种形式,例如颗粒状噪声、条纹、斑点、模糊、失真等。图像噪声可能是由于图像采集过…...
天堂2服务器基本设置
[system] server_nameLocal Server ——〉服务器名称 server_rulesPvP http_host127.0.0.1 ——〉HTTP注册页面(需先搭建IIS服务器) http_port8080 rs_host127.0.0.1——〉填你IP rs_port3724 ws_host127.0.0.1 ——〉填你的IP就对啦 ws_port8085 wor…...

如何解决网站被攻击的问题
在当今数字化时代,网站攻击已经成为互联网上的一个常见问题。这些攻击可能会导致数据泄漏、服务中断和用户信息安全问题。然而,我们可以采取一些简单的措施来解决这些问题,以确保网站的安全性和可用性。 使用强密码和多因素认证 密码是保护网…...

python爬虫入门详细教程-采集云南招聘网数据保存为csv文件
python爬虫之User-Agent大全、随机获取User-Agent 网站地址数据提取技术介绍采集目标流程分析python代码实现 网站地址 https://www.ynzp.com/ 这个网址特别适合新手拿来练习,你采集多了还有个验证码页面,验证码是4位数字,很清晰,…...

1.13.C++项目:仿muduo库实现并发服务器之TcpServer模块的设计
文章目录 一、LoopThreadPool模块二、实现思想(一)管理(二)流程(三)功能设计 三、代码 一、LoopThreadPool模块 TcpServer模块: 对所有模块的整合,通过 tcpserver 模块实例化的对象&…...

Spring(17) AopContext.currentProxy() 类内方法调用切入
目录 一、简介二、代码示例2.1 接口类2.2 接口实现类2.3 AOP切面类2.4 启动类(测试)2.5 执行结果 一、简介 背景: 在之前 Spring 的 AOP 用法中,只有代理的类才会被切入。例如:我们在 Controller 层调用 Service 的方式…...
自己的类支持基于范围的for循环 (深入探索)
自己的类支持基于范围的for循环 (深入探索) 编译器实际运行伪代码为: auto && __range range_expression; auto __begin begin_expr; auto __end end_expr; for (; __begin ! __end; __begin) {range_declaration *__begin;loop_statement }观察伪代码࿰…...

Multi Scale Supervised 3D U-Net for Kidney and Tumor Segmentation
目录 摘要1 引言2 方法2.1 预处理和数据增强2.2 网络的体系结构2.3 训练过程2.4 推理与后处理 3 实验与结果4 结论与讨论 摘要 U-Net在各种医学图像分割挑战中取得了巨大成功。一些新的、带有花里胡哨功能的架构可能在某些数据集中在使用最佳超参数时取得成功,但它们…...
《操作系统真象还原》第一章 部署工作环境
ref:https://www.bilibili.com/video/BV1kg4y1V7TV/?spm_id_from333.999.0.0&vd_source3f7ae4b9d3a2d84bf24ff25f3294d107 https://www.bilibili.com/video/BV1SQ4y1A7ZE/?spm_id_from333.337.search-card.all.click&vd_source3f7ae4b9d3a2d84bf24ff25f32…...

SpringCloud-Config
一、介绍 (1)服务注册中心 (2)管理各个服务上的application.yml,支持动态修改,但不会影响客户端配置 (3)一般将application.yml文件放在git上,客户端通过http/https方式…...
劣币驱良币的 pacing 之殇
都说 pacing 好 burst 孬(参见:为啥 pacing),就像都知道金币好,掺铁金币孬一样。可现实中掺铁的金币流通性却更好,劣币驱良币。劣币流通性好在卖方希望收到别人的良币而储存,而自己作为买方只使用劣币。 burst 和 pac…...
Gin 中的 Session(会话控制)
Session 介绍 session和cookie实现的底层目标是一致的,但是从根本而言实现的方法是不同的; session 是另一种记录客户状态的机制, 不同的是 Cookie 保存在客户端浏览器中,而 session保存 在服务器上 ; Session 的工作流程 当客户端浏览器第一次访问服务器并发送请求时,服…...

ChatGPT AIGC 实现数据分析可视化三维空间展示效果
使用三维空间图展示数据有以下一些好处: 1可视化复杂性:三维图可以展示三个或更多的变量,一眼就能看出数据各维度之间的关系,使复杂数据的理解和分析变得更为直观。 2检测模式和趋势:通过三维图,用户可以…...
<6>-MySQL表的增删查改
目录 一,create(创建表) 二,retrieve(查询表) 1,select列 2,where条件 三,update(更新表) 四,delete(删除表…...

理解 MCP 工作流:使用 Ollama 和 LangChain 构建本地 MCP 客户端
🌟 什么是 MCP? 模型控制协议 (MCP) 是一种创新的协议,旨在无缝连接 AI 模型与应用程序。 MCP 是一个开源协议,它标准化了我们的 LLM 应用程序连接所需工具和数据源并与之协作的方式。 可以把它想象成你的 AI 模型 和想要使用它…...
LLM基础1_语言模型如何处理文本
基于GitHub项目:https://github.com/datawhalechina/llms-from-scratch-cn 工具介绍 tiktoken:OpenAI开发的专业"分词器" torch:Facebook开发的强力计算引擎,相当于超级计算器 理解词嵌入:给词语画"…...

IoT/HCIP实验-3/LiteOS操作系统内核实验(任务、内存、信号量、CMSIS..)
文章目录 概述HelloWorld 工程C/C配置编译器主配置Makefile脚本烧录器主配置运行结果程序调用栈 任务管理实验实验结果osal 系统适配层osal_task_create 其他实验实验源码内存管理实验互斥锁实验信号量实验 CMISIS接口实验还是得JlINKCMSIS 简介LiteOS->CMSIS任务间消息交互…...

让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比
在机器学习的回归分析中,损失函数的选择对模型性能具有决定性影响。均方误差(MSE)作为经典的损失函数,在处理干净数据时表现优异,但在面对包含异常值的噪声数据时,其对大误差的二次惩罚机制往往导致模型参数…...

回溯算法学习
一、电话号码的字母组合 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"…...

Mysql中select查询语句的执行过程
目录 1、介绍 1.1、组件介绍 1.2、Sql执行顺序 2、执行流程 2.1. 连接与认证 2.2. 查询缓存 2.3. 语法解析(Parser) 2.4、执行sql 1. 预处理(Preprocessor) 2. 查询优化器(Optimizer) 3. 执行器…...

mac 安装homebrew (nvm 及git)
mac 安装nvm 及git 万恶之源 mac 安装这些东西离不开Xcode。及homebrew 一、先说安装git步骤 通用: 方法一:使用 Homebrew 安装 Git(推荐) 步骤如下:打开终端(Terminal.app) 1.安装 Homebrew…...
C语言中提供的第三方库之哈希表实现
一. 简介 前面一篇文章简单学习了C语言中第三方库(uthash库)提供对哈希表的操作,文章如下: C语言中提供的第三方库uthash常用接口-CSDN博客 本文简单学习一下第三方库 uthash库对哈希表的操作。 二. uthash库哈希表操作示例 u…...
Python 训练营打卡 Day 47
注意力热力图可视化 在day 46代码的基础上,对比不同卷积层热力图可视化的结果 import torch import torch.nn as nn import torch.optim as optim from torchvision import datasets, transforms from torch.utils.data import DataLoader import matplotlib.pypl…...