pc端h5录音技术调研

背景

小猴辅导中的教师点评需要用到录音点评，以下是调研总结

录音技术存在的问题

兼容问题

h5录音主要使用AudioContext 和 getUserMedia 兼容性还是较差的，尤其是在移动端。不过我们是针对pc的暂时先不考虑移动端。

使用要求

注意：需要在https等安全环境下才能进行录音

调研的方案

• vue-audio-recorder

  一个简单的 Vue.js 录音器组件，自己在本地写了一下，发现录音的音质会变得很重，而且自带一些样式，修改起来也会很麻烦。 pass掉

• Recorder

  html5 js 录音 mp3 wav ogg webm amr 格式，支持pc和Android、ios部分浏览器、和Hybrid App（提供Android IOS App源码），微信也是支持的，提供H5版语音通话聊天示例

  支持大部分已实现getUserMedia的移动端、PC端浏览器；主要包括：Chrome、Firefox、Safari、Android WebView、腾讯Android X5内核(QQ、微信)；不支持：UC系内核（典型的支付宝，大部分国产手机厂商的浏览器），IOS上除Safari外的其他任何形式的浏览器（含PWA、WebClip、任何App内网页）。

  在线测试

  测评：音质略微有些变化

• RecordRTC

  RecordRTC是WebRTC JavaScript库，用于音频+视频+屏幕+画布（2D + 3D动画）录制。它支持Chrome，Firefox，Opera，Android和Microsoft Edge

  在线测试

  type=audio 时，可以实现录音.体验地址

  测评：音音质还可以，不过包含功能较多，npm包略大

• Recorderjs

  一个用于记录/导出Web Audio API节点输出的插件。 github star 比较多的，不过这个库太久不维护了，不建议使用。

• recorder

  html5 js 浏览器 web端录音,主要用于Web端录制短音频。

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

  在线演示地址

  PC端兼容性要求：

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

  测评：功能专一，使用方式简单，音质也还可以，可导出pcm或wav文件, 可拿到blob数据给后台，建议用这个。