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,不经意间看 ...
随机推荐
- 获取div下的input type为file的所有对象
var files = $(".profile-content").find("input[type='file']"); files.each(functio ...
- PHP 自动加载类
类的自动加载 (Autoloading Classes) 在编写面向对象(OOP) 程序时,很多开发者为每个类新建一个 PHP 文件. 这会带来一个烦恼:每个脚本的开头,都需要包含(include)一 ...
- viewSwitcher 切换视图
通过VIewSwitcher切换视图.这个用到了baseAdapter,还是不太懂,先记个笔记. <RelativeLayout xmlns:android="http://schem ...
- flutter 权限申请
添加依赖 permission_handler: ^3.2.2 androidmanifest.xml添加对应的用户权限 在flutter 中app入口申请权限: import 'package:fl ...
- 【转载】 Tensorflow中padding的两种类型SAME和VALID
原文地址: https://blog.csdn.net/jasonzzj/article/details/53930074 -------------------------------------- ...
- 002-guava String 操作
一.概述 提供了字符串基本操作 二.使用 2.1.字符串拼接 字符串的拼接采用的是Guava中的Joiner类中的方法 @Test public void testJdkJoin() { List&l ...
- LeetCode_299. Bulls and Cows
299. Bulls and Cows Easy You are playing the following Bulls and Cows game with your friend: You wri ...
- LM_ReadImgMode.js PC单页轮播读图模式组件,零依赖!
LM_ReadImgMode.js PC单页轮播读图模式组件,零依赖! github:http://dtdxrk.github.io/LM-ReadImgMode/ TXT 1.全新的2.0版本,脱离 ...
- jvm(5)---垃圾回收(回收算法和垃圾收集器)
1.垃圾回收算法 1.1 标记-清除算法 算法分为“标记”和“清除”阶段:首先标记出所有需要回收的对象,在标记完成后统一回收所有被标记的对象.它是最基础的收集算法,效率也很高,但是会带来两个明显的问题 ...
- 【嵌入式硬件Esp32】Eclipse c++切换回英文方法
1.英文版汉化为中文版时是通过:Help-Install New Soft,下载安装中文支持包,重启即可. 2.恢复回英文界面步骤则如下: 2.1.打开安装目录下的eclipse.ini,在文件文件中 ...