共计 1385 个字符，预计需要花费 4 分钟才能阅读完成。
纯 js 实现 web 端录音功能，功能并不是特别多，逐步增加中，详细地址：github。
getUserMedia 在非 localhost 和 127 的情况下，需要开启 https，由于腾讯云的没备案，demo 就不放了，可以自行获取代码并启动测试。
实现方式
实现原理的话，主要是以下三点，
利用 webrtc 的 getUserMedia 方法获取设备音频输入，使用 audioprocess 得到音频流 (pcm 流，范围 - 1 到 1)。
转码，利用前端中的 ArrayBuffer 等二进制操作按采样位数处理流信息。
使用 decodeAudioData 转码 arraybuffer 到 audioBuffer 并播放（小文件，大文件使用 audio）。
使用方式
script 方式
直接引入 dist 下的 recorder.js 即可
let recorder = new Recorder();
npm 方式
安装：
npm i js-audio-recorder
调用：
import Recorder from ‘js-audio-recorder’;
let recorder = new Recorder();
API
基本方法
// 开始录音
recorder.start();
// 暂停录音
recorder.pause();
// 继续录音
recorder.resume()
// 结束录音
recorder.stop();
// 录音播放
recorder.play();
// 销毁录音实例，释放资源，fn 为回调函数，
recorder.destroy(fn);
recorder = null;
下载功能
// 下载 pcm 文件
recorder.downloadPCM();
// 下载 wav 文件
recorder.downloadWAV();
// 重命名 pcm 文件，wav 也支持
recorder.downloadPCM(‘ 重命名 ’);
获取录音时长
// 回调持续输出时长
recorder.onprocess = function(duration) {
console.log(duration);
}
// 手动获取录音时长
console.log(recorder.duration);
默认配置
sampleBits，采样位数，默认是 16 sampleRate，采样频率，浏览器默认的，我的 chrome 是 48000 numChannels，声道数，默认是 1
传入参数
new Recorder 时支持传入参数，
{
sampleBits: 16, // 采样位数，范围 8 或 16
sampleRate: 16000, // 采样率，范围 11025、16000、22050、24000、44100、48000
numChannels: 1, // 声道，范围 1 或 2
}
注意
使用 127.0.0.1 或 localhost 尝试，因为 getUserMedia 在高版本的 chrome 下需要使用 https。
兼容性
主要是以下几个方面：
Web Audio Api
https://caniuse.com/#search=w…
getUserMedia
https://caniuse.com/#search=g…
Typed Arrays
https://caniuse.com/#search=t…
欢迎访问和查看：recorder。
其他资源
基于阿里云实现简单的语音识别功能 web Audio 学习与音频播放 web Audio 实现 pcm 音频数据收集 js 实现 pcm 数据编码 js 转化 pcm 到 wav 格式与播放