前端语音转文字实践总结前端语音转文字实践总结

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

.audio-maker-container { display: inline; i.ivu-icon { cursor: pointer; } }

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); },

总结