使用微信js-sdk怎么实现一个录音功能-创新互联

使用微信js-sdk怎么实现一个录音功能？相信很多没有经验的人对此束手无策，为此本文总结了问题出现的原因和解决方法，通过这篇文章希望你能解决这个问题。

成都创新互联公司一直秉承“诚信做人，踏实做事”的原则，不欺瞒客户，是我们最起码的底线！以服务为基础，以质量求生存，以技术求发展，成交一个客户多一个朋友！为您提供成都做网站、网站设计、外贸营销网站建设、成都网页设计、微信小程序定制开发、成都网站开发、成都网站制作、成都软件开发、重庆App定制开发是成都本地专业的网站建设和网站设计公司，等你一起来见证！

需求描述

制作一个H5页面，打开之后可以录音，并将录音文件提交至后台

使用微信js-sdk怎么实现一个录音功能

微信录音最长时长为1min

微信官方文档--音频接口

代码如下

  // isVoice： 0-未录音 1-录音中 2-录完音 
  // 点击录音/录音中 按钮展示
   
    点击录音

// isListen // 0-未试听/试听结束 1-试听中 2-暂停试听 // 录完音按钮展示

重录

提交

试听

| |

▶

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 < 300) { this.startTime = 0 // 不录音 clearTimeout(this.recordTimer) } else { wx.stopRecord({ success: 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，由stopRecord接口获得 }) console.log('试听。。。') wx.onVoicePlayEnd({ // 监听播放结束 success: function (res) { console.log('试听监听结束') _this.isListen = 0 } }); }, // 试听停止 tryStop() { let _this = this wx.pauseVoice({ localId: _this.localId // 需要停止的音频的本地ID，由stopRecord接口获得 }) }, // 处理录音数据 voiceHandle() { let _this = this wx.uploadVoice({ localId: this.localId, // 需要上传的音频的本地ID，由stopRecord接口获得 isShowProgressTips: 1, // 默认为1，显示进度提示 success: 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) }) },

3. 调取微信录音结束方法 wx.stopRecord
成功后返回一个本地音频id localId
⚠️ 如果不调用录音结束方法，待录音1min后自动结束，需要wx.onVoiceRecordEnd 监听录音结束

4. 上传录音至微信服务器 wx.uploadVoice
返回serverId
⚠️ 微信存储时间有限，有效期3天
⚠️ 目前多媒体文件下载接口的频率限制为10000次/天，如需要调高频率，请登录微信公众平台，在开发 - 接口权限的列表中，申请提高临时上限。

5. 调取自己后台上传至自己服务器
这部可以看做，将 serverId 传给自己的服务器，然后自己服务器调微信提供的接口去下载（serverId）至自己服务器存储

看完上述内容，你们掌握使用微信js-sdk怎么实现一个录音功能的方法了吗？如果还想学到更多技能或想了解更多相关内容，欢迎关注创新互联成都网站设计公司行业资讯频道，感谢各位的阅读！

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

重庆分公司，新征程启航

使用微信js-sdk怎么实现一个录音功能-创新互联

其他资讯