微信开发之微信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 相关文章推荐
js页面跳转常用的几种方式
Nov 25 Javascript
js面向对象设计用{}好还是function(){}好(构造函数)
Oct 23 Javascript
JavaScript操作XML 使用百度RSS作为新闻源示例
Feb 17 Javascript
Javascript图像处理—平滑处理实现原理
Dec 28 Javascript
windows8.1+iis8.5下安装node.js开发环境
Dec 12 Javascript
jQuery基于toggle实现click触发DIV的显示与隐藏问题分析
Jun 12 Javascript
javascript的replace方法结合正则使用实例总结
Jun 16 Javascript
JS控制div跳转到指定的位置的几种解决方案总结
Nov 05 Javascript
jquery获取transform里的值实现方法
Dec 12 jQuery
jquery引入外部CDN 加载失败则引入本地jq库
May 23 jQuery
JavaScript循环遍历你会用哪些之小结篇
Sep 28 Javascript
vuex的使用和简易实现
Jan 07 Vue.js
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用SAX解析XML的实现代码与问题分析
2011/08/22 PHP
浅析php插件 Simple HTML DOM 用DOM方式处理HTML
2013/07/01 PHP
PHP_Cooikes不同页面无法传递的解决方法
2014/03/07 PHP
Jquery插件之多图片异步上传
2010/10/20 Javascript
jquery插件开发注意事项小结
2013/06/04 Javascript
JavaScript常用的返回,自动跳转,刷新,关闭语句汇总
2015/01/13 Javascript
javascript实现简单的页面右下角提示信息框
2015/07/31 Javascript
JS实现带关闭功能的阿里妈妈网站顶部滑出banner工具条代码
2015/09/17 Javascript
JavaScript 浏览器兼容性总结及常用浏览器兼容性分析
2016/03/30 Javascript
javascript验证手机号和实现星号(*)代替实例
2016/08/16 Javascript
浅谈vue自定义全局组件并通过全局方法 Vue.use() 使用该组件
2017/12/07 Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
2018/01/08 Javascript
在vue中使用公共过滤器filter的方法
2018/06/26 Javascript
vue使用Element组件时v-for循环里的表单项验证方法
2018/06/28 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
JS中实现隐藏部分姓名或者电话号码的代码
2018/07/17 Javascript
详解使用Nuxt.js快速搭建服务端渲染(SSR)应用
2019/03/13 Javascript
微信小程序云开发之云函数详解
2019/05/16 Javascript
使用webpack将ES6转化ES5的实现方法
2019/10/13 Javascript
Python发送Email方法实例
2014/08/21 Python
你所不知道的Python奇技淫巧13招【实用】
2016/12/14 Python
python实现RabbitMQ的消息队列的示例代码
2018/11/08 Python
pybind11在Windows下的使用教程
2019/07/04 Python
解决Python图形界面中设置尺寸的问题
2020/03/05 Python
Python如何省略括号方法详解
2020/03/21 Python
Python偏函数实现原理及应用
2020/11/20 Python
Python实现对word文档添加密码去除密码的示例代码
2020/12/29 Python
在Pycharm中安装Pandas库方法(简单易懂)
2021/02/20 Python
使用CSS3制作倾斜导航条和毛玻璃效果
2017/09/12 HTML / CSS
缅甸网上购物:Shop.com.mm
2017/12/05 全球购物
公司承诺书格式
2014/05/21 职场文书
环保标语大全
2014/06/12 职场文书
公司财务制度:成本管理控制制度模板
2019/11/19 职场文书
使用css样式设计一个简单的html登陆界面的实现
2021/03/30 HTML / CSS
python状态机transitions库详解
2021/06/02 Python
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS