微信开发之微信jssdk录音功能开发

bingchen 发布于2019-08-23 12:28 / 3036人阅读

项目需求简单描述

用户长按录音，松手后直接结束录音，结束录音后，用户可以选择重新录音、播放刚才的录音，上传录音（这里的上传录音指上传到自己服务器，上传步骤是，前端调用wx.uploadVoice，后台再到微信服务器下载音频文件，上传到自己的服务器）。注意，音频文件自上传时间算起在微信服务器的有效期为3天。由于后台从微信服务器下载的音频文件是amr格式的，需要后台先把amr文件转换成MP3，前端用audio播放。我们公司是购买阿里云的媒体处理服务进行文件转码的。

调用到的微信接口

// 开始录音接口
wx.startRecord();

// 停止录音接口
wx.stopRecord({
success: function (res) {
    var localId = res.localId;
  }
});

// 监听录音自动停止接口
wx.onVoiceRecordEnd({
  // 录音时间超过一分钟没有停止的时候会执行 complete 回调
  complete: function (res) {
    var localId = res.localId;
  }
});

// 播放语音接口
wx.playVoice({
  localId: "" // 需要播放的音频的本地ID，由stopRecord接口获得
});

// 暂停播放接口
wx.pauseVoice({
  localId: "" // 需要暂停的音频的本地ID，由stopRecord接口获得
});

// 监听语音播放完毕接口
wx.onVoicePlayEnd({wx.onVoice
  success: function (res) {
    var localId = res.localId; // 返回音频的本地ID
  }
});

// 上传语音接口
wx.uploadVoice({
  localId: "", // 需要上传的音频的本地ID，由stopRecord接口获得
  isShowProgressTips: 1, // 默认为1，显示进度提示
  success: function (res) {
    var serverId = res.serverId; // 返回音频的服务器端ID
  }
});

主要涉及的知识点

//项目用到的框架：vue.js
@touchstart // 手指触碰屏幕，开始长按
@touchend //手指离开屏幕，结束长按
@touchmove //手指在屏幕上滑动

开发流程

说明：项目用到的框架：Vue
1.引入微信jssdk,做好微信配置

2.HTML结构：

touchstart事件：MDN的定义是：当触点与触控设备表面接触时触发touchstart 事件，换句话来说，就是手指触碰屏幕时触发，所以这里监听开始长按。

@touchend事件：当手指从屏幕上离开的时候触发，这里今天长按结束。

@touchmove事件：当手指在屏幕上滑动的时候连续地触发。在这个长按录音的场景中，当手指在屏幕上移动了，也视为录音结束，所以要监听手指在屏幕上滑动。

3.js代码

methods:{
  gtouchstart(){
    // 当用户长按500ms以上再真正开始录音
    setTimeout(() => {
      this.longPress()
    }, 500)}
  },
  longPress(){
    wx.startRecord() // 微信开始录音接口
  },
  gtouchmove(){
    wx.stopRecord({ // 微信结束录音接口
      success: res => {
        this.localId = res.localId;
        console.log("中断结束录音")
      }
    })
  },
  gtouchend(){
     wx.stopRecord({ // 微信结束录音接口
       success: res => {
         this.localId = res.localId;
         console.log("正常结束录音成功了")
       }
    })
  },
  wxUpload() { // 上传到微信服务器
    wx.uploadVoice({
      localId: this.localId, // 需要上传的音频的本地ID，由stopRecord接口获得
      isShowProgressTips: 1, // 默认为1，显示进度提示
      success: res => {
        this.serverId = res.serverId; // 返回音频的服务器端ID
      }
    });
  },
}

大致过程如上面代码所示：

在某个html元素监听开始长按事件、结束长按事件、在屏幕上移动事件；

长按事件开始，这时调用微信接口wx.startRecord开始录音;

长按事件结束，这时调用微信接口wx.stopRecord结束录音，得到音频的localId;

当用户在长按过程中手指移动了，也调用wx.stopRecord结束录音;

录音结束后，调用微信接口wx.uploadVoice把音频上传到微信服务器。

开发过程遇到的问题

1.调用微信录音超过60秒时，微信会自动结束录音并且返回一个localId，并且这个localId是无效的
解决方案：
在 wx.startRecord() 开始之前添加定时器，如果录音时间到达59秒，执行wx.stopRecord主动停止录音，避免用户录音时间过长导致录音无效。
2.微信录音功能授权引发的交互问题
使用微信jssdk接口录音，在同一个域只需要授权一次，即第一次使用录音的时候，微信自己会弹出对话框询问是否允许录音，用户点击允许后，之后再使用录音时，便不会再咨询用户是否允许。
在第一次按住录音后，由于用户未曾允许录音，微信会提示用户授权允许在本页面使用微信录音功能，这时用户会放开录音按钮转而去点击允许，在用户允许后，才真正会开始录音，而此时用户早已放开录音按钮，那么录音按钮上便不会再有touchend事件，录音便会一直进行。
解决策略：使用localStorage记录用户是否曾授权，并以此来判断是否需要在刚进入页面是自动录一段录音来触发用户授权

