修复部分压缩混淆工具生成带$的变量名导致replace失效Worker报错（仅1.3.x存在此bug）；重写FrequencyHistog…

…ramView可视化插件代码（功能增强、移除iOS小程序下存在bug的canvas api调用）
xiangyuecn · Dec 17, 2023 · 09e5fb6 · 09e5fb6
1 parent e2702d4
commit 09e5fb6
Show file tree

Hide file tree

Showing 23 changed files with 161 additions and 103 deletions.
diff --git a/README.md b/README.md
@@ -848,6 +848,8 @@ set={
 
 此插件的使用方式和`WaveView`插件完全相同，请参考上面的`WaveView`来使用；本插件的波形绘制直接简单的使用PCM的采样数值大小来进行线条的绘制，同一段音频绘制出的波形和Audition内显示的波形外观上几乎没有差异。
 
+已知问题：iOS上微信小程序基础库存在bug，canvas.drawImage(canvas)可能无法绘制，可能会导致本可视化插件在iOS小程序上不能正确显示，其他环境下无此兼容性问题。
+
 ### 【构造】surfer=Recorder.WaveSurferView(set)
 构造函数，`set`参数为配置对象，默认配置值如下：
 ``` javascript
@@ -891,7 +893,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`；直方图特意优化主要显示0-5khz语音部分（线性），其他高频显示区域较小，不适合用来展示音乐频谱，可自行修改源码恢复成完整的线性频谱，或修改成倍频程频谱（伯德图、对数频谱）；本可视化插件可以移植到其他语言环境，如需定制可联系作者。
+[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-5khz语音部分（线性），其他高频显示区域较小，不适合用来展示音乐频谱，可通过配置fullFreq来恢复成完整的线性频谱，或自行修改源码修改成倍频程频谱（伯德图、对数频谱）；本可视化插件可以移植到其他语言环境，如需定制可联系作者。
 
 此插件的使用方式和`WaveView`插件完全相同，请参考上面的`WaveView`来使用；请注意：必须同时引入`lib.fft.js`才能正常工作。
 
@@ -939,6 +941,7 @@ set={
     ,stripeShadowBlur:-1 //峰值小横条阴影基础大小，设为0不显示阴影，-1为柱子的大小，如果柱子数量太多时请勿开启，非常影响性能
     ,stripeShadowColor:"" //峰值小横条阴影颜色，留空为柱子的阴影颜色
 
+    ,fullFreq:false //是否要绘制所有频率；默认false主要绘制5khz以下的频率，高频部分占比很少，此时不同的采样率对频谱显示几乎没有影响；设为true后不同采样率下显示的频谱是不一样的，因为 最大频率=采样率/2 会有差异
     //当发生绘制时会回调此方法，参数为当前绘制的频率数据和采样率，可实现多个直方图同时绘制，只消耗一个input输入和计算时间
     ,onDraw:function(frequencyData,sampleRate){}
 }

diff --git a/app-support-sample/demo_UniApp/pages/recTest/main_recTest.vue b/app-support-sample/demo_UniApp/pages/recTest/main_recTest.vue
@@ -501,6 +501,7 @@ export default {
 				store.SurferView=Recorder.WaveSurferView({compatibleCanvas:canvas1,compatibleCanvas_2x:canvas2, width:300, height:100});
 			`,(canvas1,canvas2)=>{
 				store.SurferView=Recorder.WaveSurferView({compatibleCanvas:canvas1,compatibleCanvas_2x:canvas2, width:300, height:100});
+				//注意：iOS上微信小程序基础库存在bug，canvas.drawImage(canvas)可能无法绘制，可能会导致WaveSurferView在iOS小程序上不能正确显示，其他环境下无此兼容性问题
 			});
 
 			RecordApp.UniFindCanvas(this,[".recwave-Histogram1"],`${webStore}
@@ -510,10 +511,12 @@ export default {
 			});
 			RecordApp.UniFindCanvas(this,[".recwave-Histogram2"],`${webStore}
 				store.Histogram2=Recorder.FrequencyHistogramView({compatibleCanvas:canvas1, width:300, height:100
-					 ,lineCount:90,position:0,minHeight:1,stripeEnable:false});
+					,lineCount:200,widthRatio:1,position:0,minHeight:1
+					,fallDuration:600,stripeEnable:false,mirrorEnable:true});
 			`,(canvas1)=>{
 				store.Histogram2=Recorder.FrequencyHistogramView({compatibleCanvas:canvas1, width:300, height:100
-					 ,lineCount:90,position:0,minHeight:1,stripeEnable:false});
+					,lineCount:200,widthRatio:1,position:0,minHeight:1
+					,fallDuration:600,stripeEnable:false,mirrorEnable:true});
 			});
 			RecordApp.UniFindCanvas(this,[".recwave-Histogram3"],`${webStore}
 				store.Histogram3=Recorder.FrequencyHistogramView({compatibleCanvas:canvas1, width:300, height:100
@@ -529,7 +532,12 @@ export default {
 			var key=e.target.dataset.key;
 			if(key){
 				if(key!=this.recwaveChoiceKey){
-					this.reclog("已切换波形显示为："+key);
+					this.reclog("已切换波形显示为："+key);
+					if(key=="SurferView"){
+						// #ifdef MP-WEIXIN
+						this.reclog("注意：iOS上微信小程序基础库存在bug，canvas.drawImage(canvas)可能无法绘制，可能会导致WaveSurferView在iOS小程序上不能正确显示，其它可视化插件无此兼容性问题","#fa0");
+						// #endif
+					}
 				}
 				this.recwaveChoiceKey=key;
 				//App中传送给renderjs里面，同样赋值

diff --git a/app-support-sample/index.html b/app-support-sample/index.html
@@ -8,7 +8,7 @@
 <title reclang="PZM5">RecordApp测试</title>
 
 <script>
-var PageLM="2023-12-01 20:16";
+var PageLM="2023-12-17 18:20";
 (function(){
 console.log("【温馨提示】本页面用于测试RecordApp的主要功能，代码难看臃肿，不建议阅读本页面源码；如果想要快速入门，请参考app-support-sample/QuickStart.html页面。    "
 +"[Reminder] This page is used to test the main functions of RecordApp. The code is ugly and bloated. It is not recommended to read the source code of this page; if you want to get started quickly, please refer to the app-support-sample/QuickStart.html page.");
@@ -913,10 +913,12 @@
 	store.Histogram1=Recorder.FrequencyHistogramView({elem:elem});
 	store.Histogram2=Recorder.FrequencyHistogramView({
 		elem:elem
-		,lineCount:90
+		,lineCount:200,widthRatio:1
 		,position:0
 		,minHeight:1
+		,fallDuration:600
 		,stripeEnable:false
+		,mirrorEnable:true
 	});
 	store.Histogram3=Recorder.FrequencyHistogramView({
 		elem:elem

diff --git a/app-support-sample/miniProgram-wx/README.md b/app-support-sample/miniProgram-wx/README.md
@@ -44,6 +44,7 @@
 
 微信开发者工具对npm支持太差，“构建 npm”功能没什么卵用，npm包内没被main文件引用的js会被全部丢弃，导致文件缺失；似乎也不允许手动`require`含`node_modules`的路径；因此请直接copy根目录内的src文件夹到本小程序源码的`copy-rec-src`文件夹内，直接当做小程序源码调用，好使；或者按需copy仅你require引用到了的js文件到小程序项目中，免得小程序源码过大（一般编译时会忽略掉未引用到的js文件）。
 
+> 已知问题：iOS上微信小程序基础库存在bug，canvas.drawImage(canvas)可能无法绘制，可能会导致可视化插件WaveSurferView在iOS小程序上不能正确显示，其他可视化插件、Android、开发工具均无此兼容性问题；相关链接：[issues#202](https://github.com/xiangyuecn/Recorder/issues/202)，[社区内2023-11-16说在修](https://developers.weixin.qq.com/community/develop/doc/000aaca2148dc8a235a0fb8c66b000)。
 
 
 [](?)

diff --git a/app-support-sample/miniProgram-wx/pages/recTest/recTest.js b/app-support-sample/miniProgram-wx/pages/recTest/recTest.js
@@ -203,6 +203,7 @@ Page({
 		});
 		getCanvas(".recwave-SurferView",(canvas)=>{
 			getCanvas(".recwave-SurferView-2x",(canvas_2x)=>{
+				//注意：iOS上微信小程序基础库存在bug，canvas.drawImage(canvas)可能无法绘制，可能会导致WaveSurferView在iOS小程序上不能正确显示，其他环境下无此兼容性问题
 				store.SurferView=Recorder.WaveSurferView({compatibleCanvas:canvas,compatibleCanvas_2x:canvas_2x, width:300, height:100});
 			});
 		});
@@ -211,10 +212,12 @@ Page({
 		});
 		getCanvas(".recwave-Histogram2",(canvas)=>{
 			store.Histogram2=Recorder.FrequencyHistogramView({compatibleCanvas:canvas, width:300, height:100
-				,lineCount:90
+				,lineCount:200,widthRatio:1
 				,position:0
 				,minHeight:1
+				,fallDuration:600
 				,stripeEnable:false
+				,mirrorEnable:true
 			});
 		});
 		getCanvas(".recwave-Histogram3",(canvas)=>{
@@ -234,6 +237,9 @@ Page({
 		if(key){
 			if(key!=this.data.recwaveChoiceKey){
 				this.reclog("已切换波形显示为："+key);
+				if(key=="SurferView"){
+					this.reclog("注意：iOS上微信小程序基础库存在bug，canvas.drawImage(canvas)可能无法绘制，可能会导致WaveSurferView在iOS小程序上不能正确显示，其它可视化插件无此兼容性问题","#fa0");
+				}
 			}
 			this.setData({ recwaveChoiceKey:key });
 		}

diff --git a/assets/npm-home/hash-history.txt b/assets/npm-home/hash-history.txt
@@ -1,4 +1,8 @@
 [
+	{
+		"sha1": "7afdb2aa559360be175b3587c80281cf422196ac",
+		"time": "2023/12/17 18:28:33"
+	},
 	{
 		"sha1": "d0f5a1efcb08191eaf061dc7f71cd00e0e94ac83",
 		"time": "2023/12/8 21:49:49"
@@ -14,9 +18,5 @@
 	{
 		"sha1": "9901f4660f25031c99f73bc33d97238df9b3febb",
 		"time": "2023/6/29 21:25:33"
-	},
-	{
-		"sha1": "6585fc5475148ebcf7cbb38be77191acb9bcac0e",
-		"time": "2023/6/17 21:06:29"
 	}
 ]
diff --git a/assets/runtime-codes/teach.source_stream.capture_stream.js b/assets/runtime-codes/teach.source_stream.capture_stream.js
@@ -58,22 +58,24 @@ var audioStart=function(){
 	sourceStart("audio",RootFolder+"/assets/audio/music-阿刁-张韶涵.mp3");
 };
 var videoStart=function(){
-	sourceStart("video",RootFolder+"/assets/audio/movie-一代宗师-此一时彼一时.mp4.webm");
+	sourceStart("video",RootFolder+"/assets/audio/movie-一代宗师-此一时彼一时.mp4.webm","video/mp4");
 };
 var fileStart=function(type,file){
 	if(!file.files.length){
 		return;
 	}
 	sourceStart(type,URL.createObjectURL(file.files[0]));
 };
-var sourceStart=function(type,src){
+var sourceStart=function(type,src,mime){
 	$(".sourceBox").html('\
 <div>\
 	切换播放本地'+type+'文件：<input type="file" accept="'+type+'/*"\
 		onchange="fileStart(\''+type+'\',this)">\
 </div>\
 <div style="padding-top:10px">\
-	<'+type+' class="sourcePlayer" controls autoplay src="'+src+'" style="width:80%"/>\
+	<'+type+' class="sourcePlayer" controls autoplay webkit-playsinline playsinline x5-video-player-type="h5" style="width:80%">\
+		<source src="'+src+'" '+(mime?'type="'+mime+'"':'')+'/>\
+	</'+type+'>\
 </div>\
 	');
 	var elem=$(".sourcePlayer");

diff --git a/assets/runtime-codes/test.extensions.visualization.js b/assets/runtime-codes/test.extensions.visualization.js
@@ -43,11 +43,11 @@ var waveConfigs={
 			,fallDuration:400
 			,stripeEnable:false
 			,mirrorEnable:true}
-		,{testTitle:"稀疏镜像"
-			,lineCount:8
+		,{testTitle:"镜像+密集"
+			,lineCount:90,widthRatio:1
 			,position:0
 			,minHeight:1
-			,fallDuration:400
+			,fallDuration:600
 			,stripeEnable:false
 			,mirrorEnable:true
 			,linear:[0,"#0ac",1,"#0ac"]}
@@ -57,6 +57,18 @@ var waveConfigs={
 			,spaceWidth:1.5
 			,stripeEnable:false
 			,linear:[0,"#ab00ff",1,"#ab00ff"]}
+
+		,{testTitle:"显示出所有频率"
+			,fullFreq:true}
+		,{testTitle:"镜像+密集2"
+			,lineCount:90,widthRatio:1
+			,minHeight:1
+			,mirrorEnable:true
+			,linear:[0,"#0A5",1,"#A50"]}
+		,{testTitle:"镜像+粗大"
+			,lineCount:8
+			,spaceWidth:1.5
+			,mirrorEnable:true}
 	]
 };
 var waveStore={};

diff --git a/assets/工具-GitHub页面历史版本访问.html b/assets/工具-GitHub页面历史版本访问.html
@@ -124,6 +124,12 @@
 XMLHttpRequest.prototype.setRequestHeader=function(k,v){
 	console.warn("xhr阻止添加请求头:"+k+"="+v);//沙雕jQuery会添加X-Requested-With
 };
+var oldWrite=document.write;
+document.write=function(){
+	var a=[],v=arguments;
+	for(var i=0;i<v.length;i++)a[i]=replaceHtmlAllSrc("document.write",v[i]);
+	return oldWrite.apply(this,a);
+};
 function replaceSrc(tag,src){
 	if(!urlInfo._dir){
 		urlInfo._dir=urlInfo.path.replace(/\/[^\/]+$/g,"/");
@@ -156,15 +162,15 @@
 	console.log((val==src?"未":"")+"替换"+tag,src+(val==src?"":" -> "+val));
 	return val;
 };
-function replaceHtmlAllSrc(html){
-	html=replaceHtml_node(html,"link","href");
-	html=replaceHtml_node(html,"script","src");
+function replaceHtmlAllSrc(from,html){
+	html=replaceHtml_node(from,html,"link","href");
+	html=replaceHtml_node(from,html,"script","src");
 	return html;
 };
-function replaceHtml_node(html,tag,key){
+function replaceHtml_node(from,html,tag,key){
 	var exp=new RegExp("(<"+tag+"[^>]+"+key+"\\s*=\\s*[\"'])([^>]+?)([\"'][^>]*>)","ig");
 	html=html.replace(exp,function(a,b,c,d){
-		return b+replaceSrc("html."+tag,c)+d;
+		return b+replaceSrc(from+"@"+tag,c)+d;
 	});
 	return html;
 };
@@ -249,7 +255,7 @@
 		reclog("拉取成功【"+title.replace(/<|'|"/g,"")+"】，已开始执行原始页面内容↓↓↓↓↓↓",2);
 
 		html=html.replace(/<!DOCTYPE.*?>/ig,"");
-		html=replaceHtmlAllSrc(html);
+		html=replaceHtmlAllSrc("LoadPage",html);
 		document.write(html);
 	},function(err){
 		reclog("拉取页面失败："+err,"red;font-size:30px");

diff --git a/assets/工具-代码运行和静态分发Runtime.html b/assets/工具-代码运行和静态分发Runtime.html
@@ -245,10 +245,12 @@
 			waveStore.Histogram1=Recorder.FrequencyHistogramView({elem:".ctrlProcessWave"});
 			waveStore.Histogram2=Recorder.FrequencyHistogramView({
 				elem:".ctrlProcessWave"
-				,lineCount:90
+				,lineCount:200,widthRatio:1
 				,position:0
 				,minHeight:1
+				,fallDuration:600
 				,stripeEnable:false
+				,mirrorEnable:true
 			});
 			waveStore.Histogram3=Recorder.FrequencyHistogramView({
 				elem:".ctrlProcessWave"

diff --git a/dist/engine/beta-amr.js b/dist/engine/beta-amr.js
diff --git a/dist/engine/beta-ogg.js b/dist/engine/beta-ogg.js
diff --git a/dist/engine/mp3.js b/dist/engine/mp3.js
Original file line number	Diff line number	Diff line change
Expand Up		@@ -44,6 +44,7 @@

		微信开发者工具对npm支持太差，“构建 npm”功能没什么卵用，npm包内没被main文件引用的js会被全部丢弃，导致文件缺失；似乎也不允许手动`require`含`node_modules`的路径；因此请直接copy根目录内的src文件夹到本小程序源码的`copy-rec-src`文件夹内，直接当做小程序源码调用，好使；或者按需copy仅你require引用到了的js文件到小程序项目中，免得小程序源码过大（一般编译时会忽略掉未引用到的js文件）。

		> 已知问题：iOS上微信小程序基础库存在bug，canvas.drawImage(canvas)可能无法绘制，可能会导致可视化插件WaveSurferView在iOS小程序上不能正确显示，其他可视化插件、Android、开发工具均无此兼容性问题；相关链接：[issues#202](https://github.com/xiangyuecn/Recorder/issues/202)，[社区内2023-11-16说在修](https://developers.weixin.qq.com/community/develop/doc/000aaca2148dc8a235a0fb8c66b000)。


		[](?)
Expand Down