微信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重建星际争霸
Dec 22 Javascript
Prototype使用指南之form.js
Jan 10 Javascript
flexigrid 参数说明
Nov 23 Javascript
js导出table到excel同时兼容FF和IE示例
Sep 03 Javascript
JS动态修改图片的URL(src)的方法
Apr 01 Javascript
盘点javascript 正则表达式中 中括号的【坑】
Mar 16 Javascript
完美实现八种js焦点轮播图(上篇)
Jul 18 Javascript
vue表单绑定实现多选框和下拉列表的实例
Aug 12 Javascript
浅析node Async异步处理模块用例分析及常用方法介绍
Nov 17 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
浅谈React深度编程之受控组件与非受控组件
Dec 26 Javascript
vue3 源码解读之 time slicing的使用方法
Oct 31 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数据缓存的使用说明
2013/05/10 PHP
php中file_get_content 和curl以及fopen 效率分析
2014/09/19 PHP
PHP中spl_autoload_register()函数用法实例详解
2016/07/18 PHP
php实现批量上传数据到数据库(.csv格式)的案例
2017/06/18 PHP
laravel 操作数据库常用函数的返回值方法
2019/10/11 PHP
用JavaScript仿PS里的羽化效果代码
2011/12/20 Javascript
jQuery操作input type=radio的实现代码
2012/06/14 Javascript
Javascript Throttle &amp; Debounce应用介绍
2013/03/19 Javascript
基于JavaScript 下namespace 功能的简单分析
2013/07/05 Javascript
Jquery遍历checkbox获取选中项value值的方法
2014/02/13 Javascript
45个JavaScript编程注意事项、技巧大全
2015/02/11 Javascript
javaScript中slice函数用法实例分析
2015/06/08 Javascript
浅析JavaScript中命名空间namespace模式
2016/06/22 Javascript
关于两个jQuery(js)特效冲突的bug的解决办法
2016/09/04 Javascript
js实现以最简单的方式将数组元素添加到对象中的方法
2017/12/20 Javascript
vue2.0 父组件给子组件传递数据的方法
2018/01/15 Javascript
关于vue-router的那些事儿
2018/05/23 Javascript
基于vue-cli npm run build之后vendor.js文件过大的解决方法
2018/09/27 Javascript
深入解读Node.js中的koa源码
2019/06/17 Javascript
原生JavaScript写出Tabs标签页的实例代码
2020/07/20 Javascript
python BeautifulSoup设置页面编码的方法
2015/04/03 Python
python自动zip压缩目录的方法
2015/06/28 Python
不同版本中Python matplotlib.pyplot.draw()界面绘制异常问题的解决
2017/09/24 Python
pytorch + visdom 处理简单分类问题的示例
2018/06/04 Python
Python一行代码实现快速排序的方法
2019/04/30 Python
python各类经纬度转换的实例代码
2019/08/08 Python
django xadmin中form_layout添加字段显示方式
2020/03/30 Python
分享30个新鲜的CSS3打造的精美绚丽效果(附演示下载)
2012/12/28 HTML / CSS
Html5 audio标签样式的修改
2016/01/28 HTML / CSS
英国排名第一的礼品体验公司:Red Letter Days
2018/08/16 全球购物
Intersport西班牙:在线体育商店
2019/11/06 全球购物
以太网Ethernet IEEE802.3
2013/08/05 面试题
迟到检讨书大全
2014/01/25 职场文书
四风问题个人剖析材料
2014/10/07 职场文书
房屋租房协议书范本
2014/12/04 职场文书
《作风建设永远在路上》心得体会
2016/01/21 职场文书