快活林资源网 Design By www.csstdc.com
需求描述
制作一个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="/UploadFiles/2021-04-02/ico-voice.png">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) }) },1. 微信jsdk配置
2. 调取微信录音开始方法 wx.startRecord
3. 调取微信录音结束方法 wx.stopRecord
成功后返回一个本地音频id localId
⚠️ 如果不调用录音结束方法,待录音1min后自动结束,需要wx.onVoiceRecordEnd 监听录音结束
4. 上传录音至微信服务器 wx.uploadVoice
返回serverId
⚠️ 微信存储时间有限,有效期3天
⚠️ 目前多媒体文件下载接口的频率限制为10000次/天,如需要调高频率,请登录微信公众平台,在开发 - 接口权限的列表中,申请提高临时上限。
5. 调取自己后台上传至自己服务器
这部可以看做,将 serverId 传给自己的服务器,然后自己服务器调微信提供的接口去下载(serverId)至自己服务器存储以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。
快活林资源网 Design By www.csstdc.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
快活林资源网 Design By www.csstdc.com
暂无评论...
更新日志
2024年12月25日
2024年12月25日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]