【转】微信jssdk录音功能开发记录
转自:http://www.cnblogs.com/liujunyang/p/4962423.html#undefined
0.需求描述
在微信浏览器内打开的页面,制作一个按钮,用户按住按钮后开始录音,松手后停止录音并将录音上传并长期保存。
1.开发流程
如果开发的是普通的展示性页面,就和开发普通的页面没有区别,不过这里要用到设备(手机)的录音功能,就需要调用微信app的录音接口,需要使用微信jssdk。
使用微信jssdk:微信JS-SDK说明文档
- 先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。[需要有微信公众号]
- 引入JS文件
- 通过config接口注入权限验证配置
- 通过ready接口处理成功验证
- 通过error接口处理失败验证
//假设已引入微信jssdk。【支持使用 AMD/CMD 标准模块加载方法加载】
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
appId: '', // 必填,公众号的唯一标识
timestamp: , // 必填,生成签名的时间戳
nonceStr: '', // 必填,生成签名的随机串
signature: '',// 必填,签名,见附录1
jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
}); wx.ready(function(){ // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
}); wx.error(function(res){ // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。 });
本次需求核心功能:录音并保存
//假设全局变量已经在外部定义
//按下开始录音
$('#talk_btn').on('touchstart', function(event){
event.preventDefault();
START = new Date().getTime(); recordTimer = setTimeout(function(){
wx.startRecord({
success: function(){
localStorage.rainAllowRecord = 'true';
},
cancel: function () {
alert('用户拒绝授权录音');
}
});
},300);
});
//松手结束录音
$('#talk_btn').on('touchend', function(event){
event.preventDefault();
END = new Date().getTime(); if((END - START) < 300){
END = 0;
START = 0;
//小于300ms,不录音
clearTimeout(recordTimer);
}else{
wx.stopRecord({
success: function (res) {
voice.localId = res.localId;
uploadVoice();
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
}
});
//上传录音
function uploadVoice(){
//调用微信的上传录音接口把本地录音先上传到微信的服务器
//不过,微信只保留3天,而我们需要长期保存,我们需要把资源从微信服务器下载到自己的服务器
wx.uploadVoice({
localId: voice.localId, // 需要上传的音频的本地ID,由stopRecord接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
//把录音在微信服务器上的id(res.serverId)发送到自己的服务器供下载。
$.ajax({
url: '后端处理上传录音的接口',
type: 'post',
data: JSON.stringify(res),
dataType: "json",
success: function (data) {
alert('文件已经保存到七牛的服务器');//这回,我使用七牛存储
},
error: function (xhr, errorType, error) {
console.log(error);
}
});
}
});
}
//注册微信播放录音结束事件【一定要放在wx.ready函数内】
wx.onVoicePlayEnd({
success: function (res) {
stopWave();
}
});
2.小麻烦
要防止用户误操作(如:反复点击、误触摸)导致的无效录音。
小于300ms不录音
防止用户长按导致的浏览器默认弹出微信浏览器默认的“复制对话框”。
使用css设置按钮 user-select:none;
微信播放录音接口事件回调函数无效
微信注册事件一定要放在wx.ready中。
阻止默认事件
touch 事件记得加 event.preventDefault(); 防火防爆
微信存储静态资源时间为3天,如何长期保存
要么存到自己服务器,要么利用其它资源,比如七牛,还可以帮我们自由转换amr格式到mp3等格式呢!
微信服务器默认资源格式为amr,这个格式在android机器可以使用audio标签播放,在ios机器使用audio标签无法播放。
微信录音功能授权引发的交互问题
使用微信jssdk接口录音,在同一个域只需要授权一次,即第一次使用录音的时候,微信自己会弹出对话框询问是否允许录音,用户点击允许后,之后再使用录音时,便不会再咨询用户是否允许。
在第一次按住录音后,由于用户未曾允许录音,微信会提示用户授权允许在本页面使用微信录音功能,这时用户会放开录音按钮转而去点击允许,在用户允许后,才真正会开始录音,而此时用户早已放开录音按钮,那么录音按钮上便不会再有touchend事件,录音便会一直进行。
解决策略:使用localStorage记录用户是否曾授权,并以此来判断是否需要在刚进入页面是自动录一段录音来触发用户授权
if(!localStorage.rainAllowRecord || localStorage.rainAllowRecord !== 'true'){
wx.startRecord({
success: function(){
localStorage.rainAllowRecord = 'true';
wx.stopRecord();
},
cancel: function () {
alert('用户拒绝授权录音');
}
});
}
3.难题
音量bug:在ios设备上,使用微信录音功能后,再播放audio标签的音频,音量极低。
但是使用微信接口(wx.playVoice)播放录音的音量是正常的,而且之后,audio标签的音量会有所增大(但是依然音量很低)。
该问题正在沟通微信相关技术人员。
暂时的解决策略为:对于刚刚录音的音频,使用wx.playVoice来播放,否则使用audio播放服务器资源。原因是不确定该音频本地是否存在,刚刚录音的音频肯定是存在的。
【转】微信jssdk录音功能开发记录的更多相关文章
- 微信jssdk录音功能开发记录
原文地址:http://www.cnblogs.com/liujunyang/p/4962423.html
- 微信公众号_订阅号_微信JS-SDK网页开发
微信JS-SDK( 分享接口很常用 ) 是微信公众平台 面向网页开发者提供的基于微信内的网页开发工具包 借助微信高效使用相机.语音.选题.位置等手机系统的能力,同时可以直接使用微信分享.扫一扫.支付等 ...
- 微信小程序开发 记录
采坑了 微信小程序--TabBar不出现的一种原因 学习微信小程序中,遇到底部的TabBar不出现的问题.经过多番尝试,终于解决问题.在此记录问题产生的原因和对策.下面先描述错误现象,接着指出错误原因 ...
- 微信JSSDK javascript 开发 代码片段,仅供参考
最全面最专业的微信公众平台开发教程:http://www.cnblogs.com/txw1958/p/weixin-js-sdk-demo.html 比较完整的分享教程:http://www.cnbl ...
- 微信 JS-SDK 各种问题记录
在开发微信公众号网页中,使用微信的 JS-SDK 会遇到各种坑.记录遇到的坑及解决方法. 1.JS-SDK 配置(url 指向). 在 JS-SDK 配置中,配置的签名基本在服务器完成,网上有各种方法 ...
- 微信小程序开发记录
顶栏banner代码 /**app.wxss**/ .container { height: 100%; display: flex; flex-direction: column; align-it ...
- 微信JSSDK使用指南
这篇文章主要来说说微信JSSDK的一些配置和微信分享的使用,包括从前端sdk文件引入到server端和微信server的交互. 另外Tangide已经把一些工作做好了.我会简要说一说怎么把它用 ...
- 微信JSSdk实现分享功能
1. 概述 微信分享服务器的作用是为用户在微信浏览器端对来自网站以及客户端的页面进行二次分享链接时更友好的展示提供服务.为实现二次分享功能需要使用微信JS-SDK来开发. 微信JS-SDK是微信公众平 ...
- C#开发微信门户及应用(39)--使用微信JSSDK实现签到的功能
随着微信开逐步开放更多JSSDK的接口,我们可以利用自定义网页的方式来调用更多微信的接口,实现我们更加丰富的界面功能和效果,例如我们可以在页面中调用各种手机的硬件来获取信息,如摄像头拍照,GPS信息. ...
随机推荐
- mac 安装oracle
http://www.oracle.com/technetwork/cn/database/10204macsoft-x86-64-087400-zhs.html
- Parquet存储格式 - 论文翻译【转】
Apache Parquet是Hadoop生态圈中一种新型列式存储格式,它可以兼容Hadoop生态圈中大多数计算框架(Mapreduce.Spark等),被多种查询引擎支持(Hive.Impala.D ...
- Cloud Foundry技术全貌及核心组件分析
原文链接:http://www.programmer.com.cn/14472/ 历经一年多的发展,Cloud Foundry的架构设计和实现有了众多改进和优化.为了便于大家了解和深入研究首个开源Pa ...
- log4j和commons- logging(好文整理转载)
一 :为什么同时使用commons-logging和Log4j?为什么不仅使用其中之一? Commons-loggin的目的是为 “所有的Java日志实现”提供一个统一的接口,它自身的日志功能平常弱( ...
- PHP 的异常处理、错误的抛出及回调函数等面向对象的错误处理方法
PHP 的异常处理.错误的抛出及回调函数等面向对象的错误处理方法: http://www.jb51.net/article/32498.htm http://www.cnblogs.com/hongf ...
- net 中的一些知识
这是一篇摘抄的文章 有一些内容对我很有帮助 .有一些内容解释很清晰 所以我拿过来了. 第一遍用了5天时间,第二遍看的时候决定自己复制一份出来于是有了这儿博客. 什么是.NET?什么是.NET Fram ...
- TextureMerger1.6.6 一:Egret MovieClip的制作和使用
本随笔记录TextureMerger来制作动画,并在Egret中使用. 参考官网教程:http://bbs.egret.com/forum.php?mod=viewthread&tid=918 ...
- Unity3D之Unity3D 4.3.0 破解方法
Dear All 破解有风险,破解不尊重知识产权,如果有涉及请删除或者联系我……以下呢 是我这几天捣鼓的4.3.0版本 供学习!请大家支持正版! 1.下载最新版本 我是在Unity官网下载的最新版本 ...
- mysql字符串根据指定字符分割
1.分割函数:SUBSTRING_INDEX('浙江温州-中国电信','-','1') 2.用例(筛选'-'前至少4个汉字的数据) a.数据分布 b.筛选sql select t.mobile_num ...
- centos7.2启动级别
systemctl set-default multi-user.target 设定默认为字符界面,也就是3 systemctl set-default graphical.target ...