js-audio-recorder-enhanced

js audio recorder plugin.

Usage no npm install needed!

<script type="module">
  import jsAudioRecorderEnhanced from 'https://cdn.skypack.dev/js-audio-recorder-enhanced';
</script>

README

recorder

js audio recorder plugin.

English | 简体中文

主要用于Web端录制短音频。

  • 支持录音,暂停,恢复,和录音播放。
  • 支持音频数据的压缩,支持单双通道录音。
  • 支持录音时长、录音大小的显示。
  • 支持边录边转(播放)。
  • 支持导出录音文件,格式为pcm或wav。
  • 支持录音波形显示,可自己定制。
  • 录音数据支持第三方平台的语音识别。

使用

在线演示地址

Recorder

在线文档

文档

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标签方式
<script type="text/javascript" src="./dist/recorder.js"></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>

开始录音

recorder.start().then(() => {
    // 开始录音
}, (error) => {
    // 出错了
    console.log(`${error.name} : ${error.message}`);
});
  • 返回: Promise<{}>

录音暂停

// 暂停录音
recorder.pause();
  • 返回: void

继续录音

// 继续录音
recorder.resume()
  • 返回: void

仅支持暂停后,恢复录音。

结束录音

// 结束录音
recorder.stop();
  • 返回: void

录音播放

// 录音播放
recorder.play();
  • 返回: void

支持不结束(stop)直接调用录音播放。

播放时长

// 获取音频已经播的时长
recorder.getPlayTime();
  • 返回: number

暂停录音播放

// 暂停录音播放
recorder.pausePlay();
  • 返回: void

恢复录音播发

// 恢复录音播发
recorder.resumePlay();
  • 返回: void

停止播放

// 停止播放
recorder.stopPlay();
  • 返回: void

销毁实例

// 销毁录音实例,置为null释放资源,fn为回调函数,
recorder.destroy().then(function() {
    recorder = null;
});
  • 返回: Promise<{}>

直接获取录音数据

获取 PCM 数据

// 获取 PCM 数据(Blob)
recorder.getPCMBlob();
  • 返回: <Blob>

获取 WAV 数据

// 获取 WAV 数据(Blob)
recorder.getWAVBlob();
  • 返回: <Blob>

下载录音文件

下载 PCM 格式

// 下载pcm文件
recorder.downloadPCM(fileName ?);
  • fileName <String> 重命名文件
  • 返回: <Blob>

下载 WAV 格式

// 下载wav文件
recorder.downloadWAV(fileName ?);
  • fileName <String> 重命名文件
  • 返回: <Blob>

录音实时回调 获取录音数据

目前支持获取以下数据:

  • 录音时长(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数据。获取方式:

  1. onprogress 回调,见录音回调函数
  2. 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。
  • 功能完善。
  • 兼容性测试。
  • 支持边录音边转换(播放)。

注意

  1. 使用127.0.0.1或localhost尝试,因为getUserMedia在高版本的chrome下需要使用https。

兼容性

以下为测试结果,低于以下版本并不表示不支持,可能是未测试到,增加或标注请查看:issues6

window pc端

Chrome Firefox Edge Safari Opera IE
38+ 30+ 42+ 11+ 21+ 不支持

移动端

安卓

Chrome Firefox Safari Opera UC QQ 猎豹 搜狗 华为 小米
42+ 40+ 不支持 不支持 9.2+ 不支持 不支持 不支持 不支持

IOS

Chrome Firefox Safari Opera UC QQ 猎豹 搜狗 华为 小米
11+

需要打开浏览器录音权限,在设置-权限中可以配置。

其他资源