微信jsdk录音功能

2019-11-01 admin

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

aa1.jpg aa2.jpg aa3.jpg aa4.jpg aa5.jpg

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

[转载]原文链接:https://segmentfault.com/a/1190000020881973

本站文章除注明转载外,均为本站原创或编译。欢迎任何形式的转载,但请务必注明出处。

转载请注明:文章转载自 JavaScript中文网 [https://www.javascriptcn.com]

本文地址:https://www.javascriptcn.com/read-78769.html

文章标题:微信jsdk录音功能

相关文章
微信JSSDK上传图片
前不久微信公开了一些接口,其中有一个uploadImage接口用于上传图片,一般和chooseImage接口配合使用。先调用chooseImage接口让用户选择一张或者多张图片,用户选择完毕后微信会返回被选中图片的id,再把图片id传给up...
2017-03-29
bootstrap table之通用方法( 时间控件,导出,动态下拉框, 表单验证 ,选中与获取信息)代码分享
1.bootstrap-table 单击单行选中 $(&#x27;#gzrwTable&#x27;).on(&#x27;click-row.bs.table&#x27;, function(e, row, $element) { $(&#x...
2017-02-17
Angular 6 正式发布,新功能详解
作者|Stephen Fluin编译|覃云今天,Angular 6.0.0 正式发布,新版本重点关注工具链以及工具链在 Angular 中的运行速度问题。 这次更新还包括框架包(@angular/core、@angular/common、@...
2018-05-05
微信火了HTML5,技术革新才是未来
Html5小游戏自从诞生以来,以其玩法简单、内容娱乐等特点,而深受玩家的欢迎。就像音乐领域的《小苹果》和《最炫名族风》一样,Html5小游戏也曾经有多款神作,在微信朋友圈如病毒式疯传。 微信让H5火了 去年,H5游戏“围住神经猫”上线微信朋...
2015-11-12
javascript中文网开通评论功能
javascript中文网开通评论功能啦,欢迎大家留言评论 ...
2015-11-12
Vue 短信验证码组件开发详解
Vue.js(读音 /vjuː/, 类似于 view)是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。 Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此...
2017-03-17
前端开发领域推荐关注的微信公众号
这篇文章分享了前端领域的多个值得关注的技术、设计、极客、创业相关微信公众号。其中有最受欢迎的热门公众号、也有专注某个技术或设计的公众号,涵盖:算法、JavaScript、Nodejs、程序员、Web前端、Linux、数据库、创业、UI设计和...
2017-03-23
JS实现的验证身份证及获取地区功能示例
本文实例讲述了JS实现的验证身份证及获取地区功能。分享给大家供大家参考,具体如下: 这里的代码可以用来验证身份证号,并且根据身份证号来判断是哪个省份及性别 代码示例: &lt;head &gt; &lt;title&gt;&lt;&#x...
2017-03-08
2015年Web:追求原有“框架”外的新功能
Web目前正在经历一场巨大的变化,ServiceWorkers、传感器访问、推送通知等方式将打破Web原有的框架。而在2015年我们可以利用这几种方式快速的改变自己的网站。在不断增多的Web功能中寻求最合适自己的功能。 Web最初的设想是一...
2015-11-12
前端单页应用微服务化解决方案2 - Single-SPA
技术选型 经过各种技术调研我们最终选择的方案是基于 Single-SPA 来实现我们的前端微服务化. Single-SPA 一个用于前端微服务化的JavaScript前端解决方案 使用Single-SPA之后,你可以这样做: (兼容各...
2018-09-07
回到顶部