添加WaveSurferView扩展

lugaoworld · Jan 16, 2020 · 4f4c90d · 4f4c90d
1 parent e24828e
commit 4f4c90d
Show file tree

Hide file tree

Showing 6 changed files with 279 additions and 6 deletions.
diff --git a/app-support-sample/index.html b/app-support-sample/index.html
@@ -54,6 +54,10 @@
 	url:PageSet_RecordAppBaseFolder+"extensions/waveview.js"
 	,check:function(){return !Recorder.WaveView}
 });
+paths.push({
+	url:PageSet_RecordAppBaseFolder+"extensions/wavesurfer.view.js"
+	,check:function(){return !Recorder.WaveSurferView}
+});
 paths.push({
 	url:PageSet_RecordAppBaseFolder+"extensions/lib.fft.js"
 	,check:function(){return !Recorder.LibFFT}
@@ -138,7 +142,7 @@
 	border-right:1px solid #ccc;
 	background:#ddd;
 	line-height:28px;
-	font-size:13px;
+	font-size:12px;
 	color:#666;
 	padding:0 5px;
 }
@@ -291,6 +295,7 @@
 
 		<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>
@@ -516,6 +521,7 @@
 
 		//此处创建这些音频可视化图形绘制浏览器支持妥妥的
 		waveStore.WaveView=Recorder.WaveView({elem:".recwave"});
+		waveStore.SurferView=Recorder.WaveSurferView({elem:".recwave"});
 		waveStore.Histogram1=Recorder.FrequencyHistogramView({elem:".recwave"});
 		waveStore.Histogram2=Recorder.FrequencyHistogramView({
 			elem:".recwave"
@@ -708,7 +714,8 @@
 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>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> 音频可视化频率直方图)\
 ');
 

diff --git a/assets/工具-代码运行和静态分发Runtime.html b/assets/工具-代码运行和静态分发Runtime.html
@@ -8,9 +8,10 @@
 <title>Recorder代码运行和静态分发工具</title>
 
 <script src="../src/recorder-core.js"></script>
+<script src="../src/extensions/waveview.js"></script>
+<script src="../src/extensions/wavesurfer.view.js"></script>
 <script src="../src/extensions/lib.fft.js"></script>
 <script src="../src/extensions/frequency.histogram.view.js"></script>
-<script src="../src/extensions/waveview.js"></script>
 
 <script src="ztest-jquery.min-1.9.1.js"></script>
 <script src="ztest-codemirror.min.5.48.4.js"></script>
@@ -82,7 +83,7 @@
 	border-right:1px solid #ccc;
 	background:#ddd;
 	line-height:28px;
-	font-size:13px;
+	font-size:12px;
 	color:#666;
 	padding:0 5px;
 }
@@ -130,6 +131,7 @@
 
 				<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>
@@ -177,6 +179,7 @@
 <script>
 (function(){
 var WaveViewBak=Recorder.WaveView;
+var WaveSurferViewBak=Recorder.WaveSurferView;
 var LibFFTBak=Recorder.LibFFT;
 var FrequencyHistogramViewBak=Recorder.FrequencyHistogramView;
 var LogAudios=[0];
@@ -240,12 +243,14 @@
 
 	,Process:function(buffers,powerLevel,bufferDuration,bufferSampleRate){
 		Recorder.WaveView=WaveViewBak;
+		Recorder.WaveSurferView=WaveSurferViewBak;
 		Recorder.LibFFT=LibFFTBak;
 		Recorder.FrequencyHistogramView=FrequencyHistogramViewBak;
 		var waveStore=Runtime.WaveStore;
 		if(!waveStore){
 			waveStore=Runtime.WaveStore={};
 			waveStore.WaveView=Recorder.WaveView({elem:".ctrlProcessWave"});
+			waveStore.SurferView=Recorder.WaveSurferView({elem:".ctrlProcessWave"});
 			waveStore.Histogram1=Recorder.FrequencyHistogramView({elem:".ctrlProcessWave"});
 			waveStore.Histogram2=Recorder.FrequencyHistogramView({
 				elem:".ctrlProcessWave"

diff --git a/dist/extensions/wavesurfer.view.js b/dist/extensions/wavesurfer.view.js
diff --git a/index.html b/index.html
@@ -42,6 +42,7 @@
 
 <!--加载可选扩展库-->
 <script src="src/extensions/waveview.js"></script>
+<script src="src/extensions/wavesurfer.view.js"></script>
 <script src="src/extensions/lib.fft.js"></script>
 <script src="src/extensions/frequency.histogram.view.js"></script>
 <script src="src/extensions/sonic.js"></script>
@@ -105,7 +106,7 @@
 	border-right:1px solid #ccc;
 	background:#ddd;
 	line-height:28px;
-	font-size:13px;
+	font-size:12px;
 	color:#666;
 	padding:0 5px;
 }
@@ -259,6 +260,7 @@
 
 		<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>
@@ -431,6 +433,7 @@
 
 		//此处创建这些音频可视化图形绘制浏览器支持妥妥的
 		waveStore.WaveView=Recorder.WaveView({elem:".recwave"});
+		waveStore.SurferView=Recorder.WaveSurferView({elem:".recwave"});
 		waveStore.Histogram1=Recorder.FrequencyHistogramView({elem:".recwave"});
 		waveStore.Histogram2=Recorder.FrequencyHistogramView({
 			elem:".recwave"
@@ -714,7 +717,8 @@
 reclog("点击打开录音开始哦，此浏览器<span style='color:"+(Recorder.Support()?"green'>":"red'>不")+"支持录音</span>");
 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>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> 音频可视化频率直方图)\
 、<b>Sonic</b> (<a href="'+s+'sonic.js">sonic.js</a> 变速变调)\
 ');
@@ -969,6 +973,7 @@
 				if(i>=engines.length){
 					loadEngineState[type]=minjs;
 					Recorder.WaveView=WaveViewBak;
+					Recorder.WaveSurferView=WaveSurferViewBak;
 					Recorder.LibFFT=LibFFTBak;
 					Recorder.FrequencyHistogramView=FrequencyHistogramViewBak;
 					Recorder.Sonic=SonicBak;
@@ -993,6 +998,7 @@
 };
 loadEngineState={};
 var WaveViewBak=Recorder.WaveView;
+var WaveSurferViewBak=Recorder.WaveSurferView;
 var LibFFTBak=Recorder.LibFFT;
 var FrequencyHistogramViewBak=Recorder.FrequencyHistogramView;
 var SonicBak=Recorder.Sonic;