FrequencyHistogramView扩展添加镜像显示功能

QuickStart.html

@@ -78,7 +78,7 @@
 			</div>
 		</div>
 		<div class="pd waveBox">
-			<div style="height:100px;width:300px;border:1px solid #ccc;box-sizing: border-box;display:inline-block" class="recwave"></div>
+			<div style="border:1px solid #ccc;display:inline-block"><div style="height:100px;width:300px;" class="recwave"></div></div>
 		</div>
 	</div>
 

app-support-sample/QuickStart.html

@@ -127,7 +127,7 @@
 			</div>
 		</div>
 		<div class="pd waveBox">
-			<div style="height:100px;width:300px;border:1px solid #ccc;box-sizing: border-box;display:inline-block" class="recwave"></div>
+			<div style="border:1px solid #ccc;display:inline-block"><div style="height:100px;width:300px;" class="recwave"></div></div>
 		</div>
 
 		<!-- 功能配置区域 -->

app-support-sample/index.html

@@ -303,20 +303,24 @@
 		</div>
 	</div>
 	<div class="pd">
-		<div style="height:100px;width:300px;border:1px solid #ccc;box-sizing: border-box;display:inline-block" class="recwave"></div>
+		<div style="border:1px solid #ccc;display:inline-block"><div style="height:100px;width:300px;" class="recwave"></div></div>
 
 		<span style="font-size:0">
 			<span class="recwaveChoice" key="WaveView">WaveView</span>
 			<span class="recwaveChoice" key="SurferView">SurferView</span>
 			<span class="recwaveChoice" key="Histogram1">Histogram1</span>
-			<span class="recwaveChoice" key="Histogram2">Histogram2</span>
+			<span class="recwaveChoice" key="Histogram2">H...2</span>
+			<span class="recwaveChoice" key="Histogram3">H...3</span>
 		</span>
 	</div>
-	<div class="webrtcBox">
+	<div class="pd">
 		<label><input type="checkbox" class="realTimeSendSet">模拟准实时编码传输（H5版语音通话聊天）</label>
 		，发送间隔<input type="text" class="realTimeSend" value="996" style="width:60px">ms
 		<div class="webrtcView" style="display:none;"></div>
 	</div>
+	<div class="">
+		<label><input type="checkbox" class="takeoffEncodeChunkSet">接管编码器输出（takeoffEncodeChunk）</label>
+	</div>
 </div>
 
 
@@ -494,6 +498,7 @@
 	var bit=+$(".bit").val();
 	var sample=+$(".sample").val();
 	window.waveStore={};
+	window.takeoffChunks=[];
 
 	var realTimeSendSet=$(".realTimeSendSet")[0].checked;
 	var realTimeSendTime=+$(".realTimeSend").val();
@@ -502,6 +507,8 @@
 		reclog("当前环境"+RecordApp.Current.Key+"不支持实时回调，不能模拟实时编码传输",1);
 	};
 
+	var takeoffEncodeChunkSet=$(".takeoffEncodeChunkSet")[0].checked;
+
 
 	var set={
 		type:type
@@ -525,6 +532,9 @@
 				realTimeSendTry(set,realTimeSendTime,buffers,sampleRate);
 			};
 		}
+		,takeoffEncodeChunk:!takeoffEncodeChunkSet?null:function(chunkBytes){
+			takeoffChunks.push(chunkBytes);
+		}
 	};
 	curSet=null;
 	reclog(RecordApp.Current.Key+"正在打开...");
@@ -543,6 +553,16 @@
 			,minHeight:1
 			,stripeEnable:false
 		});
