在线录音机 html5,recorder
recorder
js audio recorder plugin.
| 简体中文
主要用于Web浏览器端录制短音频。
支持录音,暂停,恢复,和录音播放。
支持音频数据的压缩,支持单双通道录音。
支持录音时长、录音大小的显示。
支持边录边转(播放)。
支持导出录音文件,格式为pcm或wav。
支持录音波形显示,可自己定制。
录音数据支持第三方平台的语音识别。
使用
在线演示地址
在线文档
demo使用
npm ci (推荐) 或 npm install
npm run dev
调试移动端
npm run https
编译
npm run build
使用方法
引入方式
npm方式:
安装:
npm i js-audio-recorder
调用:
import Recorder from 'js-audio-recorder';
let recorder = new Recorder();
script标签方式
let recorder = new Recorder();
API
初始化实例
可以配置输出数据参数,
let recorder = new Recorder({
sampleBits: 16, // 采样位数,支持 8 或 16,默认是16
sampleRate: 16000, // 采样率,支持 11025、16000、22050、24000、44100、48000,根据浏览器默认值,我的chrome是48000
numChannels: 1, // 声道,支持 1 或 2, 默认是1
compiling: false, // 是否边录边转换,默认是false
});
返回:
开始录音
recorder.start().then(() => {
// 开始录音
}, (error) => {
// 出错了
console.log(`${error.name}:${error.message}`);
});
返回: Promise
录音暂停
// 暂停录音
recorder.pause();
返回: void
继续录音
// 继续录音
recorder.resume()
返回: void
仅支持暂停后,恢复录音。
结束录音
// 结束录音
recorder.stop();
返回: void
录音播放
// 录音播放
recorder.play();
返回: void
支持不结束直接调用录音播放。
暂停录音播放
// 暂停录音播放
recorder.pausePlay();
返回: void
恢复录音播发
// 恢复录音播发
recorder.resumePlay();
返回: void
停止播放
// 停止播放
recorder.stopPlay();
返回: void
销毁实例
// 销毁录音实例,置为null释放资源,fn为回调函数,
recorder.destroy().then(function() {
recorder = null;
});
返回: Promise
直接获取录音数据
获取 PCM 数据
// 获取 PCM 数据(Blob)
recorder.getPCMBlob();
返回:
获取 WAV 数据
// 获取 WAV 数据(Blob)
recorder.getWAVBlob();
返回:
下载录音文件
下载 PCM 格式
// 下载pcm文件
recorder.downloadPCM(fileName ?);
fileName 重命名文件
返回:
下载 WAV 格式
// 下载wav文件
recorder.downloadWAV(fileName ?);
fileName 重命名文件
返回:
录音实时回调 获取录音数据
目前支持获取以下数据:
录音时长(duration)。
已录音文件大小(字节)(fileSize)。
录音音量百分比(vol)。
所有的录音数据(data)。
// 回调持续输出时长(当收集的栈满时触发)
// 不推荐使用
recorder.onprocess = function(duration) {
console.log(duration);
}
// 推荐使用
recorder.onprogress = function(params) {
console.log('录音时长', params.duration);
console.log('已录音文件大小(字节)', params.fileSize);
console.log('录音音量百分比', params.vol);
console.log('当前录音的总数据', params.data);
}
// 手动获取录音总时长
console.log(recorder.duration);
// 手动获取已录音文件大小(字节)
console.log(recorder.fileSize);
注意:回调中不要进行太耗cpu的计算行为,以免造成性能问题。
边录边转换
现支持边录音边转换出对应的PCM数据。获取方式:
onprogress 回调,见录音回调函数
getWholeData() 和 getNextData() 方法。
getWholeData()
用于获取录音的整个数据,与 onprogress 回调中的 data 相同。若没有开启边录边转,则返回是空数组。
getNextData()
用于获取前一次 getNextData() 之后的数据。同样的,若没有开启边录边转,则返回是空数组。
注:demo操作见 example.ts 文件。
录音波形显示
let dataArray = recorder.getRecordAnalyseData();
返回的是一个1024长的,0-255大小的Uint8Array类型。用户可以根据这些数据自定义录音波形。
播放外部音频文件
Recorder.playAudio(/* 放入blob数据 */);
支持的音乐格式由浏览器的audio支持的类型决定。
任务列表
拆分recorder到各个功能模块。
增加test代码。
promise,支持async, await。
功能完善。
兼容性测试。
支持边录音边转换(播放)。
注意
使用127.0.0.1或localhost尝试,因为getUserMedia在高版本的chrome下需要使用https。
兼容性
以下为测试结果,低于以下版本并不表示不支持,可能是未测试到,增加或标注请查看:issues6
window pc端
38+
30+
42+
11+
21+
不支持
移动端
安卓
42+
40+
?
不支持
不支持
9.2+
不支持
不支持
不支持
不支持
IOS
?
?
11+
?
?
?
?
?
?
?
需要打开浏览器录音权限,在设置-权限中可以配置。
其他资源
在线录音机 html5,recorder相关推荐
- 微信对话在线生成器html5源码
微信对话在线生成器html5源码的软件特点是: 一:操作简单,下载源码后双击 index.html 即可运行,不需要服务器 二:可以设置外观设置,手机状态栏,包括电量.时间.标题.背景等信息 三:可以 ...
- html5在线api,HTML5 历史记录API
HTML5 历史记录API HTML5历史记录API的使用方法,在线实例演示HTML5历史记录API如何使用.浏览器的兼容性.语法定义及它的属性值详细资料等. HTML5历史记录API使您可以通过Ja ...
- html检测用户在线离线,HTML5 --- navigator.onLine 离线检测(示例代码)
navigator.onLine,是一个属性,返回浏览器的联网状态.主要用于查看你是否连接上了互联网. 在正常联网的情况下会返回true,没有联网即离线的状态下返回false. 一旦浏览器的联网状态发 ...
- html5做在线音乐,html5实现在线响应式音乐播放器
大概很早的时候就有想法做一个音乐播放器玩玩,以前可能还考虑过做APP,大一的时候第一个html的静态页面也是做的音乐网站,想想,大概小时候比较喜欢音乐吧.然而,现在入了前端大坑,就用h5做一个耍耍好了 ...
- 分享一个在线的HTML5元素在线测验 : HTML5 Element Quiz
日期:2011/12/07 来源:GBin1.com 今天在公司的网站上发现的一个在线HTML5元素的在线测试,大家有兴趣可以挑战一下,有点小BT.Enjoy! 在线测验 转载于:https://w ...
- html5 在线摄像头,HTML5在线摄像头使用
HTML5在线摄像头应用 最近在搞一个考试系统,系统要求要有随机拍照的功能,并且摄像头能够收到js的控制.在线摄像头嘛,就那两种实现的方式:cab或者flash. 暂且不论本人从没学过的flash(事 ...
- h5在线制作html5,在线制作HTML5多媒体作品的技巧
HTML5多媒体作品以其对各种平台的兼容而见长,目前已获得了广泛的应用.如果我们需要制作自己的HTML5多媒体作品,一个方便之选就是利用现成的在线制作工具"百度H5". 首先访问& ...
- ipad在线看html5,完美支持Html5 iPad优酷播放体验
完美支持Html5 iPad优酷播放体验 作者: 佚名 比特网 CNETNews.com.cn 2010-09-09 09:05:30 [导读]采用HTML5和HTTP Live Streaming技 ...
- html在线转移,HTML5迁移
从HTML4迁移到HTML5 本章讲述如何从 HTML4 迁移 到 HTML5. 本章演示了如何把一个HTML4页面转换为HTML5页面,而不破坏原始的内容和结构. 你可以采用相同的方法,从XHTML ...
最新文章
- 串口流控--软件流控与硬件流控
- 深入浅出Rust-Future-Part-5.md
- 牛客题霸 NC12 重建二叉树
- tensorflow与numpy的版本兼容性问题(亲测)
- jq之$(“tr:odd“).css(“background-color“,“red“);
- c ++查找字符串_C ++结构| 查找输出程序| 套装2
- [2019.3.21]洛谷P3640 [APIO2013]出题人
- 老白聊数据-关于销售预测的那些事
- [转载] python字典更新值_Python–字典元组值更新
- JSP中使用script计算
- 64. magento enable error report
- NSThread、Cocoa NSOperation
- 华为交换机,登录密码忘记
- 人民币金额大写转小写
- app开发大致流程介绍(给非专业人士通俗易懂的明白):
- 周易六十四卦——地风升卦
- 深入理解计算机系统 csapp 家庭作业(第三章完整版)
- 在Vue中同时使用过渡和动画
- drawableTop,button图片显示在文字上面,文字不显示的问题
- kryo java_使用Kryo序列化任意Java对象(获取IllegalAccessError)