Skip to content

Commit

Permalink
调整代码,增加临时调试选项 _D220626 试图减少对浏览器录音的影响
Browse files Browse the repository at this point in the history
  • Loading branch information
xiangyuecn committed Jun 28, 2022
1 parent 60a2ff8 commit 128ed12
Showing 9 changed files with 90 additions and 29 deletions.
10 changes: 6 additions & 4 deletions README.md
Original file line number Diff line number Diff line change
@@ -149,7 +149,7 @@ iOS Demo App :[下载源码](https://github.com/xiangyuecn/Recorder/tree/maste

你可以通过阅读和运行[QuickStart.html](https://xiangyuecn.gitee.io/recorder/QuickStart.html)文件来快速入门学习,直接将`QuickStart.html`copy到你的(https、localhost)网站中,无需其他文件,就能正常开始测试了;**注意:需要在https、localhost等[安全环境](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#Privacy_and_security)下才能进行录音。**

> https环境搭建最佳实践:建议给自己的域名申请一个泛域名通配符证书(*.xxx.com),然后线上、本地开发均可使用此证书;本地开发环境直接分配一个二级域名(dev.xxx.com、local.xxx.com、192_168_1_123.xxx.com)解析A记录到电脑局域网的IP地址(192.168.1.123、127.0.0.1),方便本地开发跨端调试(本地如何配置https请针对自己的开发环境自行搜索,很容易)。
> https环境搭建最佳实践:建议给自己的域名申请一个泛域名通配符证书(*.xxx.com),然后线上、本地开发均可使用此证书;本地开发环境直接分配一个二级域名(dev.xxx.com、local.xxx.com、192-168-1-123.xxx.com)解析A记录到电脑局域网的IP地址(192.168.1.123、127.0.0.1),方便本地开发跨端调试(本地如何配置https请针对自己的开发环境自行搜索,很容易)。
>
> 泛域名通配符证书推荐在线免费申请:[ZeroSSL](https://zerossl.com/)[Let’s Encrypt](https://letsencrypt.org/);不建议自己生成根证书来签发域名证书,一个是流程复杂,每个设备均要导入根证书,致命的是很多现代浏览器不再信任用户目录下导入的根证书(Android)。
@@ -744,6 +744,8 @@ function transformOgg(pcmData){
# :open_book:Extensions - 插件文档
`src/extensions`目录内为插件支持库,这些插件库默认都没有合并到生成代码中,需单独引用(`dist``src`中的)才能使用。

【可移植】大部分可视化插件均可以移植到其他语言环境,比如:Android、iOS、小程序原生实现,如需定制可联系作者。

【附】部分插件使用效果图([在线运行观看](https://xiangyuecn.gitee.io/recorder/assets/工具-代码运行和静态分发Runtime.html?jsname=test.extensions.visualization)):

![](assets/use_wave.gif)
@@ -754,7 +756,7 @@ function transformOgg(pcmData){
[](?)

## WaveView插件
[waveview.js](https://github.com/xiangyuecn/Recorder/blob/master/src/extensions/waveview.js),4kb大小源码,录音时动态显示波形,具体样子参考演示地址页面。此插件参考[MCVoiceWave](https://github.com/HaloMartin/MCVoiceWave)库编写的,具体代码在`https://github.com/HaloMartin/MCVoiceWave/blob/f6dc28975fbe0f7fc6cc4dbc2e61b0aa5574e9bc/MCVoiceWave/MCVoiceWaveView.m`中。
[waveview.js](https://github.com/xiangyuecn/Recorder/blob/master/src/extensions/waveview.js),4kb大小源码,录音时动态显示波形,具体样子参考演示地址页面。此插件参考[MCVoiceWave](https://github.com/HaloMartin/MCVoiceWave)库编写的,具体代码在`https://github.com/HaloMartin/MCVoiceWave/blob/f6dc28975fbe0f7fc6cc4dbc2e61b0aa5574e9bc/MCVoiceWave/MCVoiceWaveView.m`;本可视化插件可以移植到其他语言环境,如需定制可联系作者

此插件是在录音时`onProcess`回调中使用;`Recorder.BufferSize`会影响绘制帧率,默认配置的大概12帧/s比较流畅。基础使用方法:[](?Ref=WaveView.Codes&Start)
``` javascript
@@ -806,7 +808,7 @@ set={
[](?)

## WaveSurferView插件
[wavesurfer.view.js](https://github.com/xiangyuecn/Recorder/blob/master/src/extensions/wavesurfer.view.js),7kb大小源码,音频可视化波形显示,具体样子参考演示地址页面。
[wavesurfer.view.js](https://github.com/xiangyuecn/Recorder/blob/master/src/extensions/wavesurfer.view.js),7kb大小源码,音频可视化波形显示,具体样子参考演示地址页面;本可视化插件可以移植到其他语言环境,如需定制可联系作者

此插件的使用方式和`WaveView`插件完全相同,请参考上面的`WaveView`来使用;本插件的波形绘制直接简单的使用PCM的采样数值大小来进行线条的绘制,同一段音频绘制出的波形和Audition内显示的波形外观上几乎没有差异。

@@ -848,7 +850,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语音部分(线性),其他高频显示区域较小,不适合用来展示音乐频谱,可自行修改源码恢复成完整的线性频谱,或修改成倍频程频谱(伯德图、对数频谱);本可视化插件可以移植到其他语言环境,如需定制可联系作者

此插件的使用方式和`WaveView`插件完全相同,请参考上面的`WaveView`来使用;请注意:必须同时引入`lib.fft.js`才能正常工作。

8 changes: 4 additions & 4 deletions assets/npm-home/hash-history.txt
Original file line number Diff line number Diff line change
@@ -1,4 +1,8 @@
[
{
"sha1": "40d86b5656875a4f856d652bc3d4839464d8fe2d",
"time": "2022-6-28 09:44:33"
},
{
"sha1": "88b22aab0ee72cd0a07d594cb0e035067f28cb69",
"time": "2022-5-7 23:49:36"
@@ -14,9 +18,5 @@
{
"sha1": "da5d36f2d737a399132ff0dce78f4848f575b6d0",
"time": "2021-8-8 18:32:10"
},
{
"sha1": "f25250465e0e93c0f75f6c0a16a0940e9c350857",
"time": "2021-8-4 02:20:20"
}
]
3 changes: 2 additions & 1 deletion assets/runtime-codes/test.extensions.visualization.js
Original file line number Diff line number Diff line change
@@ -2,8 +2,9 @@
《【测试】音频可视化相关插件测试》
作者:高坚果
时间:2020-1-17 11:59:47
源码:https://github.com/xiangyuecn/Recorder
本测试将测试Recorder所有音频可视化相关的插件。
本测试将测试Recorder所有音频可视化相关的插件;大部分可视化插件均可以移植到其他语言环境,比如:Android、iOS、小程序原生实现,如需定制可联系作者
******************/
var waveConfigs={
WaveView:[
2 changes: 1 addition & 1 deletion dist/recorder-core.js

Large diffs are not rendered by default.

60 changes: 54 additions & 6 deletions index.html
Original file line number Diff line number Diff line change
@@ -62,6 +62,12 @@
pre{
white-space:pre-wrap;
}
label,label *{
cursor: pointer;
}
label:hover{
color:#06c;
}
a{
text-decoration: none;
color:#06c;
@@ -145,7 +151,7 @@

<script>
//兼容环境
var PageLM="2022-05-07 21:58";
var PageLM="2022-06-26 18:53";

function RandomKey(){
return "randomkey"+(RandomKey.idx++);
@@ -413,6 +419,22 @@
;为set中disableEnvInFix配置值
</label>
<div><a href="https://github.com/xiangyuecn/Recorder/issues/51">issues#51</a>如果没有进行补偿,录音时设备偶尔出现很卡的情况下(CPU被其他程序大量占用),浏览器采集到的音频是断断续续的,导致10秒的录音可能就只返回了5秒的数据量,这个时候最终编码得到的音频时长明显变短,播放时的效果就像快放一样。未禁用时会在卡顿时自动补偿静默音频,消除了快放效果,但由于丢失的音频已被静默数据代替,听起来就是数据本身的断断续续的效果。在设备不卡时录音没有此问题。</div>

<div style="margin-top:12px;">
<span class="lb">临时调试选项 :</span>
<div><label>
<input type="checkbox" class="debugSet_D220626">
Recorder._D220626=true:ScriptProcessor立即退出回调,试图减少对浏览器录音的影响,有可能减少杂音,效果有待测试
</label></div>
<div><span style="color:#f60">以上参数设置后需重新打开录音</span>;这些参数仅供调试用,未来会被删除。</div>
</div>


<div style="margin-top:12px;">
<span class="lb">暴力测试 :</span>
<button onclick="testMultipleOpen5()">同时打开5个录音(并发调用open)</button>
,每个会录5秒,打开浏览器控制台查看日志
</div>
</div>

<div class="mainBox">
@@ -525,6 +547,9 @@
<script>
var rec;
function recopen(){
if(rec&&Recorder.IsOpen()){//如果有老的,close掉重新开新的
recclose();
};
var type=$("[name=type]:checked").val();
var bit=+$(".bit").val();
var sample=+$(".sample").val();
@@ -545,6 +570,12 @@
reclog("已启用AudioWorklet,"+workletTips,"#f60");
}

var debugSet_D220626=$(".debugSet_D220626")[0].checked;
Recorder._D220626=debugSet_D220626;
if(debugSet_D220626){
reclog("已启用临时调试选项:Recorder._D220626=true","#f60");
};

var audioTrackSet=null;
var trackSet_device=$(".trackSet_device").val();
var trackSet_noise=$(".trackSet_noise").val();
@@ -567,12 +598,7 @@
audioTrackSet.autoGainControl=+trackSet_gain==1;
}

if(rec){//如果有老的,close掉才会生效
recclose();
}
reclog("已启用audioTrackSet配置:"+JSON.stringify(audioTrackSet));
}else if(rec && rec.set.audioTrackSet){
recclose();
};

var realTimeSendSet=$(".realTimeSendSet")[0].checked;
@@ -1184,6 +1210,28 @@
};


//暴力测试:同时打开5个录音,定时录5秒
var testMultipleOpen5=function(){
if(rec)rec.close();
for(var i=0;i<5;i++){(function(i){
var rec=Recorder({type:"mp3"
,onProcess:function(buffers,powerLevel,duration,sampleRate,newBufferIdx,asyncEnd){
Recorder.CLog(i+1,0,duration,buffers.length,newBufferIdx);
}
});
rec.open(function(){
rec.start();
setTimeout(function(){
var t1=Date.now();
rec.stop(function(blob,duration){
addRecLog(duration, "第"+(i+1)+"个",blob,rec.set,t1);
},null,true);
},5000);
});
})(i)}
};


//实时传输数据模拟开关
$(".realTimeSendSet").bind("change",function(e){
var open=e.target.checked;
2 changes: 1 addition & 1 deletion recorder.mp3.min.js

Large diffs are not rendered by default.

Loading

0 comments on commit 128ed12

Please sign in to comment.