+		waveStore.Histogram3=Recorder.FrequencyHistogramView({
+			elem:".recwave"
+			,lineCount:10
+			,position:0
+			,minHeight:1
+			,fallDuration:400
+			,stripeEnable:false
+			,mirrorEnable:true
+			,linear:[0,"#0ac",1,"#0ac"]
+		});
 
 		call();
 	},function(err){
@@ -560,9 +580,27 @@
 };
 var recblob={};
 function recstop(call){
-	recstopFn(call,true,function(){
+	var set=curSet;
+	recstopFn(call,true,function(err,blob,time){
 		setTimeout(function(){
-			window.realTimeSendTryStop&&realTimeSendTryStop(curSet);
+			window.realTimeSendTryStop&&realTimeSendTryStop(set);
+
+			if(!err && set.takeoffEncodeChunk){
+				reclog("启用takeoffEncodeChunk后Stop返回的blob长度为0不提供音频数据","#f60");
+				reclog("takeoffEncodeChunk接收到"+takeoffChunks.length+"片音频片段，正在合并成一个音频文件...");
+				var len=0;
+				for(var i=0;i<takeoffChunks.length;i++){
+					len+=takeoffChunks[i].length;
+				};
+				var chunkData=new Uint8Array(len);
+				for(var i=0,idx=0;i<takeoffChunks.length;i++){
+					var itm=takeoffChunks[i];
+					chunkData.set(itm,idx);
+					idx+=itm.length;
+				};
+				var blob=new Blob([chunkData],{type:"audio/"+set.type});
+				addRecLog(time,"合并",blob,set,Date.now());
+			};
 		});
 	});
 };
@@ -571,22 +609,16 @@
 	call||(call=function(msg){
 		msg&&reclog(msg,1);
 	});
-	var t1=Date.now();
-
-	var add=function(time,tag,blob,set){
-		var id=RandomKey(16);
-		recblob[id]={blob:blob,set:$.extend({},set),time:time};
-		reclog(tag+":"+intp(set.bitRate,3)+"kbps "+intp(set.sampleRate,5)+"hz 花"+intp(Date.now()-t1,4)+"ms编码"+intp(blob.size,6)+"b ["+set.type+"]"+formatMs(time)+'ms <button onclick="recdown(\''+id+'\')">下载</button> <button onclick="recplay(\''+id+'\')">播放</button> <span class="p'+id+'"></span> <span class="d'+id+'"></span>');
-	};
 
+	var t1=Date.now();
 	if(!isClick){
 		rec.stop(function(blob,time){
 			var tag=endCall("",blob,time);
 			if(tag==-1){
 				return;
 			};
 
-			add(time,tag||"已录制",blob,rec.set);
+			addRecLog(time,tag||"已录制",blob,rec.set,t1);
 		},function(s){
 			reclog("失败："+s);
 			endCall(s);
@@ -626,17 +658,22 @@
 					u8arr[n]=bstr.charCodeAt(n);
 				};
 				var blob2=new Blob([u8arr.buffer], {type:obj.mime});
-				add(obj.duration,"<span style='color:#0b1'>微信源片段"+(i+1)+"</span>",blob2,{type:/\/(\w+)/.exec(obj.mime)[1]});
+				addRecLog(obj.duration,"<span style='color:#0b1'>微信源片段"+(i+1)+"</span>",blob2,{type:/\/(\w+)/.exec(obj.mime)[1]},t1);
 			};
 			t1=t1x;
 		};
-		add(time,"已录制",blob,setData);
+		addRecLog(time,"已录制",blob,setData,t1);
 		call(null,{data:blob,duration:time});
 	},function(s){
 		endCall(s);
 		call("失败："+s);
 	});
 };
+var addRecLog=function(time,tag,blob,set,t1){
+	var id=RandomKey(16);
+	recblob[id]={blob:blob,set:$.extend({},set),time:time};
+	reclog(tag+":"+intp(set.bitRate,3)+"kbps "+intp(set.sampleRate,5)+"hz 花"+intp(Date.now()-t1,4)+"ms编码"+intp(blob.size,6)+"b ["+set.type+"]"+formatMs(time)+'ms <button onclick="recdown(\''+id+'\')">下载</button> <button onclick="recplay(\''+id+'\')">播放</button> <span class="p'+id+'"></span> <span class="d'+id+'"></span>');
+};
 var intp=function(s,len){
 	s=s==null?"-":s+"";
 	if(s.length>=len)return s;
@@ -691,14 +728,14 @@
 		var name="rec-"+o.time+"ms-"+o.set.bitRate+"kbps-"+o.set.sampleRate+"hz."+o.set.type;
 
 		o.down=(o.down||0)+1;
-		$(".d"+key).html('<span style="color:red">'+o.down+'</span> <span class="'+cls+'"> 没弹下载？试一下链接或复制文本<button onclick="recdown64(\''+key+'\',\''+cls+'\')">生成Base64文本</button></span>');
+		$(".d"+key).html('<span style="color:red">'+o.down+'</span> 点击 <span class="'+cls+'"> 下载，或复制文本<button onclick="recdown64(\''+key+'\',\''+cls+'\')">生成Base64文本</button></span>');
 
 		var downA=document.createElement("A");
 		downA.innerHTML="下载 "+name;
 		downA.href=(window.URL||webkitURL).createObjectURL(o.blob);
 		downA.download=name;
 		$("."+cls).prepend(downA);
-		downA.click();
+		//downA.click(); 某些软件内会跳转页面到恶心推广页
 	};
 };
 function recdown64(key, cls){
@@ -714,24 +751,36 @@
 };
 
 
