最近，我准备了一项技术共享，并看到了以前对文本发出声音的功能，并将其放在滑灰灰上。我只是在这里对其进行整理以与您分享。
从技术选择到计划设计，再到实际着陆，可以说涵盖了完整的链接。
什么是AudioContext？AudioContext接口表示由链接到AUDIO模块构建的音频处理图形，每个模块由Audionode表示。
音频上下文将控制所有节点的创建和音频处理解码的执行。一切都发生在上下文中。
ArrayBuffer：音频双文件decodeaudiodata：解码AudioBufferSourCenode：连接用于连接到音频文件开始播放Audio AudioContext.Destination.Destination：Speaker Device设备设备
什么是Audionode？
首先请参见：MediaDevice.getUsermedia（）MediaStream MediaStreamTrack音轨是什么
演示恶魔
见面：MediaDevice.getUserMedia（）MediaStream MediaStreamTrack音轨是什么
为什么可以播放Local主持者，并且无法播放前主机？没有技巧，我在Stackoverflow上问了一个问题
为什么Navigator.Mediadevice仅在Localhost：9090上正常工作？
网民说，他们只能在HTTPS环境中进行测试。
好吧，生产是可以使用的HTTPS。IntersectionIntertectionTrectionIntertectionbut我的Localhost的HTTPS环境在哪里？互动触发o的原因是什么？
最终从铬https://sites.google.com/a/chromium.org/dev/home/chromium-deprecating-power-powerful--insecure- insecure- origins中找到了答案。
在Chrome 47之后，GetUsermedia API只能允许“安全可信”客户端（例如HTTPS和LocalHost）的视频和音频请求。导航器对象和铬引发错误。
语音函数的预生产，预发行需要以下配置：输入chrome：// flags搜索：被视为安全配置的Insecure Origins：http：//foo.test.gogo.com
https://foo.gogo.com完全可以
键入数组
处理音频数据初步知识点
为什么偏移1,4,20？因为32/8 = 4.0至3属于idview.8/8 =1。4至19属于usernameview.32/8 = 4.20至23属于Munsview。
代码实施和源代码分析1.代码实施
流程图：1。初始化录音机2.开始记录3.停止记录
设计思想：录音机，唱片机助手，配音构造函数，语音转换器
第二，我尝试的技术解决方案
1. Renren.com的前端开发
https://juejin.im/post/5b8bf7e51d4538c210c6b0
不可能灵活地指定采样位置的数量，采样频率和通道数。多种格式的音频无法输出；
2.js-audio-recorder
您可以灵活地指定采样位置的数量，采样频率和通道数。可以输出各种格式的音频；有各种API可用。
github地址：https：//github.com/2fps/recorder
我从未学会过与声音相关的知识，因此我只能参考前任的结果并在学习时做！
代码实现和源代码分析I.拆卸记录过程1.初始化记录实例
2.开始录制
3.停止记录
其次，设计思想3.源代码分析的初始化实例 - 构造人
新的Dataview（Buffer）.setInt16（0，256，true）如何理解？
控制存储的大和小端模式。True是Littleendian，它是小终端模式，状态数据存储在低地址中，Int16Array用户平台的endianness。
SO称为大端模式是指低级别数据和高地址，0x12345678，12 buf [0]，78（低数据）存款buf [3]（高地址）（高地址）。这是常规的正存储。模式与大端模式相反。0x12345678，78 buf [0]，地址低。
3.源代码分析的初始化实例 - initrecorder
3.开始记录源代码分析 - 启动
3.停止记录和辅助函数源代码分析
4.源代码分析的核心算法-ncodewav
4.源代码分析的核心算法-NCodePCM
在哪里保存音频文件？语音记录一旦传递给Alibaba Cloud OSS一次？
此显示是浪费资源。
编辑状态：从本地开始，您可以在当前浏览器中访问它
发送状态：存款OSS，公共网络可以访问
如何保存本地？blob url保存的方法
如何保存OSS？从CMS获取令牌，上传到OSS的XXX-Audio Bucket，然后获取一个hoadh
这些东西
斑点对象在前端开发中非常普遍。我将在下面列出几个应用程序方案：
Canvas Todataurl之后的base64格式属性将超过文件对象，并以标签属性的最大长度上传文件。
创建bloburl：url.createobjecturl（对象）
Release Bloburl：url.revokeobjecturl（Objecturl）
BLOB URL的生命周期如何在VUE组件中执行？
Vue的单个文件组件具有一个文档，这就是为什么它称为单个页面应用程序，因此您可以通过组件之间的blob URL直接通信。在使用哈希模式的情况下，Vue-Router的情况下，该页面围绕页面跳跃不会重新加载整个页面，因此URL的生命周期非常强大。因此，交叉页面上的组件通信（非新选项卡）也可以使用blob使用bloburl。应该注意的是，在vue的哈希模式下，您需要更多地注意内存的内存发布通过url.revokeobjecturl（）
URL的生命周期如何在VUE组件中执行？
Vue的单个文件组件具有一个文档，这就是为什么它称为单个页面应用程序，因此您可以通过组件之间的blob URL直接通信。在使用哈希模式的情况下，Vue-Router的情况下，该页面围绕页面跳跃不会重新加载整个页面，因此URL的生命周期非常强大。因此，交叉页面上的组件通信（非新选项卡）也可以使用blob使用bloburl。应该注意的是，在vue的哈希模式下，您需要更多地注意内存的内存发布通过url.revokeobjecturl（）
https://github.com/frankkai/frankkai.github.io/issues/138
我需要在实时语音转换服务中做什么？提供将存储音频blob对象传达到文本接口的文件实例。
如何实现服务器？1。验证
当客户端与服务器建立WebSocket链接时，您需要使用令牌进行身份验证
2.开始并确认
客户端启动请求，服务器确认请求有效
3.进行和认可
发送语音数据循环，并继续接收标识结果
Ali Oss提供SDK，例如Java，Python，C ++，iOS，Android
https://help.aliyun.com/document_detail/84428.html?spm = a2c4g.1186623.574.10d92318apt1t6
前端代码实现
通用记录组件
通用组件代码分析
https://github.com/2fps/recorder/issues/21
一般组件使用
原始：https：//juejin.cn/post/7099295645214703646