前端语音转文字实践总结

最近准备一个技术分享，看到以前做个一个语音转文字的功能，放在slides上落灰了，索性整理到这里和大家分享下。

从技术选型，到方案设计，到实际落地，可以说把全链路都覆盖到了。

语音转写流程图
PC端浏览器如何录音
录音完毕后语音如何发送
语音发送和实时转写
通用录音组件
总结

语音转写流程图

PC端浏览器如何录音

AudioContext，AudioNode是什么？
MediaDevice.getUserMedia()是什么？
为什么localhost能播放，预生产不能播放？
js中的数据类型TypedArray知多少？
js-audio-recorder源码分析
代码实现

AudioContext是什么？

AudioContext接口表示由链接在一起的音频模块构建的音频处理图形，每个模块由一个AudioNode表示。

一个audio context会控制所有节点的创建和音频处理解码的执行。所有事情都是在一个上下文中发生的。

ArrayBuffer：音频二进制文件
decodeAudioData：解码
AudioBufferSourceNode：
connect用于连接音频文件
start播放音频
AudioContext.destination：扬声器设备

AudioNode是什么？

AudioNode是用于音频处理的一个基类，包括context，numberOfInputs，channelCount，connect
上文讲到的用于连接音频文件的AudioBufferSourceNode继承了AudioNode的connect和start方法
用于设置音量的GainNode也继承于AudioNode
用于连接麦克风设备的MediaElementAudioSourceNode也继承于AudioNode
用于滤波的OscillationNode间接继承于AudioNode
表示音频源信号在空间中的位置和行为的PannerNode也继承于AudioNode
AudioListener接口表示听音频场景的唯一的人的位置和方向，并用于音频空间化
上述节点可以通过装饰者模式一层层connect，AudioBufferSourceCode可以先connect到GainNode，GainNode再connect到AudioContext.destination扬声器去调节音量

初见：MediaDevice.getUserMedia()是什么

MediaStream MediaStreamTrack audio track

demo演示：https://github.com/FrankKai/n...

https://github.com/2fps/recor...

通用组件使用

import AudioMaker from '@/components/audioMaker';


durationChange(duration) {
  this.resetRecorderAudio();
  this.recorderAudio.duration = duration;
},
recorderFinish({ blob, size, unit }) {
  this.recorderAudio.blobUrl = window.URL.createObjectURL(blob);
  this.recorderAudio.size = size;
  this.recorderAudio.unit = unit;
},
releaseBlobMemory(blorUrl) {
  window.URL.revokeObjectURL(blorUrl);
},