php录音功能,微信开发之录音功能
微信jssdk录音功能开发记录
标签(空格分隔): 前端
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播放服务器资源。原因是不确定该音频本地是否存在,刚刚录音的音频肯定是存在的。
【相关推荐】
php录音功能,微信开发之录音功能相关推荐
- php开发微信jssdk录音功能,微信 JS-SDK 录音功能开发
云娜 今天分享一下我第一次接触微信开发,微信JS-SDK录音功能开发的经历. 在开发微信JS-SDK录音功之前我是没有接触过微信开发的,第一反应就是去百度.建议第一次接触微信开发的同学去微信JSSDK ...
- 微信开发-关于分享朋友朋友圈以及录音功能
前两天刚整理了一个关于微信开发录音功能的开发步骤,网上这方面资料已经很多了,写下来就当作自己的笔记. 一. 首先需要在微信公众号中进行配置(其中Token为自定义项) 二. 在配置的域名文件夹下放置 ...
- android 仿微信录音,Android 模仿微信长按录音功能
Android 模仿微信长按录音功能 布局就两个button这里不多介绍了. 下面是activity内的代码 package com.example.forevercloud.myapplicatio ...
- 微信小程序录音功能的实现:有录音、暂停、继续、停止 、播放等功能。
微信小程序录音功能的实现:有录音.暂停.继续.停止 .播放等功能. 网上找了半天都没找到合适的demo,很多就不完全,看着都有点难受,看了官方的api ,干脆自己写一个 界面如下图 看了网上大部分人写 ...
- android微信网页视频播放器代码下载,android微信中的录音功能 demo
微信中的录音功能 demo 资源下载此资源下载价格为3D币,请先登录 资源文件列表 weixin_Record/res/values-v11/styles.xml , 324 weixin_Recor ...
- 博客导航——一站式搜索(所有博客的汇总帖)【微信开发】
微信开发教程 点击这里查看微信开发效果实现 课程 巧用第三方快速开发Android App 热门第三方SDK及框架 Android Studio Google主推-Android开发利器--Andro ...
- 微信开发之录音上传、下载、转码
原文是在我自己博客中,小伙伴也可以点 阅读原文进行跳转查看,还有好听的背景音乐噢~ 一年的时间里,前前后后都在搞微信开发的相关模块,这不前一阵子,公司又开了个新项目,其中有一个就是类似于微信朋友圈的功 ...
- java微信附件下载_WxJava微信开发工具包
下面我们对WxJava微信开发工具包文件阐述相关使用资料和WxJava微信开发工具包文件的更新信息. WxJava微信开发工具包 WxJava微信开发Java开发工具包(SDK),支持包括微信支付.微 ...
- Java企业微信开发_00_源码及资源汇总贴
一.源码 此系列教程的源码我都放在了github上,欢迎fork以及关注. 传送门:https://github.com/shirayner/WeiXin_QiYe_Demo/tree/master ...
最新文章
- 【思科】BGP的community属性解析
- jquery版本冲突问题
- Unity3D学习笔记(二) 一些常用的空间函数
- ×××生成算法的分析
- Flex3双向绑定完善版
- MySQL 5.7.18 zip 文件安装过程
- Xcode命令行生成Bitcode静态库
- shell 如何避免误删目录
- Java多线程系列---“JUC原子类”06之 AtomicLongFieldUpdater原子类
- 203.移除链表元素
- 微信小程序文件大小限制
- 商务统计分析(第3章 数据描述)
- 关于AARRR用户增长漏斗模型,你究竟了解多少?
- PySide6 : Qt for Python 教程
- matlab has encountered,matlab运行程序时出现“matlab has encountered an internal problem
- spssχ2检验_实用医学统计:配对四格表资料的χ2检验之SPSS操作篇
- 关于ARMv8另外几个问题
- 2021支付宝五福活动 扫码必得沾福气卡 还可获得随机福卡 集五福攻略大全
- 电阻 电容 并联电路
- Plants vs. Zombies
热门文章
- 显卡lol测试软件,GPU测试:能够轻松应对主流游戏_惠普 ENVY X360 15-bp107TX_笔记本评测-中关村在线...
- endnote中科大版是什么意思_ios14.2rc是什么意思 ios14.2rc版是原来的“GM”版吗
- 简易数字电压表设计 单片机 仿真 ADC0809
- CAN收发器TJA1040简介
- 想天浏览器:推荐国内主流浏览器TOP10
- 微信小程序:喝酒娱乐小游戏助力神器
- 看过来!看过来!网络安全类的认证课程都在这里
- SLCP验厂辅导,企业在认证之后便可以将经验证过后的数据信息分享给其它各托管平台
- Html5 Egret游戏开发 成语大挑战(六)游戏界面构建和设计
- 咸鱼Micropython—LED用法