js音频录制#循环音频录制#vue录制音频#wav格式音频录制
最近的项目需要用到前端录制音频，然后转为base64编码或wav文件发送给后端，下面讲一下实现过程，首先调用navigate.getUserMedia获取麦克风，不过这个方法浏览器会弹警告已经被弃用，可以转为使用navigate.mediaDevices，不过警告归警告，还是能用的，获得麦克风以后再new一个recorder，写好采样率和采样通道，这个recorder有很多
我们公司作为一家非常牛逼的垃圾公司（划重点）！！作为一家老板以为程序员属于魔法师，每天只需要高呼‘巴啦啦能量’的公司！！作为被老板指出被包养的部门的一员！！我肯定拒绝不了老板和奇葩产品的 ‘突发奇想’和‘别的小朋友都有，我们也要’的无赖要求！！
所以我这个小可爱又双叕接手了一个诚心刁难我这个小萌新的需求！！不过好在有微信粑粑的API可以用，好啦好啦，不扯啦，让我们看一下叭！
第一步：微信签名
微信签好名之后就可以调录音的接口啦，签名的参数后台会返回，jsApiList: []里面是需要调用的微信API，需要在微信开发者工具里面配置一下js安全域名。
第二步：调用录音的API
调用完之后不需要管，localId（微信返回的本地录音ID）会在录音结束的接口返回
第三步：录音结束
在手指松开的事件里面调用结束录音，会拿到localId，通过localId,调用微信上传的API拿到服务器ID；
第四步：用localId拿到serverId
拿到serverId之后前端的工作就结束了，把serverId传给后台，就可以啦
第五步：播放录音
播放录音和暂停播放，都有微信的API调用，'playVoice'和'pauseVoice',
我是使用的后台返回的录音MP3
通过$ref的方式获取到DOM，通过player1.play()的方式播放音频；player1.pause()的方式暂停播放音频；
好啦，微信的录音功能就介绍到这里啦，有什么不对的地方，或者有更加优秀的方法，都非常欢迎找我交流和指正哦~
（会有看到的叭~嘻嘻）
首先我们用到的两个微信JS-SDK的独特接口：1、音频接口：即通过js调用微信录音相关功能，包括录制、上传、播放，控制等。2、智能接口：所谓“智能”接口，目前只有一个“识别音频并返回识别结果接口”，即”声音转文字“。我们的产品"语速达人”基本功能逻辑是这样的：用户读出题词板文字，手机录音，实时识别用户的语速，在完成几秒钟测试后，计算出用户平均语速水平，与小伙伴们愉快的PK“打嘴仗“。为了推广，希望基于Web做一个简单版的HTML5测试互动，用于微信传播。很遗憾，这个功能在微信JS-SDK推出之前，是无法实现的：一方面JS调用设备录音功能受限，一方面通过JS进行实时语速识别的算法，性能会有问题，于是我们决定放弃了。但是微信JS-SDk推出后，突然发现，这个测语速功能的实现一下变得非常简单。于是经过了简单的功能设计后，前端攻城师立即开干，与APP上线同步做出了一个”语速达人“网页版。（1）Landing界面：包括主视觉banner、挑战题目标题（摇一摇换一个题），以及一个”开始测试“按钮，（2）开始测试：点击开始测试后，会显示题词板。并在3秒倒计时后开始录音。请注意！用户首次使用时，微信会在这里弹出提示“网页请求录音功能，是否允许”的提示，只有用户选择允许，录音接口才能正常调用。（3）测试结果：关键步骤来了！用户录音完成后，调用语音上传和智能识别接口，即可获得将语音转换后的文字。接口非常简单！1、目前还没有用户在录音授权后的回调接口，JS无法掌握用户授权的情况，如果用户在第一次使用时，请求录音权限时点了”不允许“，功能就废了。2、如果文字长的话，声音转文字还是比较慢的。3、微信很大方，我们用到的几个接口都没有使用频次的限制。4、JS-SDK的文档简单但是很有效，Token获取的逻辑刚开始读的时候有点晕晕的，读完了准备开始写后台程序时发现微信的工程师已经都准备好了，拿来改个Key直接就能用了。这里赞一下微信团队。5、原本计划在每个语速挑战下面，显示一个已经挑战了的用户的列表，并放上他们挑战时的录音。这个功能在JS-SDK支持下也能实现，但是为了更好地呈现，需要微信服务号的权限，才能获取用户的头像和昵称。时间原因，没有做出这个功能。6、吐槽一下：微信服务号300RMB/年，微信开放平台接入300RMB/年，帐号不互通，分开申请分开审核分开收钱～真心觉得鹅长有必要计较这点收入么。。。PS：补充一个，最近刚发现，有团队用语音接口做了”朋友圈发语音”的功能。听起来很不错的功能，通过JS-SDK实现起来真是太容易了，我觉得也是精巧的使用典范吧。
