微信jsdk录音功能

需求描述制作一个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="../../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)至自己服务器存储
原文链接:segmentfault.com

上一篇:typescript 入门教程三
下一篇:如何理解vue中的key?

相关推荐

  • 音频处理之音频文件拼接录音及裁剪

    这篇博客是我在开发一个“音频文件拼接录音及裁剪”功能过程中的笔记,因为学习到了很多没接触过的内容,所以在这里做个记录,这不是个教程贴,文中不涉及业务代码,只有一小部分核心代码用来解释我描述的内容而已...

    5 个月前
  • 通过前端怎样在vue中进行微信网页授权登录

    通过前端怎样在vue中进行微信网页授权登录 背景: 步骤实现: 在vue中,能够用轮子的就用轮子,于是在npm中找到了一个微信登录的包vuewxlogin(https://www...

    9 个月前
  • 这才是微信小程序开发的正确姿势

    Rax 正式支持微信小程序开发了! 等等,你可能会好奇 Rax 是何方神圣。Rax 是一款来自阿里巴巴淘系技术部的多端开发框架,超轻量,高性能,易上手,完美兼容 React 语法,是阿里集团开发 We...

    6 个月前
  • 蹭热点,请给我一面国旗@微信官方

    今天下午微信朋友圈炸了,所有人都在要国旗。迎国庆换新颜活动 | 腾讯新闻的合成服务(https://rl.inews.qq.com/h5/nationaldayhead?openid=o04IBAAg...

    8 个月前
  • 踩坑---一个不是坑的难以言喻的坑,有关企业微信在iOS端上传文件的坑

    起因 今早一去公司,被组长远程发过来一个Bug,据说是用户反馈的一个iOS的问题,在我们的业务中,有一个有关图片上传的问题。我们的业务代码是在自己的客户端、微信、钉钉、企业微信四个地方跑的同一套代...

    2 年前
  • 超级方便好用的微信公众号菜单管理扩展

    看了 中有一个微信管理插件,就萌生了自己做一个的想法。 展示 DEMO http://wechatmenu.lzis.me(http://wechatmenu.lzis.me) 素材选...

    1 年前
  • 说说微信扫码登录

    一、OAuth2.0   允许用户提供一个令牌,而不是用户名和密码来访问他们存放在特定服务提供者的数据。每一个令牌授权一个特定的网站(例如,视频编辑网站)在特定的时段(例如,接下来的2小时内)...

    2 年前
  • 详解微信小程序 wx.uploadFile 的编码坑

    编写微信小程序时,用到 wx.uploadFile,用来上传图片+文本信息.然而在编写过程中,由于官方的 demo 和文档描述很少,在几个坑上耗费了不少时间. 这里分享一个和编码有关的坑,主要是由于...

    3 年前
  • 记录一下,使用vue进行微信开发遇到的问题

    最近使用vue进行微信开发了两个项目,遇到很多问题和新的知识点,记录一下。 选型 首先,搭建使用vuecli脚手架,基本能满足业务需求,而且底子start数多,bug少; ui用vu...

    2 年前
  • 记一次修复微信支付吊起非常慢的问题

    微信h5接支付调用 有些安卓手机吊起非常慢,因为调支付api写法就是这样子,实在定位不到问题所在,正在打算放弃的时候。突然发现一个问题,就是只有当定位api完成的时候,支付就突然吊起了。

    2 年前

官方社区

扫码加入 JavaScript 社区