前端语音转文字实践总结

最近准备一个技术分享，看到以前做个一个语音转文字的功能，放在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);
},

总结