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

黑豹程序员-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>&nbsp;<button @click="stopRecording" :disabled="!isRecording">停止录音</button>&nbsp;<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加入录音组件&#xff0c;录音后可以进行播放&#xff0c;并形成录音文件&#xff0c;其采样率固化48000&#xff0c;传言是google浏览器的BUG&#xff0c;它无法改动采样率。 大BUG&#xff0c;目前主流的支持16000hz的采样率。 录音组件 …...

Leetcode622.设计循环队列

本专栏内容为&#xff1a;leetcode刷题专栏&#xff0c;记录了leetcode热门题目以及重难点题目的详细记录 &#x1f493;博主csdn个人主页&#xff1a;小小unicorn ⏩专栏分类&#xff1a;Leetcode &#x1f69a;代码仓库&#xff1a;小小unicorn的代码仓库&#x1f69a; &…...

二十二、【形状工具组】

文章目录 基础图形多边形直线工具自定义形状工具 形状工具组画的图形是矢量图形&#xff0c;在放大和缩小后像素不变看起来不会模糊&#xff0c;位图和矢量图形的存储方式不一样&#xff0c;位图的存储方式是按各个像素的数据来进行存储的&#xff0c;而矢量图形是根据算法来进…...

设计模式~迭代器模式(Iterator)-20

目录 迭代器模式(Iterator) &#xff08;1&#xff09;优点 &#xff08;2&#xff09;缺点 &#xff08;3&#xff09;使用场景 &#xff08;4&#xff09;注意事项 &#xff08;5&#xff09;应用实例&#xff1a; 代码 迭代器模式(Iterator) 迭代器模式&#xff08…...

亳州市的自然风光与旅游资源:欣赏安徽省中部的壮丽景色

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

windows安装nvm以及解决yarn问题

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

【TA 挖坑04】薄膜干涉 镭射材质 matcap

镭射材质&#xff0c;相对物理的实现&#xff1f; 万物皆可镭射&#xff0c;个性吸睛的材质渲染技术 - 知乎 (zhihu.com) 薄膜干涉材质&#xff0c;matcap更trick的方法&#xff1f;matcapremap&#xff0c; MatCap原理介绍及应用 - 知乎 (zhihu.com) 庄懂的某节课也做了mat…...

OpenCV13-图像噪声:椒盐噪声和高斯噪声

OpenCV13-图像噪声&#xff1a;椒盐噪声和高斯噪声 1.噪声种类2.椒盐噪声3.高斯噪声 1.噪声种类 图像噪声是指图像中的随机或非随机的不希望的视觉扰动。它可以出现在数字图像中的各种形式&#xff0c;例如颗粒状噪声、条纹、斑点、模糊、失真等。图像噪声可能是由于图像采集过…...

天堂2服务器基本设置

[system] server_nameLocal Server ——〉服务器名称 server_rulesPvP http_host127.0.0.1 ——〉HTTP注册页面&#xff08;需先搭建IIS服务器&#xff09; http_port8080 rs_host127.0.0.1——〉填你IP rs_port3724 ws_host127.0.0.1 ——〉填你的IP就对啦 ws_port8085 wor…...

如何解决网站被攻击的问题

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

python爬虫入门详细教程-采集云南招聘网数据保存为csv文件

python爬虫之User-Agent大全、随机获取User-Agent 网站地址数据提取技术介绍采集目标流程分析python代码实现 网站地址 https://www.ynzp.com/ 这个网址特别适合新手拿来练习&#xff0c;你采集多了还有个验证码页面&#xff0c;验证码是4位数字&#xff0c;很清晰&#xff0c…...

1.13.C++项目:仿muduo库实现并发服务器之TcpServer模块的设计

文章目录 一、LoopThreadPool模块二、实现思想&#xff08;一&#xff09;管理&#xff08;二&#xff09;流程&#xff08;三&#xff09;功能设计 三、代码 一、LoopThreadPool模块 TcpServer模块&#xff1a; 对所有模块的整合&#xff0c;通过 tcpserver 模块实例化的对象&…...

Spring(17) AopContext.currentProxy() 类内方法调用切入

目录 一、简介二、代码示例2.1 接口类2.2 接口实现类2.3 AOP切面类2.4 启动类&#xff08;测试&#xff09;2.5 执行结果 一、简介 背景&#xff1a; 在之前 Spring 的 AOP 用法中&#xff0c;只有代理的类才会被切入。例如&#xff1a;我们在 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 }观察伪代码&#xff0…...

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在各种医学图像分割挑战中取得了巨大成功。一些新的、带有花里胡哨功能的架构可能在某些数据集中在使用最佳超参数时取得成功&#xff0c;但它们…...

《操作系统真象还原》第一章 部署工作环境

ref&#xff1a;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