+var s="https://github.com/xiangyuecn/Recorder/blob/master/src/extensions/";
+var extensionsInfo={
+	WaveView:'<b>WaveView</b> (<a href="'+s+'waveview.js">waveview.js</a> 动态波形)'
+	,SurferView:'<b>WaveSurferView</b> (<a href="'+s+'wavesurfer.view.js">wavesurfer.view.js</a> 音频可视化波形)'
+	,Histogram:'<b>FrequencyHistogramView</b> (<a href="'+s+'frequency.histogram.view.js">frequency.histogram.view.js</a> + <a href="'+s+'lib.fft.js">lib.fft.js</a> 音频可视化频率直方图)'
+	,Sonic:'<b>Sonic</b> (<a href="'+s+'sonic.js">sonic.js</a> 变速变调)'
+};
 var recwaveChoiceKey=localStorage["RecWaveChoiceKey"]||"WaveView";
 $(".recwaveChoice").bind("click",function(e){
 	var elem=$(e.target);
 	$(".recwaveChoice").removeClass("slc");
-	recwaveChoiceKey=elem.addClass("slc").attr("key");
+	var val=elem.addClass("slc").attr("key");
+	var info=extensionsInfo[val.replace(/\d+$/,"")];
+	if(recwaveChoiceKey!=val){
+		reclog("已切换波形显示为："+info);
+	};
+	recwaveChoiceKey=val;
 	localStorage["RecWaveChoiceKey"]=recwaveChoiceKey;
 });
+if(!$(".recwaveChoice[key="+recwaveChoiceKey+"]").length){
+	recwaveChoiceKey="WaveView";
+};
 $(".recwaveChoice[key="+recwaveChoiceKey+"]").click();
 
 
 reclog("点击录制开始哦");
