这篇文章可以完成的需求功能是使用PHP开发微信的jssdk的录音功能也就是说,在微信浏览器内打开的页面,制作一个按钮,用户按住按钮后开始录音,松手后停止录音并将录音上传并长期保存。如果开发的是普通的展示性页面,就和开发普通的页面没有区别,不过这里要用到设备(手机)的录音功能,就需要调用微信app的录音接口,需要使用微信jssdk。
微信的官方开发文档内容:
先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。[需要有微信公众号]
引入JS文件
通过config接口注入权限验证配置
通过ready接口处理成功验证
通过error接口处理失败验证
一:
//假设已引入微信jssdk。并且jsssdk签名已经完成认证在模板中如下:
wx.config({
debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来, 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();//如果要保存音频的话就在此调用上传
dis();//如果想直接把语音转换成字符串可以调用这个方法
},
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) {
},
error: function (xhr, errorType, error) {
console.log(error);
}
});
}
});
}
//在PHP部分可以使用 copy("http://file.api.weixin.qq.com/cgi-bin/media/get?access_token={$tokenStr['access_token']}&media_id={$imgServerId}",
“./{$imgServerId}.mp3");这样的方式把语音保存在自己的服务器
//注册微信播放录音结束事件【一定要放在wx.ready函数内】
wx.onVoicePlayEnd({
success: function (res) {
stopWave();
}
});
//这个可以放在语音录完之后调用这个方法进行直接语音转文本的方式
Function dis(){
wx.translateVoice({
localId: voice, // 需要识别的音频的本地Id,由录音相关接口获得
isShowProgressTips: 1, // 默认为1,显示进度提示
success: function (res) {
if (res.hasOwnProperty('translateResult')) {
// alert('识别结果:' + res.translateResult);//返回字符串是语音识别内容
} else {
alert('无法识别,请重新录音');
}
}
});
}