更新asr的demo代码

supercoeus · May 8, 2022 · 9a2aca5 · 9a2aca5
1 parent 7b00c6b
commit 9a2aca5
Show file tree

Hide file tree

Showing 3 changed files with 32 additions and 31 deletions.
diff --git a/assets/runtime-codes/fragment.touch_button.js b/assets/runtime-codes/fragment.touch_button.js
@@ -54,16 +54,6 @@ window.DemoFragment||(window.DemoFragment={})
 			elem.addEventListener(type,fn);
 		};
 	};
-	var setCss=function(elem,k,v,ok){
-		var style=elem.style;
-		if(!ok){
-			var k2=k[0].toUpperCase()+k.substr(1);
-			style["webkit"+k2]=v;
-			style["moz"+k2]=v;
-			style["ms"+k2]=v;
-		};
-		style[k]=v;
-	};
 
 	var btn;
 	var getBtn=function(){
@@ -79,6 +69,9 @@ window.DemoFragment||(window.DemoFragment={})
 		}
 	};
 
+	var usStyle=document.createElement("style");//强力禁用所有元素的选择，不然有些沙雕元素可能是设置了auto，某些沙雕浏览器里面长按会选到这些auto的元素
+	usStyle.innerHTML='*{'+['-webkit-','-ms-','-moz-','',''].join('user-select:none !important;')+'}';
+
 	var body=document.body;
 	var store=DemoFragment.BindTouchButton;
 	var needCall,needFinal,needUp,needUS,downHit,downEvent;
@@ -94,7 +87,7 @@ window.DemoFragment||(window.DemoFragment={})
 		downEvent=e;
 
 		needUS=true;