一、介绍 &#xff08;1&#xff09;服务注册中心 &#xff08;2&#xff09;管理各个服务上的application.yml&#xff0c;支持动态修改&#xff0c;但不会影响客户端配置 &#xff08;3&#xff09;一般将application.yml文件放在git上&#xff0c;客户端通过http/https方式…...

劣币驱良币的 pacing 之殇

都说 pacing 好 burst 孬(参见&#xff1a;为啥 pacing)&#xff0c;就像都知道金币好&#xff0c;掺铁金币孬一样。可现实中掺铁的金币流通性却更好&#xff0c;劣币驱良币。劣币流通性好在卖方希望收到别人的良币而储存&#xff0c;而自己作为买方只使用劣币。 burst 和 pac…...

Gin 中的 Session(会话控制)

Session 介绍 session和cookie实现的底层目标是一致的,但是从根本而言实现的方法是不同的; session 是另一种记录客户状态的机制, 不同的是 Cookie 保存在客户端浏览器中,而 session保存 在服务器上 ; Session 的工作流程 当客户端浏览器第一次访问服务器并发送请求时,服…...

ChatGPT AIGC 实现数据分析可视化三维空间展示效果

使用三维空间图展示数据有以下一些好处&#xff1a; 1可视化复杂性&#xff1a;三维图可以展示三个或更多的变量&#xff0c;一眼就能看出数据各维度之间的关系&#xff0c;使复杂数据的理解和分析变得更为直观。 2检测模式和趋势&#xff1a;通过三维图&#xff0c;用户可以…...

linux之kylin系统nginx的安装

一、nginx的作用 1.可做高性能的web服务器 直接处理静态资源&#xff08;HTML/CSS/图片等&#xff09;&#xff0c;响应速度远超传统服务器类似apache支持高并发连接 2.反向代理服务器 隐藏后端服务器IP地址&#xff0c;提高安全性 3.负载均衡服务器 支持多种策略分发流量…...

从零实现富文本编辑器#5-编辑器选区模型的状态结构表达

先前我们总结了浏览器选区模型的交互策略&#xff0c;并且实现了基本的选区操作&#xff0c;还调研了自绘选区的实现。那么相对的&#xff0c;我们还需要设计编辑器的选区表达&#xff0c;也可以称为模型选区。编辑器中应用变更时的操作范围&#xff0c;就是以模型选区为基准来…...

Qt Widget类解析与代码注释

#include "widget.h" #include "ui_widget.h"Widget::Widget(QWidget *parent): QWidget(parent), ui(new Ui::Widget) {ui->setupUi(this); }Widget::~Widget() {delete ui; }//解释这串代码&#xff0c;写上注释 当然可以&#xff01;这段代码是 Qt …...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

【ROS】Nav2源码之nav2_behavior_tree-行为树节点列表

1、行为树节点分类 在 Nav2(Navigation2)的行为树框架中,行为树节点插件按照功能分为 Action(动作节点)、Condition(条件节点)、Control(控制节点) 和 Decorator(装饰节点) 四类。 1.1 动作节点 Action 执行具体的机器人操作或任务,直接与硬件、传感器或外部系统…...

2021-03-15 iview一些问题

1.iview 在使用tree组件时&#xff0c;发现没有set类的方法&#xff0c;只有get&#xff0c;那么要改变tree值&#xff0c;只能遍历treeData&#xff0c;递归修改treeData的checked&#xff0c;发现无法更改&#xff0c;原因在于check模式下&#xff0c;子元素的勾选状态跟父节…...

EtherNet/IP转DeviceNet协议网关详解

一&#xff0c;设备主要功能 疆鸿智能JH-DVN-EIP本产品是自主研发的一款EtherNet/IP从站功能的通讯网关。该产品主要功能是连接DeviceNet总线和EtherNet/IP网络&#xff0c;本网关连接到EtherNet/IP总线中做为从站使用&#xff0c;连接到DeviceNet总线中做为从站使用。 在自动…...

【RockeMQ】第2节|RocketMQ快速实战以及核⼼概念详解(二)

升级Dledger高可用集群 一、主从架构的不足与Dledger的定位 主从架构缺陷 数据备份依赖Slave节点&#xff0c;但无自动故障转移能力&#xff0c;Master宕机后需人工切换&#xff0c;期间消息可能无法读取。Slave仅存储数据&#xff0c;无法主动升级为Master响应请求&#xff…...

在WSL2的Ubuntu镜像中安装Docker

Docker官网链接: https://docs.docker.com/engine/install/ubuntu/ 1、运行以下命令卸载所有冲突的软件包&#xff1a; for pkg in docker.io docker-doc docker-compose docker-compose-v2 podman-docker containerd runc; do sudo apt-get remove $pkg; done2、设置Docker…...