哈喽哈，我是小王子，这次简单讲一下我在实战中对接工控机与后端配合实现语音对讲功能的开发攻略，其实如果是网页对接网页的话完全可以用webrtc实现，网页对接安卓，ios等可以使用webrtc来实现相关功能，但是webrtc在对接硬件方面仍是有缺失的，所以我们这边采用ws+navigator.mediaDevices的方式进行实现，其中涉及了网页的内置的音频对象new AudioContext()的使用，本来这个是用vue2写的因为项目赶工所以暂时部分启用了关闭的any检测，移植到新项目的vue3+ts中
整体功能仅使用一个按钮就搞定了！嘿嘿！
一、语音对讲的请求发送
- 首先我们用new AudioContext()创建一个audioContext实例对象，然后我们利用封装的new wsSocket创建一个ws的实例对象，其中
createBufferSource()方法用于创建一个新的AudioBufferSourceNode接口，该接口可以通过AudioBuffer对象来播放音频数据 - 在通过ws拿到数据后，得到的是一个二进制的数组，我们要对这个二进制数据进行处理把这个数据转换成可以被解析的ArrayBuffer数据，利用new FileReader()的实例对象对数据进行处理，拿到处理后的buff数据后用addWavHeader函数进行解析为wav的blob数据，再拿到wav的blob数据后再次进行一个数据解析拿到解析后的buff数据就可以进行播放，这里可以把解析buff的部分抽出来单独封装。
AudioContext接口的decodeAudioData()方法可用于异步解码音频文件中的ArrayBuffer。ArrayBuffer数据可以通过XMLHttpRequest和FileReader来获取。AudioBuffer 是通过 AudioContext 采样率进行解码的，然后通过回调返回结果之后用audioSource.start()进行播放
二、语音对讲的wav函数对buffer的处理
- 其实音频的本质是数字，我们这边得到的其实就是一个全是数字的数组，我们要处理的就是将其中的数字进行划分，包含声道，采样率，通道数，等进行重新计算，包括我们对杂音的处理也是根据一个数据范围进行筛选后处理，当然浏览器已经内置的相关函数
三、语音对讲的本地音频的获取以及发送
- 首先通过浏览器的navigator.mediaDevices.getUserMedia方法获取到计算机的相关视频和麦克风的stream对象的流，首先把stream的流保存一份用于后面关闭页面时关闭流，然后通过封装的类将stream传输过去，再传入一个函数，每次当流有更新的时候就触发回调函数，通过ws向硬件发送数据，但是这里做了简单的节流，没三次发送一次数据给到另一端去解析。
四、语音对讲结束通话
- 关闭视频流，关闭定时器，关闭ws，弹框关闭成功
写困了，先这样吧嘿嘿
