jssdk---微信公众号录音功能

首先忽略引入jssdk部分,直接进入正题

1.配置

 wx.config({
            debug: false,
            appId: wechatConfig.appId,
            timestamp: wechatConfig.timestamp,
            nonceStr: wechatConfig.nonceStr,
            signature: wechatConfig.signature,
            jsApiList: [
              "checkJsApi",
              "startRecord", //开始录音接口
              "stopRecord", // 停止录音接口
              "uploadVoice", //上传语音接口
              "onVoiceRecordEnd" // 超过一分钟自动停止api
            ] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
          });
          wx.checkJsApi({
            jsApiList: [
              "startRecord",
              "stopRecord",
              "uploadVoice",
              "onVoiceRecordEnd"
            ],
            fail: res => {
              this.$toast.fail("您的微信版本太低,请使用最新的微信客户端");
            }
          });
          wx.ready(function() {
            // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
          });

这里用到的微信接口有:
startRecord:开始录音
stopRecord:停止录音
uploadVoice:上传音频
onVoiceRecordEnd:超过一分钟自动停止
2.方法
因为是移动端,所以需要给input 框注册touchstart和touchend事件

 <input class="long-input" id="recrd_btn_mobile" readonly type="text" placeholder="按住说话" v-if="voice_status" @touchstart="touchstart"
            @touchend="touchend" @touchmove="handleTouchMove($event)" />
    touchstart(event) {
      event.preventDefault();
      this.startPoint = event.touches[0];
      this.recordText = "正在录音,上划取消发送";
      this.audition = true;
      this.start = new Date().getTime();

      this.recordTimer = setTimeout(() => {
        wx.startRecord({
          success: () => {
            // 录音不能超过一分钟 超过一分钟自动停止 并触发该事件
            wx.onVoiceRecordEnd({
              // 录音时间超过一分钟没有停止的时候会执行 complete 回调
              complete: res => {
                // // 给出提示
                // layer.msg('最多只能录制一分钟', {icon:2, time:1000});
                // 记录录音的临时ID
                this.localId = res.localId;
                this.uploadVoice();
              }
            });
          },
          cancel: () => {
            alert("用户拒绝授权录音");
          }
        });
      }, 300);
    },
    touchend(event) {
      event.preventDefault();
      this.audition = false;
      this.end = new Date().getTime();
      if (this.end - this.start < 1000) {
        this.end = 0;
        this.start = 0;
        //小于300ms,不录音
        clearTimeout(this.recordTimer);

        setTimeout(() => {
          wx.stopRecord({
            success: res => {
              this.localId = res.localId;
            },
            fail: res => {
              // alert(JSON.stringify(res));
            }
          });
        }, 800);
      } else {
        wx.stopRecord({
          success: res => {
            this.localId = res.localId;
            console.log(res.localId);
            this.uploadVoice();
          },
          fail: res => {
            // alert(JSON.stringify(res));
          }
        });
      }
    },

为了增加用户体验以及模仿微信聊天,增加了上划取消发送,并停止录音功能

    handleTouchMove(event) {
      //touchmove时触发
      var moveLenght =
        event.touches[event.touches.length - 1].clientY -
        this.startPoint.clientY; //移动距离
      // Math.abs(moveLenght)

      if (moveLenght < -50) {
        this.recordText = "松开手指,取消发送";
        wx.stopRecord({
          success: res => {
            return;
          },
          fail: res => {
            return;
          }
        });
      } else {
        this.recordText = "正在录音,上划取消发送";
      }
    },

主要是获取移动距离,然后取消录音并return

录音完毕后需要把本地录音先上传到微信的服务器,不过,微信只保留3天,而我们需要长期保存,我们需要把资源从微信服务器下载到自己的服务器

    uploadVoice() {
      wx.uploadVoice({
        localId: this.localId, // 需要上传的音频的本地ID,由stopRecord接口获得
        isShowProgressTips: 1, // 默认为1,显示进度提示
        success: res => {
          //把录音在微信服务器上的id(res.serverId)发送到自己的服务器供下载。
          var serverId = res.serverId;
          // console.log(serverId);
          //调用后台接口,储存音频
          CommonApi.uploadWxMediaFile(serverId, "amr").then(res => {
            console.log(res);
            this.msgContent = res.result.fileName;
            this.duration = res.result.duration;
          });
        }
      });
    }

如果有帮到您,麻烦点个赞哦~

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容