add connect button for ws html5 (#621)

funasr/runtime/html5/static/index.html

@@ -36,6 +36,7 @@
 				<br>
                 <div id="info_div">请点击开始</div>
 				<div class="div_class_buttons">
+					<button id="btnConnect">连接</button>
 					<button id="btnStart">开始</button>
 					<button id="btnStop">停止</button>
  

funasr/runtime/html5/static/main.js

@@ -23,12 +23,14 @@ var rec = Recorder({
 var sampleBuf=new Int16Array();
 // 定义按钮响应事件
 var btnStart = document.getElementById('btnStart');
-btnStart.onclick = start;
+btnStart.onclick = record;
 var btnStop = document.getElementById('btnStop');
 btnStop.onclick = stop;
 btnStop.disabled = true;
+btnStart.disabled = true;
  
-
+btnConnect= document.getElementById('btnConnect');
+btnConnect.onclick = start;
  
 var rec_text="";
 var offline_text="";
@@ -38,7 +40,7 @@ var info_div = document.getElementById('info_div');
 //now_ipaddress=now_ipaddress.replace("https://","wss://");
 //now_ipaddress=now_ipaddress.replace("static/index.html","");
 //document.getElementById('wssip').value=now_ipaddress;
-
+ 
 function getAsrMode(){
 
             var item = null;
@@ -82,11 +84,14 @@ function getJsonMessage( jsonMsg ) {
 function getConnState( connState ) {
 	if ( connState === 0 ) {
  
-		rec.open( function(){
-			rec.start();
-			console.log("开始录音");
+		//rec.open( function(){
+		//	rec.start();
+		//	console.log("开始录音");
  
-		});
+		//});
+		btnStart.disabled = false;
+		btnConnect.disabled = true;
+		info_div.innerHTML='连接成功!请点击开始';
 	} else if ( connState === 1 ) {
 		//stop();
 	} else if ( connState === 2 ) {
@@ -95,11 +100,19 @@ function getConnState( connState ) {
 		 
 		alert("连接地址"+document.getElementById('wssip').value+"失败,请检查asr地址和端口，并确保h5服务和asr服务在同一个域内。或换个浏览器试试。");
 		btnStart.disabled = true;
-		info_div.innerHTML='请点击开始';
+
+		info_div.innerHTML='请点击连接';
 	}
 }
 
-
+function record()
+{
+		 rec.open( function(){
+		 rec.start();
+		 console.log("开始");
+		 btnStart.disabled = true;
+		 });
+}
 // 识别启动、停止、清空操作
 function start() {
 	
@@ -107,14 +120,15 @@ function start() {
 	clear();
 	//控件状态更新
  	    
-
+    info_div.innerHTML="正在连接asr服务器，请等待...";
 	//启动连接
 	var ret=wsconnecter.wsStart();
 	if(ret==1){
 		isRec = true;
 		btnStart.disabled = true;
 		btnStop.disabled = false;
-	    info_div.innerHTML="正在连接asr服务器，请等待...";
+		btnConnect.disabled=true;
+
 	}
 }
 
@@ -147,7 +161,10 @@ function stop() {
 	btnStop.disabled = true;
 	setTimeout(function(){
 		console.log("call stop ws!");
-		wsconnecter.wsStop();btnStart.disabled = false;info_div.innerHTML="请点击开始";}, 3000 );
+		wsconnecter.wsStop();
+		btnStart.disabled = true;
+		btnConnect.disabled=false;
+		info_div.innerHTML="请点击连接";}, 3000 );
 	rec.stop(function(blob,duration){
   
 		console.log(blob);