perf: 更新语音消息插件

resources/assets/sass/pages/page-apply.scss

@@ -24,7 +24,7 @@
                 display: flex;
                 align-items: center;
 
-                >h1 {
+                > h1 {
                     color: $primary-title-color;
                     font-size: 28px;
                     font-weight: 600;
@@ -37,19 +37,19 @@
             padding: 16px 30px;
             overflow: auto;
 
-            .apply-row-title{
+            .apply-row-title {
                 margin-bottom: 16px;
 
             }
 
-            >div.apply-row-title:nth-last-child(2){
+            > div.apply-row-title:nth-last-child(2) {
                 margin-top: 22px !important;
             }
 
             .apply-col {
                 margin-bottom: 16px;
 
-                >div {
+                > div {
                     font-size: 14px;
                     font-weight: normal;
                     background: #FFFFFF;
@@ -63,13 +63,13 @@
                     position: relative;
                     border: 1px solid #f1f1f1;
 
-                    >.logo {
+                    > .logo {
                         width: 40px;
                         height: 40px;
                         display: inline-block;
                     }
 
-                    >p{
+                    > p {
                         overflow: hidden;
                         text-overflow: ellipsis;
                         display: -webkit-box;
@@ -90,13 +90,13 @@
         @media (max-width: 510px) {
             background-color: #FFFFFF;
 
-            .apply-row-title{
+            .apply-row-title {
                 margin-bottom: 8px !important;
             }
 
-            .apply-content{
+            .apply-content {
 
-                .ivu-row{
+                .ivu-row {
                     margin-left: -12px !important;
                     margin-right: -12px !important;
                 }
@@ -104,10 +104,10 @@
                 .apply-col {
                     margin-bottom: 6px;
 
-                    >div {
+                    > div {
                         display: block;
                         text-align: center;
-                        padding:12px 0;
+                        padding: 12px 0;
                         background: none;
                         border-color: #ffffff;
 
@@ -116,7 +116,7 @@
                             position: relative;
                         }
 
-                        >p{
+                        > p {
                             -webkit-line-clamp: 1;
                         }
 
@@ -138,72 +138,95 @@
     background-repeat: no-repeat;
     background-size: contain;
     background-position: center center;
+
     &.approve {
         background-image: url("../images/application/approve.svg");
     }
+
     &.add-project {
         background-image: url("../images/application/add-project.svg");
     }
+
     &.add-task {
         background-image: url("../images/application/add-task.svg");
     }
+
     &.all-user {
         background-image: url("../images/application/all-user.svg");
     }
+
     &.complaint {
         background-image: url("../images/application/complaint.svg");
     }
+
     &.app-push {
         background-image: url("../images/application/app-push.svg");
     }
+
     &.approve {
         background-image: url("../images/application/approve.svg");
     }
+
     &.calendar {
         background-image: url("../images/application/calendar.svg");
     }
+
     &.file {
         background-image: url("../images/application/file.svg");
     }
+
     &.ldap {
         background-image: url("../images/application/ldap.svg");
     }
+
     &.mail {
         background-image: url("../images/application/mail.svg");
     }
+
     &.meeting {
         background-image: url("../images/application/meeting.svg");
     }
+
     &.meeting-create {
         background-image: url("../images/application/meeting-create.svg");
     }
+
     &.meeting-join {
         background-image: url("../images/application/meeting-join.svg");
     }
+
     &.okr {
         background-image: url("../images/application/okr.svg");
     }
+
     &.okr-analyze {
         background-image: url("../images/application/okr-analyze.svg");
     }
+
     &.report {
         background-image: url("../images/application/report.svg");
     }
+
     &.robot {
         background-image: url("../images/application/robot.svg");
     }
+
     &.scan {
         background-image: url("../images/application/scan.svg");
     }
+
     &.setting {
         background-image: url("../images/application/setting.svg");
     }
+
     &.signin {
         background-image: url("../images/application/signin.svg");
     }
+
     &.vote {
         background-image: url("../images/application/vote.svg");
     }
+
     &.word-chain {
         background-image: url("../images/application/word-chain.svg");
     }
@@ -225,7 +248,7 @@
         padding: 12px 30px;
         color: #303133;
 
-        >p {
+        > p {
             float: right;
             cursor: pointer;
             color: #2b85e4;
@@ -254,32 +277,21 @@
             display: flex;
             flex-direction: column;
 
-            >.ivu-form {
+            .ivu-form {
                 padding: 8px 30px;
                 overflow: auto;
                 flex: 1;
-
-                .ivu-form-item {
-                    .ivu-form-item .ivu-form-item-content {
-                        display: flex;
-
-                        >.ivu-form {
-                            margin-bottom: 8px;
-
-                        }
-                    }
-                }
             }
 
             .setting-template {
                 margin-bottom: 12px;
 
-                >div {
+                > div {
                     padding-right: 12px;
                 }
             }
 
-            .export-data>p {
+            .export-data > p {
                 cursor: pointer;
                 color: #2b85e4;
             }
@@ -292,7 +304,8 @@
                 display: flex;
                 align-items: center;
                 gap: 8px;
-                .ivu-btn{
+
+                .ivu-btn {
                     min-width: 120px;
                     height: 38px;
                     line-height: 36px;
@@ -309,9 +322,11 @@
             flex-direction: column;
             height: 100%;
             margin: 0 -30px;
-            .ivu-tabs-bar{
+
+            .ivu-tabs-bar {
                 padding: 0 10px;
             }
+
             .ivu-tabs-content {
                 height: 100%;
                 flex: 1;
@@ -372,7 +387,7 @@
                     }
                 }
 
-                .desc{
+                .desc {
                     cursor: pointer;
                     height: 84px;
                     @media (max-width: 510px) {
@@ -409,9 +424,11 @@
 
 .mobile-scan-login-box {
     margin: 2px 0 12px;
+
     .mobile-scan-login-title {
         font-size: 20px;
     }
+
     .mobile-scan-login-subtitle {
         padding-top: 8px;
     }
@@ -419,13 +436,15 @@
 
 body.window-portrait {
     .page-apply {
-        .apply-head{
+        .apply-head {
             margin: 24px 24px 0 24px;
         }
-        .apply-content{
+
+        .apply-content {
             padding: 16px 20px;
+
             .apply-col {
-                >div {
+                > div {
                     font-size: 12px;
                     font-weight: 500;
                 }

resources/assets/statics/public/js/recorder/frequency.histogram.view.js

@@ -1,6 +1,6 @@
 /*
 录音 Recorder扩展，频率直方图显示
-使用本扩展需要引入src/extensions/lib.fft.js支持，直方图特意优化主要显示0-5khz语音部分（线性），其他高频显示区域较小，不适合用来展示音乐频谱，可自行修改源码恢复成完整的线性频谱，或修改成倍频程频谱（伯德图、对数频谱）；本可视化插件可以移植到其他语言环境，如需定制可联系作者
+使用本扩展需要引入src/extensions/lib.fft.js支持，直方图特意优化主要显示0-5khz语音部分（线性），其他高频显示区域较小，不适合用来展示音乐频谱，可通过配置fullFreq来恢复成完整的线性频谱，或自行修改源码修改成倍频程频谱（伯德图、对数频谱）；本可视化插件可以移植到其他语言环境，如需定制可联系作者
 
 https://github.com/xiangyuecn/Recorder
 
@@ -65,6 +65,7 @@ H5环境以上配置二选一
 		,stripeShadowBlur:-1 //峰值小横条阴影基础大小，设为0不显示阴影，-1为柱子的大小，如果柱子数量太多时请勿开启，非常影响性能
 		,stripeShadowColor:"" //峰值小横条阴影颜色，留空为柱子的阴影颜色
 		
+		,fullFreq:false //是否要绘制所有频率；默认false主要绘制5khz以下的频率，高频部分占比很少，此时不同的采样率对频谱显示几乎没有影响；设为true后不同采样率下显示的频谱是不一样的，因为 最大频率=采样率/2 会有差异
 		//当发生绘制时会回调此方法，参数为当前绘制的频率数据和采样率，可实现多个直方图同时绘制，只消耗一个input输入和计算时间
 		,onDraw:function(frequencyData,sampleRate){}
 	};
@@ -214,15 +215,17 @@ fn.prototype=FrequencyHistogramView.prototype={
 		var logY0 = Math.log(Y0)/Math.log(10);
 		var dBmax=20*Math.log(0x7fff)/Math.log(10);
 		
-		var fftSize=bufferSize/2;
+		var fftSize=bufferSize/2,fftSize5k=fftSize;
-		var fftSize5k=Math.min(fftSize,Math.floor(fftSize*5000/(sampleRate/2)));//5khz所在位置，8000采样率及以下最高只有4khz
+		if(!set.fullFreq){//非绘制所有频率时，计算5khz所在位置，8000采样率及以下最高只有4khz
-		var fftSize5kIsAll=fftSize5k==fftSize;
+			fftSize5k=Math.min(fftSize,Math.floor(fftSize*5000/(sampleRate/2)));
-		var line80=fftSize5kIsAll?lineCount:Math.round(lineCount*0.8);//80%的柱子位置
+		}
+		var isFullFreq=fftSize5k==fftSize;
+		var line80=isFullFreq?lineCount:Math.round(lineCount*0.8);//80%的柱子位置
 		var fftSizeStep1=fftSize5k/line80;
-		var fftSizeStep2=fftSize5kIsAll?0:(fftSize-fftSize5k)/(lineCount-line80);
+		var fftSizeStep2=isFullFreq?0:(fftSize-fftSize5k)/(lineCount-line80);
 		var fftIdx=0;
 		for(var i=0;i<lineCount;i++){
-			//不采用jmp123的非线性划分频段，录音语音并不适用于音乐的频率，应当弱化高频部分
+			// !fullFreq 时不采用jmp123的非线性划分频段，录音语音并不适用于音乐的频率，应当弱化高频部分
 			//80%关注0-5khz主要人声部分 20%关注剩下的高频，这样不管什么采样率都能做到大部分频率显示一致。
 			var start=Math.ceil(fftIdx);
 			if(i<line80){
@@ -232,7 +235,8 @@ fn.prototype=FrequencyHistogramView.prototype={
 				//5khz以上
 				fftIdx+=fftSizeStep2;
 			};
-			var end=Math.min(Math.ceil(fftIdx),fftSize);
+			var end=Math.ceil(fftIdx); if(end==start)end++;
+			end=Math.min(end,fftSize);
 			
 			
 			//参考AudioGUI.java .drawHistogram方法
@@ -276,8 +280,6 @@ fn.prototype=FrequencyHistogramView.prototype={
 		var stripeLinear2=set.stripeLinear&&This.genLinear(ctx,set.stripeLinear,originY,originY+heightY)||linear2;//上半部分的峰值小横条填充
 		
 		//计算柱子间距
-		ctx.shadowBlur=set.shadowBlur*scale;
-		ctx.shadowColor=set.shadowColor;
 		var mirrorEnable=set.mirrorEnable;
 		var mirrorCount=mirrorEnable?lineCount*2-1:lineCount;//镜像柱子数量翻一倍-1根
 		
@@ -287,72 +289,81 @@ fn.prototype=FrequencyHistogramView.prototype={
 			widthRatio=(width-spaceWidth*(mirrorCount+1))/width;
 		};
 		
-		var lineWidth=Math.max(1*scale,Math.floor((width*widthRatio)/mirrorCount));//柱子宽度至少1个单位
+		for(var i=0;i<2;i++){
-		var spaceFloat=(width-mirrorCount*lineWidth)/(mirrorCount+1);//均匀间隔，首尾都留空，可能为负数，柱子将发生重叠
+			var lineFloat=Math.max(1*scale,(width*widthRatio)/mirrorCount);//柱子宽度至少1个单位
-		
+			var lineWN=Math.floor(lineFloat),lineWF=lineFloat-lineWN;//提取出小数部分
-		//绘制柱子
+			var spaceFloat=(width-mirrorCount*lineFloat)/(mirrorCount+1);//均匀间隔，首尾都留空，可能为负数，柱子将发生重叠
-		var minHeight=set.minHeight*scale;
+			if(spaceFloat>0 && spaceFloat<1){
-		var mirrorSubX=spaceFloat+lineWidth/2;
+				widthRatio=1; spaceFloat=0; //不够一个像素，丢弃不绘制间隔，重新计算
-		var XFloat=mirrorEnable?width/2-mirrorSubX:0;//镜像时，中间柱子位于正中心
+			}else break;
-		for(var i=0,xFloat=XFloat,x,y,h;i<lineCount;i++){
-			xFloat+=spaceFloat;
-			x=Math.floor(xFloat);
-			h=Math.max(lastH[i],minHeight);
-			
-			//绘制上半部分
-			if(originY!=0){
-				y=originY-h;
-				ctx.fillStyle=linear1;
-				ctx.fillRect(x, y, lineWidth, h);
-			};
-			//绘制下半部分
-			if(originY!=height){
-				ctx.fillStyle=linear2;
-				ctx.fillRect(x, originY, lineWidth, h);
-			};
-			
-			xFloat+=lineWidth;
 		};
 		
-		//绘制柱子顶上峰值小横条
+		//绘制
-		if(set.stripeEnable){
+		var minHeight=set.minHeight*scale;
-			var stripeShadowBlur=set.stripeShadowBlur;
+		var XFloat=mirrorEnable?(width-lineWN)/2-spaceFloat:0;//镜像时，中间柱子位于正中心
-			ctx.shadowBlur=(stripeShadowBlur==-1?set.shadowBlur:stripeShadowBlur)*scale;
+		for(var iMirror=0;iMirror<2;iMirror++){
-			ctx.shadowColor=set.stripeShadowColor||set.shadowColor;
+			if(iMirror){ ctx.save(); ctx.scale(-1,1); }
-			var stripeHeight=set.stripeHeight*scale;
+			var xMirror=iMirror?width:0; //绘制镜像部分，不用drawImage(canvas)进行镜像绘制，提升兼容性（iOS微信小程序bug https://developers.weixin.qq.com/community/develop/doc/000aaca2148dc8a235a0fb8c66b000）
-			for(var i=0,xFloat=XFloat,x,y,h;i<lineCount;i++){
+			
+			//绘制柱子
+			ctx.shadowBlur=set.shadowBlur*scale;
+			ctx.shadowColor=set.shadowColor;
+			for(var i=0,xFloat=XFloat,wFloat=0,x,y,w,h;i<lineCount;i++){
 				xFloat+=spaceFloat;
-				x=Math.floor(xFloat);
+				x=Math.floor(xFloat)-xMirror;
-				h=stripesH[i];
+				w=lineWN; wFloat+=lineWF; if(wFloat>=1){ w++; wFloat--; } //小数凑够1像素
+				h=Math.max(lastH[i],minHeight);
 				
 				//绘制上半部分
 				if(originY!=0){
-					y=originY-h-stripeHeight;
+					y=originY-h;
-					if(y<0){y=0;};
+					ctx.fillStyle=linear1;
-					ctx.fillStyle=stripeLinear1;
+					ctx.fillRect(x, y, w, h);
-					ctx.fillRect(x, y, lineWidth, stripeHeight);
 				};
 				//绘制下半部分
 				if(originY!=height){
-					y=originY+h;
+					ctx.fillStyle=linear2;
-					if(y+stripeHeight>height){
+					ctx.fillRect(x, originY, w, h);
-						y=height-stripeHeight;
-					};
-					ctx.fillStyle=stripeLinear2;
-					ctx.fillRect(x, y, lineWidth, stripeHeight);
 				};
 				
-				xFloat+=lineWidth;
+				xFloat+=w;
+			};
+			
+			//绘制柱子顶上峰值小横条
+			if(set.stripeEnable){
+				var stripeShadowBlur=set.stripeShadowBlur;
+				ctx.shadowBlur=(stripeShadowBlur==-1?set.shadowBlur:stripeShadowBlur)*scale;
+				ctx.shadowColor=set.stripeShadowColor||set.shadowColor;
+				var stripeHeight=set.stripeHeight*scale;
+				for(var i=0,xFloat=XFloat,wFloat=0,x,y,w,h;i<lineCount;i++){
+					xFloat+=spaceFloat;
+					x=Math.floor(xFloat)-xMirror;
+					w=lineWN; wFloat+=lineWF; if(wFloat>=1){ w++; wFloat--; } //小数凑够1像素
+					h=stripesH[i];
+					
+					//绘制上半部分
+					if(originY!=0){
+						y=originY-h-stripeHeight;
+						if(y<0){y=0;};
+						ctx.fillStyle=stripeLinear1;
+						ctx.fillRect(x, y, w, stripeHeight);
+					};
+					//绘制下半部分
+					if(originY!=height){
+						y=originY+h;
+						if(y+stripeHeight>height){
+							y=height-stripeHeight;
+						};
+						ctx.fillStyle=stripeLinear2;
+						ctx.fillRect(x, y, w, stripeHeight);
+					};
+					
+					xFloat+=w;
+				};
 			};
-		};
 		
-		//镜像，从中间直接镜像即可
+			if(iMirror){ ctx.restore(); }
-		if(mirrorEnable){
+			if(!mirrorEnable) break;
-			var srcW=Math.floor(width/2);
-			ctx.save();
-			ctx.scale(-1,1);
-			ctx.drawImage(This.canvas,Math.ceil(width/2),0,srcW,height,-srcW,0,srcW,height);
-			ctx.restore();
 		};
 		
 		if(frequencyData){