这篇文章主要介绍了微信jsdk录音功能的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
需求描述
制作一个H5页面，打开之后可以录音，并将录音文件提交至后台
微信录音最长时长为1min
微信官方文档--音频接口
代码如下
// isVoice： 0-未录音 1-录音中 2-录完音 // 点击录音/录音中 按钮展示点击录音
// isListen // 0-未试听/试听结束 1-试听中 2-暂停试听 // 录完音 按钮展示重录
提交
试听
| |
▶
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', 'stopRecord', 'onVoiceRecordEnd', 'uploadVoice', 'downloadVoice', 'playVoice', 'pauseVoice', 'onVoicePlayEnd' ] })
wx.ready( () => { wx.onVoiceRecordEnd({ // 录音时间超过一分钟没有停止的时候会执行 complete 回调 complete: function (res) { _this.isVoice = 2 _this.localId = res.localId; } }) }) } }) }, // 开始录音 voiceStart(event) { let _this = this event.preventDefault() // 延时后录音，避免误操作 this.recordTimer = setTimeout(function() { wx.startRecord({ success: 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 { 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.stopRecord
成功后返回一个本地音频id localId
⚠️ 如果不调用录音结束方法，待录音1min后自动结束，需要wx.onVoiceRecordEnd 监听录音结束
4. 上传录音至微信服务器 wx.uploadVoice
返回serverId
⚠️ 微信存储时间有限，有效期3天
⚠️ 目前多媒体文件下载接口的频率限制为10000次/天，如需要调高频率，请登录微信公众平台，在开发 - 接口权限的列表中，申请提高临时上限。
5. 调取自己后台上传至自己服务器
这部可以看做，将 serverId 传给自己的服务器，然后自己服务器调微信提供的接口去下载（serverId）至自己服务器存储
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。
以上就是微信js-sdk 录音功能的示例代码的详细内容，更多请关注本站其它相关文章！
