纯js实现web端录音与播放功能

纯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 Apihttps://caniuse.com/#search=w…getUserMediahttps://caniuse.com/#search=g…Typed Arrayshttps://caniuse.com/#search=t…欢迎访问和查看：recorder。其他资源基于阿里云实现简单的语音识别功能web Audio学习与音频播放web Audio实现pcm音频数据收集js实现pcm数据编码js转化pcm到wav格式与播放