vuejs如何录音并生成wav

JavaScript020

vuejs如何录音并生成wav,第1张

vue.js

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()的方式暂停播放音频;

好啦,微信的录音功能就介绍到这里啦,有什么不对的地方,或者有更加优秀的方法,都非常欢迎找我交流和指正哦~

(会有看到的叭~嘻嘻)