h5客服聊天（jssdk语音）
最近在弄个微信公众号中嵌入h5的客服聊天界面，在此记录一下，主要功能是长按录音，上滑录音，下滑取消录音。
客服接收用的环信1.4.5版本的webIm即时通讯sdk（主要难点在于jssdk录音完成后怎么发送给环信客服）,好了，接下来就看看实现步骤吧
1.在页面中引入微信jssdk文件
2.配置jssdk开发配置->详细见官网点击打开链接，这里特别说下，
wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: data.appId, // 必填，公众号的唯一标识
timestamp: data.timestamp, // 必填，生成签名的时间戳
nonceStr: data.nonceStr, // 必填，生成签名的随机串
signature: data.signature, // 必填，签名，见附录1
jsApiList: wx.config({
debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
appId: data.appId, // 必填，公众号的唯一标识
timestamp: data.timestamp, // 必填，生成签名的时间戳
nonceStr: data.nonceStr, // 必填，生成签名的随机串
signature: data.signature, // 必填，签名，见附录1
jsApiList: ['startRecord', 'stopRecord', 'playVoice', 'onVoiceRecordEnd', 'onVoicePlayEnd', 'uploadVoice'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
});配置中的appId,timestamp,nonceStr,signature这几个参数都是我们后端丢给我的，jsApiList这个列表里面配置的都是在你的项目中运用了些jssdk的哪些功能，切记，这里一定要配置
3.该配置的都配置好了，接下来就可以调用jssdk的功能了，下面的代码实现功能是触摸开始，延时500毫秒后才算长按，录音开始（调用jssdk的wx.startRecord进行录音），播放录音动画（ps:这里动画本来想根据说话声音大小进行播放的，但是sdk没有获取录音中的音量信息,所以暂时用帧动画代替了，有知道的大佬支援下，非常感谢）
//自定义事件start
var timer = "", //定时器
startX = 0, //开始x轴坐标
startY = 0, //开始y轴坐标
isSend = false; //记录是上滑还是下滑，下滑录音
$(".pressVoice").on("touchstart", function(event) {
event.preventDefault();
$(".pressVoice").text("松开 结束");
$(".pressVoice").addClass("voiceActive");
var touch = event.originalEvent.touches[0], //获取第一个触点
x = Number(touch.pageX), //页面触点X坐标
y = Number(touch.pageY); //页面触点Y坐标
//记录触点初始位置
startX = x;
startY = y;
timer = setTimeout(function() {
$(".totastBox").show(); //开始录音时候出现动画
wx.startRecord({
success: function() {
//alert("录音成功")
},
cancel: function() {
alert('用户拒绝授权录音');
}
});
}, 500)
})
$(".pressVoice").on("touchmove", function(event) {
event.preventDefault();
var touch = event.originalEvent.touches[0], //获取第一个触点
x = Number(touch.pageX), //页面触点X坐标
y = Number(touch.pageY); //页面触点Y坐标
//判断滑动方向
if(y - startY > 0) {
$(".totast p").addClass("error");
$(".totast p").text("松开手指，取消发送");
$(".totast .totastImg").css("background-image", "url(img/[email protected])");
$(".totast .totastImg").removeClass("imgAnimation");
isSend = false;
} else {
$(".totast p").removeClass("error");
$(".totast p").text("手指上滑，取消发送");
$(".totast .totastImg").css("background-image", "url(img/[email protected])");
$(".totast .totastImg").addClass("imgAnimation");
isSend = true;
}
})
$(".pressVoice").on("touchend", function(event) {
event.preventDefault();
$(".pressVoice").text("按住 说话");
$(".pressVoice").removeClass("voiceActive");
clearTimeout(timer);
$(".totastBox").hide();
timer = "";
//需要上传的音频的本地ID，由stopRecord接口获得
wx.stopRecord({
success: function(res) {
//alert(JSON.stringify(res));
voice = res.localId;
//alert('录音成功,准备上传' + voice);
uploadVocie(res.localId); //上传录音
},
fail: function(res) {
alert(JSON.stringify(res));
}
});
})4.录音完成后,把语音先上传到腾讯云服务器，由于环信发送语音给客服只能实现本地语音发送，所以，最后经过一番努力查看环信的官网，使用环信的rest接口先上传语音，然后在发送语音客服完美解决该问题，传送门->点击打开链接
由于rest接口是服务器集成（所以这一块需要后端配合了）还好环信有后台的demo->点击打开链接
5.到目前这一步H5在微信中打开录音和上传到服务器功能已经完成