契机
作为今年的应届生，在第一份正式工作的第一份需求开发被交付了公司小程序页面ai助手的语音功能开发，听上去似乎很高大上，刚开始还是有点慌的，搜索相关资料后发现其实前端的工作挺简单的，不过我还是踩了坑┭┮﹏┭┮，在此记录下。
基本思路
前端写一个类似微信语音发送的功能，要具有语音录制、语音播放、键盘语音切换等等功能，总之与微信十分相似，前端上次音频到后端，然后后端经过语音转文字、在将文字提交向ai提问，然后前后端交互流式输出到页面，但有个特殊的地方是，公司小程序这里的ai助手其实是通过web-view去嵌入公司pc端页面的ai聊天室，就是忽略了这个点，搞得我差点完成不了工作😔，希望大家开发前不要偷懒，好好做调研~
navigator.mediaDevices
没想到吧，它不仅做导航，他还当收音员！Hhhhhhh 通过
navigator.getUserMedia({ audio: true }) //获取媒体类型
const mediaRecorder = new MediaRecorder(stream); //创建实例
mediaRecorder.ondataavailable = event => { // 处理录音数据
// 这里可以处理 event.data，例如存储或上传
};
mediaRecorder.start(); // 开始录音
mediaRecorder.stop(); // 停止录音
以及将语音的chuank 通过new Audio(audio)生产音频url就可以进行play()播放
就可以实现基本的录音播放功能，其实这部分挺简单的，两个小时不到就解决了，但是整体的功能逻辑和页面样式花了不少时间。
但是，做的快的结果并不好，navigator只支持浏览器，wx压根不通，没办法只好重新做了~ 项目特殊的点是uni-app的小程序的ai助手页面用的vue3项目页面，搞得我一开始不知道，怎么去用wx的api(￢︿̫̿￢☆)
wx的jssdk
回去查了一下，发现诶，好像还真有办法，那就是wx的jssdk!它不仅可以script引入还有相应的包可以下载，真是天助我也！下面看看chatgpt的介绍：
微信的 **JS-SDK**（JavaScript Software Development Kit）是微信提供的一套前端开发工具，
旨在帮助开发者在网页中轻松调用微信的各项功能。JS-SDK 允许网页与微信客户端进行交互，
提供了一系列 API 接口，使得开发者能够集成微信的多种服务和功能。
总之就是可以调用wx的接口呀，yyds~ 后面就简单了，就是照着官网做，用jssdk使用wx的音频录制相关接口，还是相当方便的~，唯一麻烦的就是权限问题，需要后端协助一下~
1.引入jssdk,用script引入或者下载包都可以：
/ npm install weixin-js-sdk
2.入口权限配置，一般在mounted或者onLoad里配置：
wx.config({ debug: true, // 开启调试模式 appId: '', // 公众号ID timestamp: , // 生成签名的时间戳 nonceStr: '', // 生成签名的随机串 signature: '', // 签名 jsApiList: [] // 需要使用的JS接口列表 });
wx.config({
debug: true, // 开启调试模式
appId: '', // 公众号
ID timestamp: , // 生成签名的时间戳
nonceStr: '', // 生成签名的随机串
signature: '', // 签名: 获取麻烦，需要后端协助
jsApiList: [] // 需要使用的JS接口列表 });
3.通过wx.xxx使用啦~
总结
前端做音频相关的，包括录制播放一系列的还是很简单滴~ 后续该项目的情况会再和大家分享的！