-		killUS&&setCss(body,"userSelect","none")//kill all 免得渣渣浏览器里面复制搜索各种弹，这些浏览器单独给div设置是没有用的
+		killUS&&body.appendChild(usStyle);//kill all 免得渣渣浏览器里面复制搜索各种弹，这些浏览器单独给div设置是没有用的
 
 		var idx=store.downIdx=(store.downIdx||0)+1;
 		downHit=setTimeout(function(){
@@ -104,13 +97,13 @@ window.DemoFragment||(window.DemoFragment={})
 			needUp=true;
 
 			getBtn();
-			setCss(btn,"background",downBG,1);
+			btn.style.background=downBG;
 			btn.innerText=text2;
 
 			onStart&&onStart(function(textErr){//可能结束长按了才回调 idx控制时序
 				if(idx==store.downIdx && needCall){//阻止二次进入 或 早已取消
 					if(textErr){
-						setCss(btn,"background",errBG,1);
+						btn.style.background=errBG;
 						btn.innerText=textErr;
 					};
 					cancel(true,false,textErr);
@@ -123,11 +116,11 @@ window.DemoFragment||(window.DemoFragment={})
 	var cancel=function(isCancel,isUser,keepBtn){
 		getBtn();
 		if(!keepBtn){
-			needUS&&killUS&&setCss(body,"userSelect",null);
+			needUS&&killUS&&body.removeChild(usStyle);
 			needUS=0;
 			if(needUp){//恢复按钮为未按状态
 				needUp=0;
-				setCss(btn,"background",upBG,1);
+				btn.style.background=upBG;
 				btn.innerText=text1;
 			}
 		}
@@ -154,11 +147,7 @@ window.DemoFragment||(window.DemoFragment={})
 			var a=downEvent;
 			var b=e;
 			if(Math.abs(a.screenX-b.screenX)+Math.abs(a.screenY-b.screenY)>3*2){
-				killUS&&setCss(body,"userSelect",null);
-				needUS=0;
-
-				clearTimeout(downHit);
-				downHit=0;
+				cancel();
 			};
 		};
 	});

diff --git a/assets/runtime-codes/teach.realtime.asr.aliyun.short.js b/assets/runtime-codes/teach.realtime.asr.aliyun.short.js
@@ -18,6 +18,8 @@ var fileToText=function(audioBlob,fileName){
 		return;
 	};
 	Runtime.Log("开始识别文件：《"+fileName+"》，asrProcess中已限制最多识别前60*3-5*(3-1)=170秒 ...");
+	$(".recAsrTxt").text("");
+	$(".recAsrTime").html("");
 
 	var asr2=asr=Recorder.ASR_Aliyun_Short({
 		tokenApi:$(".asrTokenApi").val()
@@ -161,6 +163,8 @@ var asrOnTouchStart=function(cancel){
 		recAsrStatus("上次asr未关闭",1);
 		return;
 	};
+	$(".recAsrTxt").text("");
+	$(".recAsrTime").html("");
 
 	//创建语音识别对象，每次识别都要新建，asr不能共用
 	var asr2=asr=Recorder.ASR_Aliyun_Short({
@@ -299,21 +303,22 @@ Runtime.Ctrls([
 '}
 	,{html:'<hr/>\
 <div>\
+	<span style="margin-right:170px">\
 	<button class="mainBtn recOpenBtn" onclick="recOpenClick()">单击此处打开 录音+识别 功能</button>\
 	<button class="mainBtn recCloseBtn" onclick="recCloseClick()" style="display:none;">关闭录音</button>\
+	</span>\
+	\
+	<button class="mainBtn asrStartBtns" style="display:none;" onclick="asrStartClick_NoTouch()">免按住开始录音+识别</button>\
+	<button class="mainBtn asrStopBtn" onclick="asrStopClick_NoTouch()" style="display:none;">结束语音识别</button>\
 </div>\
 \
-<div class="recAsrStatus"></div>\
-\
 <div>\
-	<span class="asrStartBtns" style="display:none;">\
-		<button class="mainBtn recTouchBtn" style="width:260px;height:60px;line-height:60px;margin-right:80px"></button>\
-		\
-		<button class="mainBtn" onclick="asrStartClick_NoTouch()">免按住开始录音+识别</button>\
-	</span>\
-	<button class="mainBtn asrStopBtn" onclick="asrStopClick_NoTouch()" style="display:none;">结束语音识别</button>\
+	<button class="mainBtn recTouchBtn asrStartBtns" style="width:260px;height:60px;line-height:60px;display:none;"></button>\
 </div>\
 \
+<div class="recAsrStatus"></div>\
+\
+<hr/>\
 <div style="margin:12px 0 6px;font-size:12px">实时识别结果: <span class="recAsrTime"></span></div>\
 <div class="recAsrTxt" style="padding:15px 10px;min-height:50px;margin-bottom:12px;border:3px dashed #a2a1a1"></div>\
 '}

diff --git a/assets/zdemo.index.asr.js b/assets/zdemo.index.asr.js
@@ -29,8 +29,6 @@ $(".asrView").html('<div style="border:1px solid #ddd;margin-top:6px">\
 </div>\
 \
 <div style="border-bottom:1px solid #ddd;padding:10px">\
-	<div class="recAsrStatus"></div>\
-	\
 	<div>\
 		<span class="asrStartBtns">\
 			<button class="mainBtn recTouchBtn" style="width:260px;height:60px;line-height:60px;margin-right:80px"></button>\
@@ -40,7 +38,11 @@ $(".asrView").html('<div style="border:1px solid #ddd;margin-top:6px">\
 		<button onclick="asrStopClick_NoTouch()">结束语音识别</button>\
 	</div>\
 	\
-	<div style="margin:12px 0 6px;font-size:12px">实时识别结果: <span class="recAsrTime"></span></div>\
+	<div class="recAsrStatus"></div>\
+</div>\
+\
+<div style="border-bottom:1px solid #ddd;padding:10px">\
+	<div style="margin:0 0 6px;font-size:12px">实时识别结果: <span class="recAsrTime"></span></div>\
 	<div class="recAsrTxt" style="padding:15px 10px;min-height:50px;margin-bottom:12px;border:3px dashed #a2a1a1"></div>\
 </div>\
 \
@@ -156,6 +158,8 @@ window.asrLastRecBlobToText=function(){
 		return;
 	};
 	reclog("开始识别当前录音Blob文件，asrProcess中已限制最多识别前60*3-5*(3-1)=170秒 ...");
+	$(".recAsrTxt").text("");
+	$(".recAsrTime").html("");
 
 	var asr2=asr=Recorder.ASR_Aliyun_Short({
 		tokenApi:$(".asrTokenApi").val()
@@ -241,6 +245,9 @@ var asrOnTouchStart=function(cancel){
 	});
 };
 var asrOnTouchStart__=function(cancel){
+	$(".recAsrTxt").text("");
+	$(".recAsrTime").html("");
+
 	//创建语音识别对象，每次识别都要新建，asr不能共用
 	var asr2=asr=Recorder.ASR_Aliyun_Short({
 		tokenApi:$(".asrTokenApi").val()