h5客服聊天（jssdk语音）

最近在弄个微信公众号中嵌入h5的客服聊天界面，在此记录一下，主要功能是长按录音，上滑录音，下滑取消录音。

客服接收用的环信1.4.5版本的webIm即时通讯sdk（主要难点在于jssdk录音完成后怎么发送给环信客服）,好了，接下来就看看实现步骤吧

1.在页面中引入微信jssdk文件<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>

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/withdraw@2x.png)");
			$(".totast .totastImg").removeClass("imgAnimation");
			isSend = false;
		} else {
			$(".totast p").removeClass("error");
			$(".totast p").text("手指上滑，取消发送");
			$(".totast .totastImg").css("background-image", "url(img/holdDown@2x.png)");
			$(".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在微信中打开录音和上传到服务器功能已经完成