微信js-sdk 录音功能的示例代码


Posted in Javascript onNovember 01, 2019

需求描述

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

微信js-sdk 录音功能的示例代码

微信js-sdk 录音功能的示例代码

微信js-sdk 录音功能的示例代码

微信js-sdk 录音功能的示例代码

微信js-sdk 录音功能的示例代码

微信录音最长时长为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', '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 < 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)至自己服务器存储

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JS 统计时间
Mar 09 Javascript
广告切换效果(缓动切换)
May 27 Javascript
jQuery 自定义函数写法分享
Mar 30 Javascript
javascript里模拟sleep(两种实现方式)
Jan 25 Javascript
js数值和和字符串进行转换时可以对不同进制进行操作
Mar 05 Javascript
js简单实现图片延迟加载的方法
Jul 19 Javascript
jquery日历插件e-calendar升级版
Nov 10 Javascript
jQuery实现搜索页面关键字的功能
Feb 16 Javascript
IE11下使用canvas.toDataURL报SecurityError错误的解决方法
Nov 19 Javascript
angular-tree-component的使用详解
Jul 30 Javascript
利用JS实现一个同Excel表现的智能填充算法
Aug 13 Javascript
微信小程序实现倒计时功能
Nov 19 Javascript
使用 Angular RouteReuseStrategy 缓存(路由)组件的实例代码
Nov 01 #Javascript
vue实现计步器功能
Nov 01 #Javascript
详解小程序如何改变onLoad的执行时机
Nov 01 #Javascript
js canvas实现星空连线背景特效
Nov 01 #Javascript
jQuery鼠标滑过横向时间轴样式(代码详解)
Nov 01 #jQuery
微信小程序定义和调用全局变量globalData的实现
Nov 01 #Javascript
vue-router 中 meta的用法详解
Nov 01 #Javascript
You might like
用PHP实现小写金额转换大写金额的代码(精确到分)
2012/01/10 PHP
PHP大批量插入数据库的3种方法和速度对比
2014/07/08 PHP
destoon实现调用热门关键字的方法
2014/07/15 PHP
PHP闭包实例解析
2014/09/08 PHP
document 和 document.all 分别什么时候用
2006/06/22 Javascript
extJs 下拉框联动实现代码
2010/04/09 Javascript
JavaScript实现x秒后自动跳转到一个页面
2013/01/03 Javascript
jQuery的attr与prop使用介绍
2013/10/10 Javascript
js中replace的用法总结
2013/12/27 Javascript
动态的绑定事件addEventListener方法的使用
2014/01/24 Javascript
node.js操作mongoDB数据库示例分享
2014/11/26 Javascript
基于javascript实现按圆形排列DIV元素(三)
2016/12/02 Javascript
详解微信开发中snsapi_base和snsapi_userinfo及静默授权的实现
2017/03/11 Javascript
js清除浏览器缓存的几种方法
2017/03/15 Javascript
WebSocket的通信过程与实现方法详解
2018/04/29 Javascript
javascript显示动态时间的方法汇总
2018/07/06 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
js cavans实现静态滚动弹幕
2020/05/21 Javascript
jquery实现拖拽小方块效果
2020/12/10 jQuery
Python中字典映射类型的学习教程
2015/08/20 Python
Python中异常重试的解决方案详解
2017/05/05 Python
解决Python3.5+OpenCV3.2读取图像的问题
2018/12/05 Python
Python实现的列表排序、反转操作示例
2019/03/13 Python
python程序控制NAO机器人行走
2019/04/29 Python
Flask框架学习笔记之模板操作实例详解
2019/08/15 Python
Python编写万花尺图案实例
2021/01/03 Python
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
实习生的自我鉴定范文欣赏
2013/11/20 职场文书
工程质量承诺书
2014/03/27 职场文书
企业授权委托书范本
2014/09/22 职场文书
老人节标语大全
2014/10/08 职场文书
缓刑期间思想汇报范文
2014/10/10 职场文书
2014年党风廉政工作总结
2014/12/03 职场文书
关于颐和园的导游词
2015/01/30 职场文书
消防安全月活动总结
2015/05/08 职场文书