微信js-sdk 录音功能的示例代码
网络编程 2021-07-04 15:01www.168986.cn编程入门
这篇文章主要介绍了微信jsdk录音功能的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们狼蚁网站SEO优化随着长沙网络推广来一起学习学习吧
需求描述
制作一个H5页面,打开之后可以录音,并将录音文件提交至后台
微信录音最长时长为1min
代码如下
// isVoice 0-未录音 1-录音中 2-录完音 // 点击录音/录音中 按钮展示 <div class="vm-voice-box" v-show="isVoice < 2"> <p v-show="!isVoice" @click="voiceStart">点击录音</p> <img v-show="isVoice" @click="voiceEnd" src="../../xxx/ico-voice.png" alt=""> </div> // isListen // 0-未试听/试听结束 1-试听中 2-暂停试听 // 录完音 按钮展示 <div class="vm-voice-player" v-show="isVoice == 2"> <div class="vm-vp-button"> <p class="vm-vp-revoice" @click="openMask(0)">重录</p> <p class="vm-vp-submit" :class="{'vm-vp-no-submit' : isSubmit}" @click="openMask(1)">提交</p> <p class="vm-vp-pause" v-show="!isListen" @click="play">试听</p> <p class="vm-vp-pause" v-show="isListen==1" @click="pause">| |</p> <p class="vm-vp-pause vm-vp-border" v-show="isListen==2" @click="play"> ▶ </p> </div> </div> data() { return { id: '', startTime: 0, recordTimer: null, localId: '', // 录音本地id serverId: '', // 录音微信服务id showMask: false, tip: 1, //提交 0- 重录 isVoice: 0, // 0-未录音 1-录音中 2-录完音 isListen: 0, // 0-未试听/试听结束 1-试听中 2-暂停试听 data1: 0, work: {}, isPlay: false, // 是否播放 isSubmit: false, // 是否已提交 } } // 微信配置 getConfig() { let _url = encodeURIComponent(window.location.href) // 后台提供接口,传入当前url(返回基础配置信息) voiceApi.wechatConfig(_url) .then(res => { if (res.data.code == 200) { wx.config({ debug: false, appId: res.data.content.appid, timestamp: res.data.content.timestamp, // 必填,生成签名的时间戳 nonceStr: res.data.content.nonceStr, // 必填,生成签名的随机串 signature: res.data.content.signature, // 必填,签名 // 需要授权的api接口 jsApiList: [ 'startRecord', 'sRecord', 'onVoiceRecordEnd', 'uploadVoice', 'downloadVoice', 'playVoice', 'pauseVoice', 'onVoicePlayEnd' ] })
wx.ready( () => { wx.onVoiceRecordEnd({ // 录音时间超过一分钟没有停止的时候会执行 plete 回调 plete: function (res) { _this.isVoice = 2 _this.localId = res.localId; } }) }) } }) }, // 开始录音 voiceStart(event) { let _this = this event.preventDefault() // 延时后录音,避免误操作 this.recordTimer = setTimeout(function() { wx.startRecord({ suess: function() { _this.startTime = new Date().getTime() _this.isVoice = 1 }, cancel: function() { _this.isVoice = 0 } }) }, 300) }, // 停止录音 voiceEnd(event) { this.isVoice = 2 let _this = this event.preventDefault() // 间隔太短 if (new Date().getTime() - this.startTime < 300) { this.startTime = 0 // 不录音 clearTimeout(this.recordTimer) } else { wx.sRecord({ suess: function(res) { // 微信生成的localId,此时语音还未上传至微信服务器 _this.localId = res.localId }, fail: function(res) { console.log(JSON.stringify(res)) } }) } }, // 试听 tryListen() { let _this = this wx.playVoice({ localId: _this.localId // 需要播放的音频的本地ID,由sRecord接口获得 }) console.log('试听。。。') wx.onVoicePlayEnd({ // 监听播放结束 suess: function (res) { console.log('试听监听结束') _this.isListen = 0 } }); }, // 试听停止 tryS() { let _this = this wx.pauseVoice({ localId: _this.localId // 需要停止的音频的本地ID,由sRecord接口获得 }) }, // 处理录音数据 voiceHandle() { let _this = this wx.uploadVoice({ localId: this.localId, // 需要上传的音频的本地ID,由sRecord接口获得 isShowProgressTips: 1, // 默认为1,显示进度提示 suess: function (res) { // 微信语音已上传至 微信服务器并返回一个服务器id _this.serverId = res.serverId; // 返回音频的服务器端ID _this.upVoice() } }) }, // 自己后台上传接口 upVoice() { let data = { id: this.id, serviceId: this.serverId } voiceApi.upVoice(data) .then(res => { if(res.data.code == 200) { // !! todo 隐藏loading this.isSubmit = true this.$Message.message('提交成功') this.closeMask() } else { this.$Message.message(res.data.message) } }) .catch(err => { console.log(err) }) },
1. 微信jsdk配置
2. 调取微信录音开始方法 wx.startRecord
3. 调取微信录音结束方法 wx.sRecord
成功后返回一个本地音频id localId
⚠️ 如果不调用录音结束方法,待录音1min后自动结束,需要wx.onVoiceRecordEnd 监听录音结束
4. 上传录音至微信服务器 wx.uploadVoice
返回serverId
⚠️ 微信存储时间有限,有效期3天
⚠️ 目前多媒体文件下载接口的频率限制为10000次/天,如需要调高频率,请登录微信公众平台,在开发 - 接口权限的列表中,申请提高临时上限。
5. 调取自己后台上传至自己服务器
这部可以看做,将 serverId 传给自己的服务器,然后自己服务器调微信提供的接口去下载(serverId)至自己服务器存储
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程:电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示:编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程