再开发公众号小程序的时候要用到h5录音。找了半天的方法决定用微信的接口来解决.
步骤：1.0 (获取token_access)1
利用公众号的appid和appsercet通过get请求这个接口:
$url='https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$appid.'&secret='.$ap;
得到此时对应的token_access。
因为token_access有2小时的有效期建议缓存或者存在数据库中判断是否需要重新获取。毕竟每天的请求次数是有限的。
步骤:2.0 根据得到的token获取jsapi_ticket:
请求接口:
$url="https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=ACCESS_TOKEN&type=jsapi";
获取到对应的jsapi_ticket。
尽量存在数据库或者说缓存。理由同上
第三部步生成签名:
参与签名的数据:
jsapi_ticket：上面步骤获取到的jsapi_ticket。
url:链接。当前页面的链接。
timestamp：时间戳。自己生成
nonceStr：随机字符串。自己生成。
规则：对所有待签名参数按照字段名的ASCII 码从小到大排序（字典序）后。通过键值对进行拼接成字符串String1。
拼接完后进行sha1加密
前三步为php的操作。
第四步:配置wx.config.。开始html（js）部分的操作
其他引入js。
<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
wx.config({
debug: false,
appId: '{$signPackage["appId"]}', appid
timestamp: '{$signPackage["timestamp"]}', 时间戳
nonceStr: '{$signPackage["nonceStr"]}', 字符串
signature: '{$signPackage["signature"]}',生成的签名
jsApiList: ['startRecord','stopRecord','playVoice','uploadVoice'] 要调用的接口名。
});
js
wx.ready(function () {
var voice = {
localId: '',
serverId: ''
};
var startRecord = document.querySelector('#startRecord');
var stopClearTimeout;
startRecord.onclick = function () {
//开始录音alert('6666666');
if(startRecord.innerHTML == '开始'){
wx.startRecord({
success: function(){
startRecord.innerHTML = '停止';
//30秒后自动停止;
stopClearTimeout = setTimeout(function(){
wx.stopRecord({
success: function (res) {
voice.localId = res.localId;
startRecord.innerHTML = '试听';
}
});
},30000);
},
});
}
//结束录音
if(startRecord.innerHTML =='停止'){
wx.stopRecord({
success: function (res) {
clearTimeout(stopClearTimeout);
startRecord.innerHTML = '试听';
voice.localId = res.localId;
},
fail: function (res) {
alert(JSON.stringify(res));
}
});
}
//试听音频
if(startRecord.innerHTML =='试听'){
if (voice.localId == '') {
alert('请先录制一段声音');
return;
}
wx.playVoice({
localId: voice.localId
});
}
};
//删除语音,重新录音;
document.querySelector('#deleteVoice').onclick = function(){
voice.localId = '';
startRecord.innerHTML = '开始';
}
//确认上传语音
document.querySelector('#uploadVoice').onclick = function () {
if (voice.localId == '') {
alert('请先录制一段声音');
return;
}
wx.uploadVoice({
localId: voice.localId,
isShowProgressTips: 1,
success: function (res) {
voice.serverId = res.serverId;
//把微信服务器上的serverId传给后台,后台再通过serverId到微信服务器上把语音保存到自己服务器上
$.ajax({
url: '{$_W['siteroot']}app/index.php?i={$_W['uniacid']}&c=entry&m=ewei_shopv2&do=save',//后台接收数据地址
dataType: "json",
type: 'get',
data: {'id': voice.serverId},
success: function (msg) {
// alert(msg['status']);
//
var a=msg['status'];
document.getElementById('zz').value=a;
// wx.downloadVoice({
// serverId: voice.serverId, // 需要下载的音频的服务器端ID，由uploadVoice接口获得
// isShowProgressTips: 1, // 默认为1，显示进度提示
// success: function (res) {
// alert('111');
// var localId = res.localId; // 返回音频的本地ID
// }
// });
},
});
}
});
};
});
说明：其中的ajax操作是将服务器中的音频存储到数据库中并将其下载到本地服务器上。
ps:上传至微信服务器上的音频最多保留3天。
html:
<div class="wxapi_container">
<input id="zz" name="zz" value="zz" />
<div class="lbox_close wxapi_form">
<button class="btn btn_primary" id="startRecord">开始</button>
<button class="btn btn_primary" id="deleteVoice">删除</button>
<button class="btn btn_primary" id="uploadVoice">上传{$f}</button>
</div>
<input type="button" value="play" id="playId"/>
<input type="button" value="stop" id="stopId"/>
</div>
步骤五。php通过serverId下载到服务器上
// 音频处理
public function doMobileSave(){
global $_GPC,$_W;
$wechat=pdo_get('account_wechats',array('uniacid'=>$_W['uniacid']));
$appid=$wechat['key'];
$ap=$wechat['secret'];
$token=pdo_get('vos',array('id'=>1));
$time=time()-$token['addtime'];
//验证token是否过期
if($time>=7200){
$url='https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid='.$appid.'&secret='.$ap;
$html = file_get_contents($url);
$ha=json_decode($html,true);
$data['addtime']=time();
$data['token']=$ha['access_token'];
pdo_update('vos',$data,array('id'=>1));
}
$token=pdo_get('vos',array('id'=>1));
// 开始下载音频
$path ="/www/wwwroot/hejianhua.songshinet.com/attachment";
if(!is_dir($path)){
mkdir($path);
}
$token=$token['token'];
$id=$_GPC['id'];
$url="http://file.api.weixin.qq.com/cgi-bin/media/get?access_token=".$token."&media_id=".$id; //下载接口
$filename = "wxupload_".time().rand(1111,9999).".amr";
$this-> downAndSaveFile($url,$path."/".$filename);
// 下载结束
$aaaa=$path."/".$filenames;
pdo_insert('vo',array('voiceid'=>$_GPC['id']));
return json_encode(array('status'=>$filename));
}
//存储
public function downAndSaveFile($url,$savePath){
ob_start();
readfile($url);
$img = ob_get_contents();
ob_end_clean();
$size = strlen($img);
$fp = fopen($savePath, 'a');
fwrite($fp, $img);
fclose($fp);
}
以上就是上传录音及下载音频的过程。
补充：
1.0：微信下载的为amr格式html是无法直接播放的。需要另外处理
处理过程（php部分）
$c=file_get_contents("http://hejianhua.songshinet.com/mp3/test.amr");//路径
$f=base64_encode($c);//base64处理
html部分：
js引入：
1.0 voice-2.0.js
2.0 audio.min.js
<script type="text/javascript">
RongIMLib.RongIMVoice.init();
document.getElementById("playId").onclick = function(){
RongIMLib.RongIMVoice.play("{$f}");
};
document.getElementById("stopId").onclick = function(){
RongIMLib.RongIMVoice.stop();
};
<input type="button" value="play" id="playId"/>
<input type="button" value="stop" id="stopId"/>
网友评论