代码拉取完成,页面将自动刷新
js audio recorder plugin.
| 简体中文
主要用于Web浏览器端录制短音频。
npm ci (推荐) 或 npm install
npm run dev
npm run https
npm run build
安装:
npm i js-audio-recorder
调用:
import Recorder from 'js-audio-recorder';
let recorder = new Recorder();
<script type="text/javascript" src="./dist/recorder.js"></script>
let recorder = new Recorder();
可以配置输出数据参数,
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}`);
});
// 暂停录音
recorder.pause();
// 继续录音
recorder.resume()
仅支持暂停后,恢复录音。
// 结束录音
recorder.stop();
// 录音播放
recorder.play();
支持不结束直接调用录音播放。
// 暂停录音播放
recorder.pausePlay();
// 恢复录音播发
recorder.resumePlay();
// 停止播放
recorder.stopPlay();
// 销毁录音实例,置为null释放资源,fn为回调函数,
recorder.destroy().then(function() {
recorder = null;
});
// 获取 PCM 数据(Blob)
recorder.getPCMBlob();
// 获取 WAV 数据(Blob)
recorder.getWAVBlob();
// 下载pcm文件
recorder.downloadPCM(fileName ?);
// 下载wav文件
recorder.downloadWAV(fileName ?);
目前支持获取以下数据:
// 回调持续输出时长(当收集的栈满时触发)
// 不推荐使用
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 回调中的 data 相同。若没有开启边录边转,则返回是空数组。
用于获取前一次 getNextData() 之后的数据。同样的,若没有开启边录边转,则返回是空数组。
注:demo操作见 example.ts 文件。
let dataArray = recorder.getRecordAnalyseData();
返回的是一个1024长的,0-255大小的Uint8Array类型。用户可以根据这些数据自定义录音波形。
Recorder.playAudio(/* 放入blob数据 */);
支持的音乐格式由浏览器的audio支持的类型决定。
以下为测试结果,低于以下版本并不表示不支持,可能是未测试到,增加或标注请查看:issues6
38+ | 30+ | 42+ | 11+ | 21+ | 不支持 |
<img alt="搜狗"> | <img alt="华为"> | <img alt="小米"> | |||||||
---|---|---|---|---|---|---|---|---|---|
42+ | 40+ | ? | 不支持 | 不支持 | 9.2+ | 不支持 | 不支持 | 不支持 | 不支持 |
<img alt="搜狗"> | <img alt="华为"> | <img alt="小米"> | |||||||
---|---|---|---|---|---|---|---|---|---|
? | ? | 11+ | ? | ? | ? | ? | ? | ? | ? |
需要打开浏览器录音权限,在设置-权限中可以配置。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。