Electron-vue中通过WebAudioApi实现录音功能,并转换为mp3格式,实时监测音频设备变化
实现以下功能:
1、检测当前音频环境,是否支持录音(WebAudio Api);
2、获取输入、输出设备列表,获取电脑默认的音频设备;
3、试音功能,通过分析录音样本数据,判断是否录到声音;
4、实时监听录音过程,根据样本片段展示录音音波;
5、实时监听音频设备变化,有设备插入或拔出时给出相应反馈;
6、生成wav文件;
7、支持转换为mp3格式,由于是同步转换,所有可按场景需要,使用webworker或创建子进程来异步转换。
说明:
1、最近项目实在太忙,抽不出时间好好梳理整个流程,又怕时间过去太久忘了,简单记录一下(从博客内容也看得出来);
2、项目也是匆匆整理的,删掉了业务相关的东西,只留下了整体的逻辑,跑起来、实现以上功能是没问题的,但代码看起来就有点糙了,如果参考使用,需要根据具体业务再细化、优化;
3、有不清楚的可以直接提issue,新任务又到了,估计不会再细化博客内容了。
项目地址:https://github.com/luohao8023/recorder-electron-vue,develop分支
Electron-vue中通过WebAudioApi实现录音功能,并转换为mp3格式,实时监测音频设备变化的更多相关文章
- matlab中datest() 将日期和时间转换为字符串格式
来源:https://ww2.mathworks.cn/help/matlab/ref/datestr.html?searchHighlight=datestr&s_tid=doc_srcht ...
- vue中使用axios post上传头像/图片并实时显示到页面
在前端开发中,为了更好的用户体验,在头像上传时会先将图片显示到页面然后点击保存按钮 完成图片的上传成功 代码部分有参考他人的写法. html代码: <div id="myPhoto ...
- vue中watched属性
watched属性,vue中的观察属性,可用来监听一个值的变化 默认有两个参数,新值,旧值 data (){ return { currentCity: "深圳" } } watc ...
- Android中使用MediaCodec硬件解码,高效率得到YUV格式帧,快速保存JPEG图片(不使用OpenGL)(附Demo)
MediaCodec的使用demo: https://github.com/vecio/MediaCodecDemo https://github.com/taehwandev/MediaCodecE ...
- 手把手教Electron+vue的使用
.现如今前端框架数不胜数,尤其是angular.vue吸引一大批前端开发者,在这个高新技术快速崛起的时代,自然少不了各种框架的结合使用.接下来是介绍electron+vue的结合使用. 2.Elect ...
- 从零开始搭建Electron+Vue+Webpack项目框架,一套代码,同时构建客户端、web端(一)
摘要:随着前端技术的飞速发展,越来越多的技术领域开始被前端工程师踏足.从NodeJs问世至今,各种前端工具脚手架.服务端框架层出不穷,“全栈工程师”对于前端开发者来说,再也不只是说说而已.在NodeJ ...
- 【原创】从零开始搭建Electron+Vue+Webpack项目框架,一套代码,同时构建客户端、web端(二)
摘要:上篇文章说到了如何新建工程,并启动一个最简单的Electron应用.“跑起来”了Electron,那就接着把Vue“跑起来”吧.有一点需要说明的是,webpack是贯穿这个系列始终的,我也是本着 ...
- 手把手教你创建electron+vue项目
electron可以结合前端的很多框架来进行快速的开发.在这里只讲一种electron结合vue并且使用前端的elementui来快速搭建一个项目页面. 第一步.创建electron 以管理员身份运行 ...
- electron+vue实现菜单栏
公司开发的产品都是用c++写的,而且还都是几个人,老板想搞下创新,就是看看能否通过其它的方式来实现前后端分离.然后我就了解到了electron这个东西,之前学安卓的时候看到过flutter,不经意间看 ...
随机推荐
- Java 什么是静态内部类
#定义 Java语言允许在类中再定义类,这种在其它类内部定义的类就叫内部类. 有static关键字修饰的内部类. 比如:Pattern类中的Node类. public class Outer { pr ...
- wrod: 突然无法输入汉字
“文件”-“选项”-“高级”-“去掉 输入法控制处于活动状态复选框”.
- tomcat NIOEndpoint中的Acceptor实现
EndPoint的组件就是属于连接器Connector里面的.它是一个通信的端点,就是负责对外实现TCP/IP协议.EndPoint是个接口,它的具体实现类就是AbstractEndpoint,而Ab ...
- 002-06-RestTemplate-请求示例-form、json、multipart、okhttp3
一.概述 请求示例集合 服务端:https://github.com/bjlhx15/common-study.git 中的 http-client-webserver 服务端:RequestBody ...
- Linux记录-批量安装ssh(转载)
首先,需要检查expect是否安装:rpm -qa|grep expect 然后,在操作机上创建公钥:ssh-keygen 一路回车即可 创建好之后到/root/.ssh/下就可以看到id开头的2个文 ...
- 为什么在MySQL数据库中无法创建外键?(MyISAM和InnoDB详解)
问题描述:为什么在MySQL数据库中不能创建外键,尝试了很多次,既没有报错,也没有显示创建成功,真实奇了怪,这是为什么呢? 问题解决:通过查找资料,每次在MySQL数据库中创建表时默认的情况是这样的: ...
- 一行命令学会全基因组关联分析(GWAS)的meta分析
为什么需要做meta分析 群体分层是GWAS研究中一个比较常见的假阳性来源. 也就是说,如果数据存在群体分层,却不加以控制,那么很容易得到一堆假阳性位点. 当群体出现分层时,常规手段就是将分层的群体独 ...
- 什么是 CDN(超形象)
原文地址:https://blog.csdn.net/lu_embedded/article/details/80519898 618电商节.双十一购物狂欢节,到底是什么在支撑数以万计的秒杀活动?这就 ...
- 【GStreamer开发】GStreamer基础教程04——时间管理
目标 本教程主要讲述一些和时间相关的内容.主要包括: 1. 如何问pipeline查询到流的总时间和当前播放的时间 2. 如何在流内部实现跳转功能 介绍 GstQuery是向一个element或者pa ...
- Django 操作已经存在的数据库
反向操作数据库 何为反向操作.即是数据库在项目之前已经存在,不需要新建表,操作已经存在的表 # 进入站点目录下执行 python manage.py inspectdb #可以看到settings中连 ...