if(!localStorage.rainAllowRecord || localStorage.rainAllowRecord !== "true"){
    wx.startRecord({
        success: function(){
            localStorage.rainAllowRecord = "true";
            wx.stopRecord();
        },
        cancel: function () {
            alert("用户拒绝授权录音");
        }
    });
}

3.在ios下不能自动播放audio的问题
关于音频的播放，为了页面美观，处理方式是隐藏audio的播放控件，然后给一个按钮添加时间，通过audio.play()来控制音频的播放的。但是在ios下有个问题，audio.play()是不能直接播放音频的，只能显式地通过操作音频的播放控件来。这是因为iOS Safari 不允许自动播放 audio，只能通过用户交互触发。这大概是苹果公司出于用户体验而做的限制。
解决方案：

// 在页面初始化成功后，在wx.ready的回调函数内，收到执行下面的方法，这样ios用户在点击播放按钮时就能正常播放音频
wx.ready(() => {
  this.$nextTick(() => {
    this.$refs.audio.load()
    this.$refs.audio.play()
    this.$refs.audio.pause();
  })
})

4.终极问题：某些手机屏幕不灵敏导致长按录音出现各种各样的问题
描述：在初次完成长按录音的功能后，我在公司多台贴了膜或者屏幕摔烂的手机测试发现，这些手机长按、和取消长按的事件相当不灵敏，误差很大，有时莫名其秒地结束录音，体验非常差。
解决方案：我们和产品经过商量，摆出这个避免不了的问题，最终把长按录音的交互模式改成了点击录音。

最后，参考链接：http://www.cnblogs.com/liujun...

云服务器服务器托管微信jssdk jssdk微信图片微信jssdk不稳定微信jssdk多图上传

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/98585.html

微信开发之录音上传、下载、转码

摘要：具体请看我在提问里的回答下载七牛云文件间歇性失败总结至此，在微信开发中关于录音这一块儿的功能，就已经介绍完毕。 showImg(https://segmentfault.com/img/remote/1460000013595733?w=454&h=339); 原文是在我自己博客中，小伙伴也可以点阅读原文进行跳转查看，还有好听的背景音乐噢~ 一年的时间里，前前后后都在搞微信开发...

余学文 2019-06-28 18:30 评论0 收藏0
「前端早读君009」快速小程序开发之微信小程序内嵌 H5

摘要：前言微信小程序中可以直接运行页面，这一新组件的产生，可能直接导致小程序数量迎来一波高峰。微信小程序配置系列问题配置域名业务域名中配置的就是小程序以及和中引用的域名。今日励志语要接受自己行动所带来的责任而非自己成就所带来的荣耀。前言微信小程序中可以直接运行 web 页面，这一新组件 web-view 的产生，可能直接导致小程序数量迎来一波高峰。本篇博文将从业务选型，微信小程序后台...

wh469012917 2019-08-23 14:28 评论0 收藏0
「前端早读君009」快速小程序开发之微信小程序内嵌 H5

摘要：前言微信小程序中可以直接运行页面，这一新组件的产生，可能直接导致小程序数量迎来一波高峰。微信小程序配置系列问题配置域名业务域名中配置的就是小程序以及和中引用的域名。今日励志语要接受自己行动所带来的责任而非自己成就所带来的荣耀。前言微信小程序中可以直接运行 web 页面，这一新组件 web-view 的产生，可能直接导致小程序数量迎来一波高峰。本篇博文将从业务选型，微信小程序后台...

kbyyd24 2019-08-05 15:54 评论0 收藏0
微信H5录音实现

摘要：值得庆幸的是微信的提供了音频接口的支持，所以要在微信的页面中实现录音等功能，直接使用微信的即可，兼容性也是妥妥的。下面说说在微信中使用录音接口的具体实现和其中的一些坑。 HTML5原生是提供了音频录音的支持的，用到的是这个API--getUserMedia，然而……感人的是，iOS Safari & Safari 直接不支持，面对着庞大的水果系用户，这个方案显然行不通。值得庆幸的是微信...

骞讳护 2019-08-05 10:58 评论0 收藏0
优化Recorder H5录音：可边录边转码上传服务器，支持微信提供Android IOS Hybr

摘要：开源库随着支持功能的增多，音频转码处理效率渐渐的跟不上需求了，近期抽时间对音频转码部分进行了升级优化，以支持更多实用的功能。基于以上两点问题，似乎只有多线程能够解决。 Recorder H5 GitHub开源库随着支持功能的增多，音频转码处理效率渐渐的跟不上需求了，近期抽时间对音频转码部分进行了升级优化，以支持更多实用的功能。另外IOS的Hybrid App也完成了移植，Android...

CrazyCodes 2019-08-26 11:01 评论0 收藏0