微信开发之微信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 相关文章推荐
xmlHTTP实例
Oct 24 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
Oct 22 Javascript
JQuery右键菜单插件ContextMenu使用指南
Dec 19 Javascript
javascript异步编程代码书写规范Promise学习笔记
Feb 11 Javascript
JS动态创建DOM元素的方法
Jun 09 Javascript
Bootstrap表单组件教程详解
Apr 26 Javascript
关于JSON.parse(),JSON.stringify(),jQuery.parseJSON()的用法
Jun 30 Javascript
jQuery向webApi提交post json数据
Jan 16 Javascript
JavaScript实现的可变动态数字键盘控件方式实例代码
Jul 15 Javascript
ES6扩展运算符用法实例分析
Oct 31 Javascript
vue 通过下拉框组件学习vue中的父子通讯
Dec 19 Javascript
微信小程序中使用vant框架的具体步骤
Feb 18 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
短波问题解答
2021/02/28 无线电
php基础教程 php内置函数实例教程
2012/08/21 PHP
浅谈PHP变量作用域以及地址引用问题
2013/12/27 PHP
php微信开发之自定义菜单完整流程
2016/10/08 PHP
php 命名空间(namespace)原理与用法实例小结
2019/11/13 PHP
语义化 H1 标签
2008/01/14 Javascript
js正确获取元素样式详解
2009/08/07 Javascript
javascript showModalDialog,open取得父窗口的方法
2010/03/10 Javascript
jquery cookie的用法总结
2013/11/18 Javascript
jquery实现效果比较好的table选中行颜色
2014/03/25 Javascript
php实例分享之实现显示网站运行时间
2014/05/20 Javascript
js实现百度联盟中一款不错的图片切换效果完整实例
2015/03/04 Javascript
JavaScript获得表单target属性的方法
2015/04/02 Javascript
AngularJS 2.0新特性有哪些
2016/02/18 Javascript
详解JavaScript常量定义
2017/01/03 Javascript
JavaScript基于Dom操作实现查找、修改HTML元素的内容及属性的方法
2017/01/20 Javascript
js阻止移动端页面滚动的两种方法
2017/01/25 Javascript
JS实现的哈夫曼编码示例【原始版与修改版】
2018/04/22 Javascript
原生JS实现自定义下拉单选选择框功能
2018/10/12 Javascript
13 个npm 快速开发技巧(推荐)
2019/07/04 Javascript
详解python中的json的基本使用方法
2016/12/21 Python
详解Python 实现元胞自动机中的生命游戏(Game of life)
2018/01/27 Python
Python3.4学习笔记之 idle 清屏扩展插件用法分析
2019/03/01 Python
python encrypt 实现AES加密的实例详解
2020/02/20 Python
python/golang 删除链表中的元素
2020/09/14 Python
python 删除系统中的文件(按时间,大小,扩展名)
2020/11/19 Python
发现两个有趣的CSS3动画效果
2013/08/14 HTML / CSS
Ralph Lauren意大利官方网站:时尚界最负盛名的品牌之一
2018/10/18 全球购物
nohup的用法
2012/11/26 面试题
汽车运用工程专业毕业生推荐信
2013/12/25 职场文书
《乌塔》教学反思
2014/02/17 职场文书
未中标通知书
2015/04/17 职场文书
关于成立领导小组的通知
2015/04/23 职场文书
写给媳妇的检讨书
2015/05/06 职场文书
【海涛DOTA解说】EVE女子战队独家录像加ZSMJ神牛两连发
2022/04/01 DOTA
oracle数据库去除重复数据
2022/05/20 Oracle