优化FrequencyHistogramView扩展增强0-10khz语音部分的显示

README.md

@@ -612,7 +612,7 @@ set={
 
 
 ## `FrequencyHistogramView`扩展
-[frequency.histogram.view.js](https://github.com/xiangyuecn/Recorder/blob/master/src/extensions/frequency.histogram.view.js) + [lib.fft.js](https://github.com/xiangyuecn/Recorder/blob/master/src/extensions/lib.fft.js)，12kb大小源码，音频可视化频率直方图显示，具体样子参考演示地址页面。此扩展核心算法参考Java开源库[jmp123](https://sourceforge.net/projects/jmp123/files/)的代码编写的，`jmp123`版本`0.3`。
+[frequency.histogram.view.js](https://github.com/xiangyuecn/Recorder/blob/master/src/extensions/frequency.histogram.view.js) + [lib.fft.js](https://github.com/xiangyuecn/Recorder/blob/master/src/extensions/lib.fft.js)，12kb大小源码，音频可视化频率直方图显示，具体样子参考演示地址页面。此扩展核心算法参考Java开源库[jmp123](https://sourceforge.net/projects/jmp123/files/)的代码编写的，`jmp123`版本`0.3`；直方图特意优化主要显示0-10khz语音部分，其他高频显示区域较小，不适合用来展示音乐频谱。
 
 此扩展的使用方式和`WaveView`扩展完全相同，请参考上面的`WaveView`来使用；请注意：必须同时引入`lib.fft.js`才能正常工作。
 
@@ -622,41 +622,41 @@ set={
 构造函数，`set`参数为配置对象，默认配置值如下：
 ``` javascript
 set={
-	elem:"css selector" //自动显示到dom，并以此dom大小为显示大小
-		//或者配置显示大小，手动把frequencyObj.elem显示到别的地方
-	,width:0 //显示宽度
-	,height:0 //显示高度
-	
-	//以上配置二选一
-	
-	scale:2 //缩放系数，应为正整数，使用2(3? no!)倍宽高进行绘制，避免移动端绘制模糊
-	
-	,fps:20 //绘制帧率，不可过高
-	
-	,lineCount:15 //直方图柱子数量
-	,lineWidth:10 //柱子线条基础粗细
-	,minHeight:0 //柱子保留基础高度，position不为±1时应该保留点高度
-	,position:-1 //绘制位置，取值-1到1，-1为最底下，0为中间，1为最顶上，小数为百分比
-	
-	,stripeEnable:true //是否启用柱子顶上的峰值小横条，position不是-1时应当关闭，否则会很丑
-	,stripeHeight:5 //峰值小横条基础高度
-	,stripeMargin:8 //峰值小横条和柱子保持的基础距离
-	
-	,fallDuration:600 //柱子从最顶上下降到最底部最长时间ms
-	,stripeFallDuration:1200 //峰值小横条从最顶上下降到底部最长时间ms
-	
-	//柱子颜色配置：[位置，css颜色，...] 位置: 取值0.0-1.0之间
-	,linear:[0,"rgba(0,187,17,1)",0.5,"rgba(255,215,0,1)",1,"rgba(255,102,0,1)"]
-	//峰值小横条css颜色 #abc，留空为柱子的渐变颜色
-	,stripeColor:""
-	
-	,shadowBlur:0 //柱子阴影基础大小，设为0不显示阴影
-	,shadowColor:"#bbb" //柱子阴影颜色
-	,stripeShadowBlur:-1 //峰值小横条阴影基础大小，设为0不显示阴影，-1为柱子的大小
-	,stripeShadowColor:"" //峰值小横条阴影颜色，留空为柱子的阴影颜色
-	
-	//当发生绘制时会回调此方法，参数为当前绘制的频率数据和采样率，可实现多个直方图同时绘制，只消耗一个input输入和计算时间
-	,onDraw:function(frequencyData,sampleRate){}
+    elem:"css selector" //自动显示到dom，并以此dom大小为显示大小
+        //或者配置显示大小，手动把frequencyObj.elem显示到别的地方
+    ,width:0 //显示宽度
+    ,height:0 //显示高度
+    
+    //以上配置二选一
+    
+    scale:2 //缩放系数，应为正整数，使用2(3? no!)倍宽高进行绘制，避免移动端绘制模糊
+    
+    ,fps:20 //绘制帧率，不可过高
+    
+    ,lineCount:30 //直方图柱子数量，数量的多少对性能影响不大，密集运算集中在FFT算法中
+    ,lineWidth:6 //柱子线条基础粗细，当视图可以容下lineCount这么多时才会生效，否则自适应
+    ,minHeight:0 //柱子保留基础高度，position不为±1时应该保留点高度
+    ,position:-1 //绘制位置，取值-1到1，-1为最底下，0为中间，1为最顶上，小数为百分比
+    
+    ,stripeEnable:true //是否启用柱子顶上的峰值小横条，position不是-1时应当关闭，否则会很丑
+    ,stripeHeight:3 //峰值小横条基础高度
+    ,stripeMargin:6 //峰值小横条和柱子保持的基础距离
+    
+    ,fallDuration:1000 //柱子从最顶上下降到最底部最长时间ms
+    ,stripeFallDuration:3500 //峰值小横条从最顶上下降到底部最长时间ms
+    
+    //柱子颜色配置：[位置，css颜色，...] 位置: 取值0.0-1.0之间
+    ,linear:[0,"rgba(0,187,17,1)",0.5,"rgba(255,215,0,1)",1,"rgba(255,102,0,1)"]
+    //峰值小横条渐变颜色配置，取值格式和linear一致，留空为柱子的渐变颜色
+    ,stripeLinear:null
+    
+    ,shadowBlur:0 //柱子阴影基础大小，设为0不显示阴影
+    ,shadowColor:"#bbb" //柱子阴影颜色
+    ,stripeShadowBlur:-1 //峰值小横条阴影基础大小，设为0不显示阴影，-1为柱子的大小
+    ,stripeShadowColor:"" //峰值小横条阴影颜色，留空为柱子的阴影颜色
+    
+    //当发生绘制时会回调此方法，参数为当前绘制的频率数据和采样率，可实现多个直方图同时绘制，只消耗一个input输入和计算时间
+    ,onDraw:function(frequencyData,sampleRate){}
 }
 ```
 

app-support-sample/index.html

@@ -444,7 +444,7 @@
 	var type=$("[name=type]:checked").val();
 	var bit=+$(".bit").val();
 	var sample=+$(".sample").val();
-	var waveStore={};
+	window.waveStore={};
 
 	var realTimeSendSet=$(".realTimeSendSet")[0].checked;
 	var realTimeSendTime=+$(".realTimeSend").val();
@@ -487,6 +487,7 @@
 		waveStore.Histogram1=Recorder.FrequencyHistogramView({elem:".recwave"});
 		waveStore.Histogram2=Recorder.FrequencyHistogramView({
 			elem:".recwave"
+			,lineCount:90
 			,position:0
 			,minHeight:1
 			,shadowBlur:6

assets/npm-home/hash-history.txt

@@ -1,4 +1,8 @@
 [
+	{
+		"sha1": "bad5a11c405b2766887f5a68bab7c0ce6ea14013",
+		"time": "2020-1-14 17:40:50"
+	},
 	{
 		"sha1": "e3d0df0e66aa924cf04a56dafc858c40c6054bf6",
 		"time": "2020-1-14 03:12:04"
@@ -14,9 +18,5 @@
 	{
 		"sha1": "226d35b7411af5c504cea70625413f764eff07d5",
 		"time": "2020-1-10 13:44:43"
-	},
-	{
-		"sha1": "9fe5d3c5b5adf62059a80e29213badfa4338a806",
-		"time": "2020-1-9 02:41:51"
 	}
 ]

assets/工具-代码运行和静态分发Runtime.html

@@ -179,7 +179,6 @@
 var WaveViewBak=Recorder.WaveView;
 var LibFFTBak=Recorder.LibFFT;
 var FrequencyHistogramViewBak=Recorder.FrequencyHistogramView;
-var WaveStore;
 var LogAudios=[0];
 
 window.NOOP=function(){};
@@ -243,13 +242,14 @@
 		Recorder.WaveView=WaveViewBak;
 		Recorder.LibFFT=LibFFTBak;
 		Recorder.FrequencyHistogramView=FrequencyHistogramViewBak;
-		var waveStore=WaveStore;
+		var waveStore=Runtime.WaveStore;
 		if(!waveStore){
-			waveStore=WaveStore={};
+			waveStore=Runtime.WaveStore={};
 			waveStore.WaveView=Recorder.WaveView({elem:".ctrlProcessWave"});
 			waveStore.Histogram1=Recorder.FrequencyHistogramView({elem:".ctrlProcessWave"});
 			waveStore.Histogram2=Recorder.FrequencyHistogramView({
 				elem:".ctrlProcessWave"
+				,lineCount:90
 				,position:0
 				,minHeight:1
 				,shadowBlur:6

index.html

@@ -372,7 +372,7 @@
 	var bit=+$(".bit").val();
 	var sample=+$(".sample").val();
 
-	var waveStore={};
+	window.waveStore={};
 	window.sonicAsync=null;
 
 	var disableEnvInFixSet=$(".disableEnvInFixSet")[0].checked;
@@ -424,6 +424,7 @@
 		waveStore.Histogram1=Recorder.FrequencyHistogramView({elem:".recwave"});
 		waveStore.Histogram2=Recorder.FrequencyHistogramView({
 			elem:".recwave"
+			,lineCount:90
 			,position:0
 			,minHeight:1
 			,shadowBlur:6