-var s="https://github.com/xiangyuecn/Recorder/blob/master/src/extensions/";
-reclog('已启用Extensions：\
-<b>WaveView</b> (<a href="'+s+'waveview.js">waveview.js</a> 动态波形)\
-<b>WaveSurferView</b> (<a href="'+s+'wavesurfer.view.js">wavesurfer.view.js</a> 音频可视化波形)\
-、<b>FrequencyHistogramView</b> (<a href="'+s+'frequency.histogram.view.js">frequency.histogram.view.js</a> + <a href="'+s+'lib.fft.js">lib.fft.js</a> 音频可视化频率直方图)\
-');
-
+reclog('已启用Extensions：'
+	+extensionsInfo.WaveView
+	+'、'+extensionsInfo.SurferView
+	+'、'+extensionsInfo.Histogram);
 
 if(window.top!=window){
 	var isSelf=false;

assets/npm-home/hash-history.txt

@@ -1,4 +1,8 @@
 [
+	{
+		"sha1": "0e8571bd082df5986d815921360eda7f64034ae5",
+		"time": "2020-5-16 23:29:15"
+	},
 	{
 		"sha1": "7c4f45cbbffd7d739bf8ed1f52d703459575a686",
 		"time": "2020-5-16 18:43:21"
@@ -14,9 +18,5 @@
 	{
 		"sha1": "bc0e623b290a1ad201c85d77a26d8081a2da22fc",
 		"time": "2020-3-3 20:57:11"
-	},
-	{
-		"sha1": "38bce57d35ae9d560d2167494c2966a3f82ee4eb",
-		"time": "2020-1-28 13:04:26"
 	}
 ]

assets/runtime-codes/teach.realtime.encode_transfer_mp3.js

@@ -184,7 +184,7 @@ function recStart(){
 	if(rec){
 		rec.close();
 	};
-	debugger
+
 	rec=Recorder({
 		type:"mp3"
 		,sampleRate:testSampleRate

assets/runtime-codes/test.extensions.visualization.js

@@ -29,6 +29,27 @@ var waveConfigs={
 			,minHeight:1
 			,stripeEnable:false
 			,linear:[0,"#06c",1,"#06c"]}
+		,{testTitle:"粗大"
+			,lineCount:15
+			,spaceWidth:1.5
+			,stripeEnable:false
+			,linear:[0,"#ab00ff",1,"#ab00ff"]}
+
+		,{testTitle:"镜像"
+			,lineCount:15
+			,position:0
+			,minHeight:1
+			,fallDuration:400
+			,stripeEnable:false
+			,mirrorEnable:true}
+		,{testTitle:"稀疏镜像"
+			,lineCount:8
+			,position:0
+			,minHeight:1
+			,fallDuration:400
+			,stripeEnable:false
+			,mirrorEnable:true
+			,linear:[0,"#0ac",1,"#0ac"]}
 		,{testTitle:"顶部显示+粗大"
 			,lineCount:15
 			,position:1
@@ -72,7 +93,7 @@ var visualizationCreate=function(){
 			var cls="view"+k+i;
 			box.append('<div style="display:inline-block;margin:0 6px 6px 0;vertical-align:top">\
 	<div style="font-size:12px;width:'+waveStore.width+'px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">'+config.testTitle+'</div>\
-	<div style="height:'+waveStore.height+'px;width:'+waveStore.width+'px;border:1px solid #ccc;box-sizing:border-box;" class="'+cls+'"></div>\
+	<div style="border:1px solid #ccc;"><div style="height:'+waveStore.height+'px;width:'+waveStore.width+'px;" class="'+cls+'"></div></div>\
 </div>');
 
 			//实例化可视化对象

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

@@ -122,7 +122,7 @@
 
 	<div class="mainBox mainCtrl" style="display:none">
 		<div style="padding-bottom:12px">
-			<div style="height:100px;width:300px;border:1px solid #ccc;box-sizing: border-box;display:inline-block;vertical-align:bottom" class="ctrlProcessWave"></div>
+			<div style="border:1px solid #ccc;display:inline-block;vertical-align:bottom"><div style="height:100px;width:300px;" class="ctrlProcessWave"></div></div>
 			<div style="width:300px;display:inline-block;vertical-align:bottom">
 				<div style="height:40px;width:300px;display:inline-block;background:#999;position:relative;margin-bottom:12px">
 					<div class="ctrlProcessX" style="height:40px;background:#0B1;position:absolute;"></div>
@@ -133,7 +133,8 @@
 					<span class="recwaveChoice" key="WaveView">WaveView</span>
 					<span class="recwaveChoice" key="SurferView">SurferView</span>
 					<span class="recwaveChoice" key="Histogram1">Histogram1</span>
-					<span class="recwaveChoice" key="Histogram2">Histogram2</span>
+					<span class="recwaveChoice" key="Histogram2">H...2</span>
+					<span class="recwaveChoice" key="Histogram3">H...3</span>
 				</span>
 			</div>
 		</div>
@@ -259,6 +260,16 @@
 				,minHeight:1
 				,stripeEnable:false
 			});
+			waveStore.Histogram3=Recorder.FrequencyHistogramView({
+				elem:".ctrlProcessWave"
+				,lineCount:10
+				,position:0
+				,minHeight:1
+				,fallDuration:400
+				,stripeEnable:false
+				,mirrorEnable:true
+				,linear:[0,"#0ac",1,"#0ac"]
+			});
 		};
 
 		$(".ctrlProcessX").css("width",powerLevel+"%");
@@ -341,9 +352,14 @@
 $(".recwaveChoice").bind("click",function(e){
 	var elem=$(e.target);
 	$(".recwaveChoice").removeClass("slc");
-	recwaveChoiceKey=elem.addClass("slc").attr("key");
+	var val=elem.addClass("slc").attr("key");
+
+	recwaveChoiceKey=val;
 	localStorage["RecWaveChoiceKey"]=recwaveChoiceKey;
 });
+if(!$(".recwaveChoice[key="+recwaveChoiceKey+"]").length){
+	recwaveChoiceKey="WaveView";
+};
 $(".recwaveChoice[key="+recwaveChoiceKey+"]").click();
 
 
@@ -441,14 +457,14 @@
 		var name="rec-"+o.duration+"ms-"+(o.set.bitRate||"-")+"kbps-"+(o.set.sampleRate||"-")+"hz."+(o.set.type||(/\w+$/.exec(o.blob.type)||[])[0]||"unknown");
 
 		o.down=(o.down||0)+1;
-		$(".LogAudio_"+id).html('<span style="color:red">'+o.down+'</span> <span class="'+cls+'"> 没弹下载？试一下链接或复制文本<button onclick="Runtime.LogAudioDown64(\''+id+'\',\''+cls+'\')">生成Base64文本</button></span>');
+		$(".LogAudio_"+id).html('<span style="color:red">'+o.down+'</span> 点击 <span class="'+cls+'"> 下载，或复制文本<button onclick="Runtime.LogAudioDown64(\''+id+'\',\''+cls+'\')">生成Base64文本</button></span>');
 
 		var downA=document.createElement("A");
 		downA.innerHTML="下载 "+name;
 		downA.href=(window.URL||webkitURL).createObjectURL(o.blob);
 		downA.download=name;
 		$("."+cls).prepend(downA);
-		downA.click();
+		//downA.click(); 某些软件内会跳转页面到恶心推广页
 	};
 };
 Runtime.LogAudioDown64=function(key, cls){