快看：js-audio-recorder 插件实现web端录音

介绍

js-audio-recorder是一个纯js实现的浏览器端录音插件。目前支持以下功能：

• 录音，暂停，恢复，和录音播放。
• 音频数据的压缩，支持单双通道录音。
• 录音时长、录音大小的显示。
• 导出录音文件，格式为pcm或wav。
• 录音波形显示，可自己定制。

相关链接

GitHub地址官网主页地址项目在线演示地址

前提条件

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

(资料图片)

安装

npm安装

npm i js-audio-recorder

引入使用

import Recorder from "js-audio-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,(0.x版本中生效,1.x增加中)  // 是否边录边转换，默认是false});

更多详细属性见官方文档 点击查看更多属性

常用方法

getPermission()

未给予录音权限的页面在开始录音时需要再次点击允许录音，才能真正地录音，存在丢失开始这一段录音的情况，增加方法以便用户提前获取麦克风权限。

Recorder.getPermission().then(() => {    console.log("给权限了");}, (error) => {    console.log(`${error.name} : ${error.message}`);});

start()

开始录音，返回Promise

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

pause()

暂停录音，返回void

recorder.pause();

resume()

继续录音，返回void

recorder.resume();

stop()

结束录音，返回void

recorder.stop();

play()

播放录音，返回void

recorder.play();

pausePlay()

暂停播放录音，返回void

recorder.pausePlay();

resumePlay()

恢复播放录音，返回void

recorder.resumePlay();

stopPlay()

停止播放录音，返回void

recorder.stopPlay();

destroy()

销毁实例，返回Promise

// 销毁录音实例，置为null释放资源，fn为回调函数，recorder.destroy().then(function() {    recorder = null;});

getPCMBlob()

获取 PCM 数据，在录音结束后使用，返回Blob注：使用该方法会默认调用 stop() 方法。

recorder.getPCMBlob();

getWAVBlob()

获取 WAV 数据，在录音结束后使用，返回Blob注：使用该方法会默认调用 stop() 方法。

recorder.getWAVBlob();

更多api详见文档 点击查看更多api