From 10930af7d94e744aa412a3ebef04cff01c418f1a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=AB=98=E5=9D=9A=E6=9E=9C?= <753610399@qq.com> Date: Sat, 16 May 2020 23:33:10 +0800 Subject: [PATCH] =?UTF-8?q?FrequencyHistogramView=E6=89=A9=E5=B1=95?= =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E9=95=9C=E5=83=8F=E6=98=BE=E7=A4=BA=E5=8A=9F?= =?UTF-8?q?=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- QuickStart.html | 2 +- app-support-sample/QuickStart.html | 2 +- app-support-sample/index.html | 99 ++++++++++++++----- assets/npm-home/hash-history.txt | 8 +- .../teach.realtime.encode_transfer_mp3.js | 2 +- .../test.extensions.visualization.js | 23 ++++- ...0\201\345\210\206\345\217\221Runtime.html" | 26 ++++- dist/extensions/frequency.histogram.view.js | 2 +- index.html | 95 ++++++++++++++---- src/extensions/frequency.histogram.view.js | 28 +++++- 10 files changed, 223 insertions(+), 64 deletions(-) diff --git a/QuickStart.html b/QuickStart.html index ffc407d..a480699 100644 --- a/QuickStart.html +++ b/QuickStart.html @@ -78,7 +78,7 @@
-
+
diff --git a/app-support-sample/QuickStart.html b/app-support-sample/QuickStart.html index 195d763..58c1168 100644 --- a/app-support-sample/QuickStart.html +++ b/app-support-sample/QuickStart.html @@ -127,7 +127,7 @@
-
+
diff --git a/app-support-sample/index.html b/app-support-sample/index.html index 0204c53..4ee6a70 100644 --- a/app-support-sample/index.html +++ b/app-support-sample/index.html @@ -303,20 +303,24 @@
-
+
WaveView SurferView Histogram1 - Histogram2 + H...2 + H...3
-
+
，发送间隔ms
+
+ +
@@ -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下载 '); - }; + var t1=Date.now(); if(!isClick){ rec.stop(function(blob,time){ var tag=endCall("",blob,time); @@ -586,7 +618,7 @@ 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,"微信源片段"+(i+1)+"",blob2,{type:/\/(\w+)/.exec(obj.mime)[1]}); + addRecLog(obj.duration,"微信源片段"+(i+1)+"",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 '); +}; 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(''+o.down+' 没弹下载？试一下链接或复制文本'); + $(".d"+key).html(''+o.down+' 点击 下载，或复制文本'); 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:'WaveView (waveview.js 动态波形)' + ,SurferView:'WaveSurferView (wavesurfer.view.js 音频可视化波形)' + ,Histogram:'FrequencyHistogramView (frequency.histogram.view.js + lib.fft.js 音频可视化频率直方图)' + ,Sonic:'Sonic (sonic.js 变速变调)' +}; 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：\ -WaveView (waveview.js 动态波形)\ -WaveSurferView (wavesurfer.view.js 音频可视化波形)\ -、FrequencyHistogramView (frequency.histogram.view.js + lib.fft.js 音频可视化频率直方图)\ -'); - +reclog('已启用Extensions：' + +extensionsInfo.WaveView + +'、'+extensionsInfo.SurferView + +'、'+extensionsInfo.Histogram); if(window.top!=window){ var isSelf=false; diff --git a/assets/npm-home/hash-history.txt b/assets/npm-home/hash-history.txt index 0beb5bb..70f7050 100644 --- a/assets/npm-home/hash-history.txt +++ b/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" } ] \ No newline at end of file diff --git a/assets/runtime-codes/teach.realtime.encode_transfer_mp3.js b/assets/runtime-codes/teach.realtime.encode_transfer_mp3.js index 10915b2..578514d 100644 --- a/assets/runtime-codes/teach.realtime.encode_transfer_mp3.js +++ b/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 diff --git a/assets/runtime-codes/test.extensions.visualization.js b/assets/runtime-codes/test.extensions.visualization.js index a752efc..b17d724 100644 --- a/assets/runtime-codes/test.extensions.visualization.js +++ b/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('
\
'+config.testTitle+'
\ -
\ +
\
'); //实例化可视化对象 diff --git "a/assets/\345\267\245\345\205\267-\344\273\243\347\240\201\350\277\220\350\241\214\345\222\214\351\235\231\346\200\201\345\210\206\345\217\221Runtime.html" "b/assets/\345\267\245\345\205\267-\344\273\243\347\240\201\350\277\220\350\241\214\345\222\214\351\235\231\346\200\201\345\210\206\345\217\221Runtime.html" index 9e4458f..755005d 100644 --- "a/assets/\345\267\245\345\205\267-\344\273\243\347\240\201\350\277\220\350\241\214\345\222\214\351\235\231\346\200\201\345\210\206\345\217\221Runtime.html" +++ "b/assets/\345\267\245\345\205\267-\344\273\243\347\240\201\350\277\220\350\241\214\345\222\214\351\235\231\346\200\201\345\210\206\345\217\221Runtime.html" @@ -122,7 +122,7 @@
-
+
WaveView SurferView Histogram1 - Histogram2 + H...2 + H...3
-
+
，发送间隔ms
+
+ +
@@ -359,12 +363,12 @@ diff --git a/src/extensions/frequency.histogram.view.js b/src/extensions/frequency.histogram.view.js index ecd427c..8abf8e3 100644 --- a/src/extensions/frequency.histogram.view.js +++ b/src/extensions/frequency.histogram.view.js @@ -35,6 +35,7 @@ var fn=function(set){ ,spaceWidth:0 //柱子间空白固定基础宽度，柱子宽度自适应，当不为0时widthRatio无效，当视图不足容下所有柱子时将不会留空白，允许为负数，让柱子发生重叠 ,minHeight:0 //柱子保留基础高度，position不为±1时应该保留点高度 ,position:-1 //绘制位置，取值-1到1，-1为最底下，0为中间，1为最顶上，小数为百分比 + ,mirrorEnable:false //是否启用镜像，如果启用，视图宽度会分成左右两块，右边这块进行绘制，左边这块进行镜像（以中间这根柱子的中心进行镜像） ,stripeEnable:true //是否启用柱子顶上的峰值小横条，position不是-1时应当关闭，否则会很丑 ,stripeHeight:3 //峰值小横条基础高度 @@ -248,18 +249,26 @@ fn.prototype=FrequencyHistogramView.prototype={ var linear2=This.genLinear(ctx,set.linear,originY,originY+heightY);//下半部分的填充 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根 + var widthRatio=set.widthRatio; var spaceWidth=set.spaceWidth*scale; if(spaceWidth!=0){ - widthRatio=(width-spaceWidth*(lineCount+1))/width; + widthRatio=(width-spaceWidth*(mirrorCount+1))/width; }; - var lineWidth=Math.max(1*scale,Math.floor((width*widthRatio)/lineCount));//柱子宽度至少1个单位 - var spaceFloat=(width-lineCount*lineWidth)/(lineCount+1);//均匀间隔，首尾都留空，可能为负数，柱子将发生重叠 + + var lineWidth=Math.max(1*scale,Math.floor((width*widthRatio)/mirrorCount));//柱子宽度至少1个单位 + var spaceFloat=(width-mirrorCount*lineWidth)/(mirrorCount+1);//均匀间隔，首尾都留空，可能为负数，柱子将发生重叠 + + //绘制柱子 var minHeight=set.minHeight*scale; - for(var i=0,xFloat=0,x,y,h;i