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


Posted in Javascript onOctober 22, 2018

项目需求简单描述

用户长按录音,松手后直接结束录音,结束录音后,用户可以选择重新录音、播放刚才的录音,上传录音(这里的上传录音指上传到自己服务器,上传步骤是,前端调用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结构:

<div @touchstart="gtouchstart()" @touchend="gtouchend()" @touchmove="gtouchmove()"></div>

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.终极问题:某些手机屏幕不灵敏导致长按录音出现各种各样的问题

描述:在初次完成长按录音的功能后,我在公司多台贴了膜或者屏幕摔烂的手机测试发现,这些手机长按、和取消长按的事件相当不灵敏,误差很大,有时莫名其秒地结束录音,体验非常差。

解决方案:我们和产品经过商量,摆出这个避免不了的问题,最终把长按录音的交互模式改成了点击录音。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript----文件操作
Jan 18 Javascript
js定义对象或数组直接量时各浏览器对多余逗号的处理(json)
Mar 05 Javascript
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
javaScript中两个等于号和三个等于号之间的区别介绍
Jun 27 Javascript
Javascript中call与apply的学习笔记
Sep 22 Javascript
JavaScript检测浏览器cookie是否已经启动的方法
Feb 27 Javascript
小议JavaScript中Generator和Iterator的使用
Jul 29 Javascript
基于vue2.0+vuex+localStorage开发的本地记事本示例
Feb 28 Javascript
JavaScript使用readAsDataUrl方法预览图片
May 10 Javascript
React-Router如何进行页面权限管理的方法
Dec 06 Javascript
Angular ng-animate和ng-cookies用法详解
Apr 18 Javascript
js抽奖转盘实现方法分析
May 16 Javascript
ztree加载完成后显示勾选节点的实现代码
Oct 22 #Javascript
electron实现qq快捷登录的方法示例
Oct 22 #Javascript
Electron-vue脚手架改造vue项目的方法
Oct 22 #Javascript
angular 服务的单例模式(依赖注入模式下)详解
Oct 22 #Javascript
vue 配置多页面应用的示例代码
Oct 22 #Javascript
微信小程序引用iconfont图标的方法
Oct 22 #Javascript
详解微信小程序与内嵌网页交互实现支付功能
Oct 22 #Javascript
You might like
PHP时间类完整实例(非常实用)
2015/12/25 PHP
php结合redis高并发下发帖、发微博的实现方法
2016/12/15 PHP
Yii全局函数用法示例
2017/01/22 PHP
php动态读取数据清除最右边距的方法
2017/04/12 PHP
PHP双向链表定义与用法示例
2018/01/31 PHP
extjs form textfield的隐藏方法
2008/12/29 Javascript
过虑特殊字符输入的js代码
2010/08/05 Javascript
jQuery 表单验证扩展(四)
2010/10/20 Javascript
js过滤HTML标签以及空格的思路及代码
2013/05/24 Javascript
JS短路原理的应用示例 精简代码的途径
2013/12/13 Javascript
jquery选择器大全 全面详解jquery选择器
2014/03/06 Javascript
JavaScript异步编程Promise模式的6个特性
2014/04/03 Javascript
Nodejs中自定义事件实例
2014/06/20 NodeJs
JavaScript动态修改弹出窗口大小的方法
2015/04/06 Javascript
Boostrap模态窗口的学习小结
2016/03/28 Javascript
原生JS封装Ajax插件(同域、jsonp跨域)
2016/05/03 Javascript
vue简单封装axios插件和接口的统一管理操作示例
2020/02/02 Javascript
javascript实现贪吃蛇经典游戏
2020/04/10 Javascript
element中el-container容器与div布局区分详解
2020/05/13 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
闭包在python中的应用之translate和maketrans用法详解
2014/08/27 Python
Scrapy使用的基本流程与实例讲解
2018/10/21 Python
python删除列表元素的三种方法(remove,pop,del)
2019/07/22 Python
python Qt5实现窗体跟踪鼠标移动
2019/12/13 Python
利用keras加载训练好的.H5文件,并实现预测图片
2020/01/24 Python
马德里运动鞋商店:Nigra Mercato
2020/02/16 全球购物
Otiumberg官网:英国半精致珠宝品牌
2021/01/16 全球购物
信息专业毕业生五年职业规划参考
2014/02/06 职场文书
交通志愿者活动总结
2014/06/27 职场文书
大学生自荐书范文
2015/03/05 职场文书
施工员岗位职责范本
2015/04/11 职场文书
试用期旷工辞退通知书
2015/04/17 职场文书
四大名著读书笔记
2015/06/25 职场文书
公司员工离职感言
2015/08/03 职场文书
2016国庆节67周年红领巾广播稿
2015/12/18 职场文书
vscode远程免密登入Linux服务器的配置方法
2022/06/28 Servers