精华内容
下载资源
问答
  • Vue微信SDK 录音功能

    千次阅读 2018-06-13 18:47:46
    微信下长按按钮,弹出正在录音gif,上传录音; 在非微信下,正常显示录音gif,即做一个假的录音按钮。 在微信下,因为项目中会加载一个外部js,有一定几率会阻塞wx的初始化,所以如果在用户点击按钮时,wx sdk没有...

    需求:
    微信下长按按钮,弹出正在录音gif,上传录音;
    在非微信下,正常显示录音gif,即做一个假的录音按钮。
    在微信下,因为项目中会加载一个外部js,有一定几率会阻塞wx的初始化,所以如果在用户点击按钮时,wx sdk没有初始化,也显示假的录音按钮。

    将tourch和mouse写绑定在一个button中 在IOS下 会出现一次录音 取消长按后再执行一次 startRecord -> stopRecord问题,所以将移动端和PC端按钮分开显示。

    <button v-if="!!navigator.userAgent.match(/AppleWebKit.*Mobile.*/)" id="recrd_btn_mobile" class="record-button" @touchstart="startRecord" @touchend="stopRecord"></button>
    <button v-else id="recrd_btn_pc" class="record-button"  @mousedown="startRecord" @mouseup="stopRecord"></button>
    // 利用 _this.oRecordInfo.useWxRecord 来决定是否为假按钮 值可根据情况修改
    touchmoveDefault: function (e) {
      e.preventDefault();
    },
    startRecord: function (event) {
      console.log('startRecord')
      var _this = this
      if (!!navigator.userAgent.match(/AppleWebKit.*Mobile.*/)) {
        // 移动端 取消浏览器长按事件 (否则在录音时会有弹出框)
        document.oncontextmenu = _this.touchmoveDefault
        //禁止滑动事件 防止在长按时 下拉窗口不能触发stopRecord
        document.body.addEventListener('touchmove', _this.touchmoveDefault, {passive: false})
      }
      if(localStorage.rainAllowRecord !== 'true' && _this.oRecordInfo.useWxRecord !== 2 && _this.oRecordInfo.useWxRecord !== 3){
        //  首次进入 弹出是否授权框
        wx.startRecord({
          success: function(){
            //  授权录音
            localStorage.rainAllowRecord = 'true'
            _this.oRecordInfo.useWxRecord = 3
            _this.oRecordInfo.bShowRecording = false  //  控制正在录音gif显示
            wx.stopRecord()
            return
          },
          cancel: function () {
            // 用户拒绝授权录音
            _this.oRecordInfo.bShowRecording = false
            _this.oRecordInfo.useWxRecord = 0
            if (!!navigator.userAgent.match(/AppleWebKit.*Mobile.*/)) {
              document.body.removeEventListener('touchmove', _this.touchmoveDefault)
             }
            return
          }
        })
        if (_this.oRecordInfo.useWxRecord === 1) {
          //  使用假录音功能
          _this.oRecordInfo.useWxRecord = 2
        }
      }
      _this.oRecordInfo.bShowRecording = true
      _this.oRecordInfo.timer = new Date()
      //  防止因为js 加载时间过长导致调用录音接口失败问题 实现假按钮效果
      if ((_this.oRecordInfo.useWxRecord === 1 || _this.oRecordInfo.useWxRecord === 3) && localStorage.rainAllowRecord === 'true') {
        _this.oRecordInfo.recordTimer = setTimeout(function () {
        wx.startRecord({
          success: function(){
            console.log('wx.startRecord success')
            localStorage.rainAllowRecord = 'true'
          },
          cancel: function () {
            _this.oRecordInfo.bShowRecording = false
          }
        })
       }, 300)
      }
    },
    stopRecord: function(event) {
      var _this = this
      console.log('stopRecord')
      //  回复滑动事件
      if (!!navigator.userAgent.match(/AppleWebKit.*Mobile.*/)) {
        document.body.removeEventListener('touchmove', _this.touchmoveDefault)
      }
      _this.oRecordInfo.bShowRecording = false
      var t = new Date()
      if (t - _this.oRecordInfo.timer < 300) {
        //  少于300毫秒 不执行startRecord
        clearTimeout(_this.oRecordInfo.recordTimer)
      } else if (t - _this.oRecordInfo.timer < 2000) {
        if (_this.toastInstance) {
          _this.toastInstance.close()
        }
        _this.toastInstance = this.$toast({
          message: '时间太短啦 重新试一次吧',
          position: 'bottom',
          duration: 1000
        })
        if (_this.oRecordInfo.useWxRecord !== 2) {
          setTimeout(function() {
            wx.stopRecord({
              success: function(res) {
                console.log('updataRecord success')
              },
              fail: function(res) {
                console.log(JSON.stringify(res))
              }
            })
          }, 500)
        }
      } else {
        wx.stopRecord({
          success: function(res) {
            console.log('updataRecord success')
          },
          fail: function(res) {
            console.log(JSON.stringify(res))
          }
        })
        if (_this.oRecordInfo.timer) {
          _this.show_upload_next_button = true
        }
      }
      _this.oRecordInfo.timer = null
    }

    参考博客,写的很全面

    展开全文
  • Vue使用微信录音并上传服务端

    千次阅读 2019-10-27 21:12:07
    在微信公众号或者微信h5的网页开发中,会用到录音等功能,在微信里面使用微信录音会比较好一点,不用去设置ios和android的h5录音兼容性,并且h5的其他录音js文件可能不兼容微信浏览器等,所以vue中集成微信录音功能...

    在微信公众号或者微信h5的网页开发中,会用到录音等功能,在微信里面使用微信录音会比较好一点,不用去设置ios和android的h5录音兼容性,并且h5的其他录音js文件可能不兼容微信浏览器等,所以vue中集成微信录音功能即可

    一、配置微信权限获取jssdk

    微信jssdk的配置,也可以参考官方开发文档

    1. 配置安全域名(参考官方文档)

    2. 引入微信的js文件,vue中可以直接npm安装也可以
      npm install weixin-js-sdk --save

      并在main.js中引入js:
      import wx from 'weixin-js-sdk'

      并且将wx绑定到vue原型上,那么其他的所有组件都可以使用:
      Vue.prototype.$wx = wx

    3. 通过config接口注入权限验证配置

      在main.js中配置微信权限接口

      wx.config({
          debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
          appId: '', // 必填,公众号的唯一标识
          timestamp: , // 必填,生成签名的时间戳
          nonceStr: '', // 必填,生成签名的随机串
          signature: '',// 必填,签名,见附录1
          // 必填,需要使用的JS接口列表,所有JS接口列表见官方js接口
          // 这里配置录音所需要的接口权限
          jsApiList: [
          	'startRecord',
              'stopRecord',
              'onVoiceRecordEnd',
              'playVoice',
              'pauseVoice',
              'stopVoice',
              'onVoicePlayEnd',
              'uploadVoice',
              'downloadVoice'
          ]
      });
       
      wx.ready(function(){
       
          // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
      });
       
      wx.error(function(res){
       
          // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
      
      });
      
      
      

    **二、微信录音、播放、停止、上传等操作**
    1. 开始录音

      第一次开始录音会提示用户是否授权录音

       this.$wx.startRecord({
          success: function() {
            console.log('开始录音')
          },
          fail: function(res) {
            console.log(JSON.stringify(res))
          }})
          
      
    2. 停止录音

      this.$wx.stopRecord({ // 微信结束录音接口
           success: res => {
               // 这里将localId保存到data中,用于播放录音和上传到服务端
              this.localId = res.localId
              console.log('正常结束录音成功了')
            },
            fail: res => {
              console.log(JSON.stringify(res))
            }
          })
      
    3. 播放录音

      this.$wx.playVoice({
            localId: this.localId // 需要播放的音频的ID,由stopRecord接口获得
          })
      
    4. 上传录音到服务端

      上传录音到服务端需要2步,第一步:先将录音上传到微信,通过localId获取serverId 第二步:将serverId上传到服务端,再从微信下载下来

      // 注意,因为在回调里面需要使用this,所以这里先将this保存一下,否则里面的this指向错误
      const _this = this
      
      this.$wx.uploadVoice({
          localId: this.localId, // 需要上传的音频的本地ID,由stopRecord接口获得
          isShowProgressTips: 1, // 默认为1,显示进度提示
          success: async function (res) {
            const serverId = res.serverId // 返回音频的服务器端ID
            const params = {
              localId: serverId
            }
            // 将serverId上传服务端
            const resp = await _this.$axios.post('/api/audio/save', params)
            console.log('resp ', resp)
          },
          fail: function(err) {
            console.log(err)
          }
        });
        
      

    备注:上传语音有效期3天,可用微信多媒体接口下载语音到自己的服务器,此处获得的 serverId 即 media_id,参考文档 .目前多媒体文件下载接口的频率限制为10000次/天,如需要调高频率,请登录微信公众平台,在开发 - 接口权限的列表中,申请提高临时上限。

    三、服务端下载微信录音文件

    在前端已经将录音文件上传到微信并返回一个serverId,因为微信只能保存3天这个录音,所以需要将serverId上传到后端,后端下载录音文件,并保存

    下载语音接口:
    https://api.weixin.qq.com/cgi-bin/media/get?access_token=<ACCESS_TOKEN>&media_id=<server_id>

    需要根据ACCESS_TOKEN和前端传递来的server_id去下载即可。

    后续再更新下载录音文件并转换格式,微信保存的文件和下载下来的都是.amr的录音文件

    展开全文
  • 项目引入微信JSSDK npm install weixin-js-sdk 在录制音频的页面中引入微信JSSDK import wx from 'weixin-js-sdk' 该页面需要进行微信端验证→config接口注入权限验证配置 wx.config({ debug: true, // 开启...
    1. 项目引入微信JSSDK
    npm install weixin-js-sdk
    
    1. 在录制音频的页面中引入微信JSSDK
    import wx from 'weixin-js-sdk'
    
    1. 该页面需要进行微信端验证→config接口注入权限验证配置
    wx.config({
      debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
      appId: '', // 必填,公众号的唯一标识
      timestamp: , // 必填,生成签名的时间戳
      nonceStr: '', // 必填,生成签名的随机串
      signature: '',// 必填,签名
      jsApiList: [
    			 'startRecord',
                  'stopRecord',
                  'onVoiceRecordEnd',
                  'uploadVoice',
                  'playVoice',
                  'stopVoice',
                  'onVoicePlayEnd'
    	] // 必填,需要使用的JS接口列表
    });
    
    1. 通过ready接口处理成功验证
      wx.ready(function(){
      // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
      });
    2. 通过error接口处理失败验证
      wx.error(function(res){
      // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
      });
    3. 点击按钮开始→或者录音时间超过一分钟没有停止的时候会执行 complete 回调
     wx.startRecord({
            success: function() {
              // alert('成功调起录音')
              that.timer = setInterval(() => {
                // 60秒监听,录音时间超过一分钟没有停止的时候会执行
                if (that.time < 60000){
                  that.time++
                  wx.onVoiceRecordEnd({
                    // 录音时间超过一分钟没有停止的时候会执行 complete 回调
                    complete: function(res) {
                      alert('60秒停止录音')
                      // 通过localId获取serverId
                      clearInterval(that.timer)
                      that.tabStatus = 1
                      that.audioUploadStatus = 0
                      wx.uploadVoice({
                        localId: that.localId, // 需要上传的音频的本地ID,由stopRecord接口获得
                        isShowProgressTips: 0, // 默认为1,显示进度提示
                        success: function (res) {
                          that.form.mediaId = res.serverId; // 返回音频的服务器端ID
                          that.audioTime = (that.time / 100)
                          that.audioUploadStatus = 1
                        },
                        error: function () {
                          that.audioUploadStatus = 2
                        }
                      })
                    }
                  })
                }
              }, 1000)
            },
            cancel: function() {
              alert('用户拒绝授权录音')
            }
          })
    
    1. 释放按钮,结束录音,获取本地的音频id→上传音频,获取服务器的id.serverId = media_id(该字段为保存笔记信息接口内media_id音频字段)
     wx.stopRecord({
            success: function (res) {
              that.localId = res.localId
              that.tabStatus = 1
              // 结束录音的时候,停止计时
              clearInterval(that.timer)
              that.audioUploadStatus = 0
              wx.uploadVoice({
                localId: that.localId, // 需要上传的音频的本地ID,由stopRecord接口获得
                isShowProgressTips: 0, // 默认为1,显示进度提示
                success: function (res) {
                  that.form.mediaId = res.serverId; // 返回音频的服务器端ID
                  that.audioTime = (that.time / 100)
                  that.audioUploadStatus = 1
                },
                error: function () {
                  that.audioUploadStatus = 2
                }
              })
            }
          })
    
    展开全文
  • 仿微信录音语音播放demo

    热门讨论 2014-09-16 16:39:50
    仿微信按住录音,时间段不保存,录音完成点击播放
  • vue微信语音功能,录音+对接口返回amr音频播放 最近的新项目需要调用微信录音功能,但是后台又不给音频转码,无奈之下就踏上了研究前端音频编码器这东西。 ...

    vue的微信语音功能,录音+对接口返回amr音频播放

    最近的新项目需要调用微信的录音功能,但是后台又不给音频转码,无奈之下就踏上了研究前端音频编码器这东西。
    参考的GitHub仓库——Recorder
    参考的GitHub仓库——benz-amr-recorder
    先上代码:
    在index.html加载下面三个js

    	<script type="text/javascript" src="./static/app/app-min.js"></script>
        <script src="./static/app/recorder-core.js"></script>
        <script type="text/javascript" src="./static/app/beta-amr.js"></script>
    

    app-min.js对应的是下图这个文件,其他两个文件都可以在该仓库找到名字一样
    在这里插入图片描述
    然后在你需要播放amr音频的页面添加以下方法

    // 加载音频的方法  voice参数是接口返回的amr链接.amr,这个需要后端的把微信的amr音频存储到本地再返回给前端
    (该方法只能播放同源的音频链接)
    loadDemoBtn(voice){
          // this.amr = new BenzAMRRecorder();
          this.loadDemoBtn1.setAttribute('disabled', true);
          this.loadAmrFile1.setAttribute('disabled', true);
          this.playBtn.setAttribute('disabled', true);
          const that = this;
          // http://localhost:8081/addons/yun_shop/static/app/mario.amr
          // https://dev1.yunzshop.com/addons/yun_shop/storage/app/public/business_card/3f91e0ce6866d86639e81aab8f4951a2_5.amr
          that.initWithUrl(voice).then((data)=> {
          // 把amr转码成WAV
            Recorder.amr2wav(data,function(blob){
              that.end(blob);
              console.log("已转码成wav播放");
            },function(msg){
              console.log("转码成wav失败:"+msg);
            });
            that.loadDemoBtn1.removeAttribute('disabled');
            that.loadAmrFile1.removeAttribute('disabled');
            that.playBtn.removeAttribute('disabled');
            // that.duration.innerHTML = that.amr.getDuration().toFixed(2) + '\'';
          });
        },
        
        // 把amr加载
        initWithUrl(url) {
          if (this._isInit || this._isInitRecorder) {
            throw new Error('AMR has been initialized. For a new AMR, please generate a new BenzAMRRecorder().');
          }
    
          const p = new Promise((resolve, reject) => {
    
            fetch(url, {
              method: 'GET',
              responseType: 'blob',
              headers: {'Content-Type': 'application/octet-stream'},
              credentials: 'include'
            })
              .then((response) => {
                if (response.ok) {
                  response.blob().then(function(blob) {
                    console.log(blob);
                    resolve(blob);
                  });
                }
              })
              .catch((err) => {
                reject(err);
              })
    
          });
          return p.then(blob => {
            return blob;
          });
        },
    

    以上代码就可以播放微信录音的amr音频。

    例子以后再放 先写到这里

    展开全文
  • 微信录音amr音频文件转mp3格式

    千次阅读 2017-07-28 08:46:10
    直到现在,仍然不存在一项旨在网页上播放音频的标准。...微信录音的音频为amr格式,不支持网页播放,且上传语音有效期3天,可用微信多媒体接口下载语音到自己的服务器,然后转码转成MP3格式,途径有两种:
  • //移动端录音上传并保存; function heartUpload() { checkAuth(); global $CONF; //ajax传递$serverId; $serverId = trim($_POST["serverId"]); //处理微信服务器语音; require 'libs/wx/jssdk....
  • 好在项目是基于微信公众号 放弃使用普通H5的想法 转战使用微信提供的 JSAPI 录音功能 一下子解决了兼容的问题 微信已经帮忙处理完毕 接下来说一下 注意事项 在使用微信提供的录音功能前 1.首先的是进入微信公众号...
  • 主要介绍了微信开发之微信jssdk录音功能开发示例,在微信浏览器内打开的页面,制作一个按钮,用户按住按钮后开始录音,松手后停止录音,感兴趣的小伙伴们可以参考一下
  • Vue 快速入门 Vue框架介绍 中文文档: https://cn.vuejs.org/v2/guide/ Vue是一个构建数据驱动的web界面的渐进式框架. 目标是通过尽可能简单的API实现响应式的数据绑定和组合的视 ... 安装office自定义项,安装期间...
  • Vue 调用录音以及录音上传

    千次阅读 2020-08-14 10:54:28
    Vue 调用录音以及录音上传 录音调用以及录音上传调用了Recorder,这里给出github链接 https://github.com/xiangyuecn/Recorder。 试了好几个录音调用的工具包,这个是唯一能用的。要注意的一点是,录音调用必须要用...
  • 前端基于vue企业微信JS-SDK语音识别功能开发(同公众号)微信JS-SDK1.前期准备前端代码撰写 微信JS-SDK 前端需要实现一个功能,如录音,拍照,分享,地理位置等,前端想要实现这些功能的调用,必须要通过调用JS-SDK...
  • 模仿 微信 长按录音 功能 实现

    万次阅读 2016-03-26 09:11:30
    模仿 微信 长按录音的功能
  • 用户长按录音,松手后直接结束录音,结束录音后,用户可以选择重新录音、播放刚才的录音,上传录音(这里的上传录音指上传到自己服务器,上传步骤是,前端调用wx.uploadVoice,后台再到微信服务器下载音频文件,上传...
  • 微信jssdk录音API例子

    2020-09-18 21:58:10
    微信jssdk录音API例子 首先要引入jssdk, 可以使用npm或者script引入 // 微信授权 , 需要使用的接口 wxConfig: function (res, jsapiList) { wx.config({ //eslint-disable-line debug: false, //开启调试模式,...
  • vue实现录音跟读功能

    2019-11-26 16:26:32
    关注我的微信公众号【前端基础教程从0开始】,加我微信,可以免费为您解答问题。回复“1”,拉你进程序员技术讨论群。回复“小程序”,领取300个优秀的小程序开源代码+一套入门教程。回复“领取资源”,领取300G前端...
  • 需求:mpvue 开发小程序实现 按住录音上滑取消,下拉恢复 效果: <button @touchstart="touchstart" @touchend="touchend" @touchmove="touchmove" >{{btRecoding?'松开结束':'按住说话'}}</button...
  • vue书写录音代码

    2020-06-11 19:30:04
    我的语音 {{jishifen}}:{{jishimiao}} /01:00 {{wenzi}} 如果要测试效果,最好用微信小程序,浏览器会有问题。
  • 模仿微信语音聊天功能模块,移动端小应用练习demo,啦啦啦
  • 微信小程序自发布到如今已经有半年多的时间了,凭借微信平台的强大影响力,越来越多企业加入小程序开发。 小程序于M页比相比,有以下优势:1、小程序拥有更多的能力,包括定位、录音、文件、媒体、各种硬件能力等,想...
  • 微信jssdk录音功能开发记录

    千次阅读 2016-09-28 10:16:29
    如果开发的是普通的展示性页面,就和开发普通的页面没有区别,不过这里要用到设备(手机)的录音功能,就需要调用微信app的录音接口,需要使用微信jssdk。 使用微信jssdk:微信JS-SDK说明文档 先登录微信...

空空如也

空空如也

1 2 3 4 5 ... 19
收藏数 369
精华内容 147
关键字:

vue微信录音

vue 订阅