diff --git a/README.md b/README.md index 6d901b7..d599d8c 100644 --- a/README.md +++ b/README.md @@ -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`才能正常工作。 diff --git a/assets/npm-home/hash-history.txt b/assets/npm-home/hash-history.txt index c485a56..4aed40c 100644 --- a/assets/npm-home/hash-history.txt +++ b/assets/npm-home/hash-history.txt @@ -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" } ] \ No newline at end of file diff --git a/assets/runtime-codes/test.extensions.visualization.js b/assets/runtime-codes/test.extensions.visualization.js index 001a851..e52aeb7 100644 --- a/assets/runtime-codes/test.extensions.visualization.js +++ b/assets/runtime-codes/test.extensions.visualization.js @@ -2,8 +2,9 @@ 《【测试】音频可视化相关插件测试》 作者：高坚果 时间：2020-1-17 11:59:47 +源码：https://github.com/xiangyuecn/Recorder -本测试将测试Recorder所有音频可视化相关的插件。 +本测试将测试Recorder所有音频可视化相关的插件；大部分可视化插件均可以移植到其他语言环境，比如：Android、iOS、小程序原生实现，如需定制可联系作者。 ******************/ var waveConfigs={ WaveView:[ diff --git a/dist/recorder-core.js b/dist/recorder-core.js index 2a4ed6a..dd64e2d 100644 --- a/dist/recorder-core.js +++ b/dist/recorder-core.js @@ -3,4 +3,4 @@ https://github.com/xiangyuecn/Recorder src: recorder-core.js */ -!function(_){"use strict";var h=function(){},P=function(e){return new t(e)};P.LM="2022-05-04 20:10";var y="Recorder";P.IsOpen=function(){var e=P.Stream;if(e){var t=e.getTracks&&e.getTracks()||e.audioTracks||[],n=t[0];if(n){var r=n.readyState;return"live"==r||r==n.LIVE}}return!1},P.BufferSize=4096,P.Destroy=function(){for(var e in x(y+" Destroy"),g(),n)n[e]()};var n={};P.BindDestroy=function(e,t){n[e]=t},P.Support=function(){var e=_.AudioContext;if(e||(e=_.webkitAudioContext),!e)return!1;var t=navigator.mediaDevices||{};return t.getUserMedia||(t=navigator).getUserMedia||(t.getUserMedia=t.webkitGetUserMedia||t.mozGetUserMedia||t.msGetUserMedia),!!t.getUserMedia&&(P.Scope=t,P.Ctx&&"closed"!=P.Ctx.state||(P.Ctx=new e,P.BindDestroy("Ctx",function(){var e=P.Ctx;e&&e.close&&(e.close(),P.Ctx=0)})),!0)};var k="ConnectEnableWorklet";P[k]=!1;var d=function(e){var t=(e=e||P).BufferSize||P.BufferSize,r=P.Ctx,n=e.Stream,a=n._m=r.createMediaStreamSource(n),u=n._call,o=function(e,t){if(!t||m)for(var n in u){for(var r=t||e.inputBuffer.getChannelData(0),a=r.length,o=new Int16Array(a),s=0,i=0;i"+f,3);for(var u=0,l=o;l"+h.length+" 花:"+(Date.now()-r)+"ms"),setTimeout(function(){r=Date.now(),a[o.type](h,function(e){c(e,v)},function(e){i(e)})})}else i("未加载"+o.type+"编码器");else i("音频buffers被释放");else i("未采集到录音")}},_[y]&&(x("重复引入"+y,3),_[y].Destroy()),(_[y]=P).TrafficImgUrl="//ia.51.la/go1?id=20469973&pvFlag=1";var o=P.Traffic=function(e){e=e?"/"+y+"/Report/"+e:"";var t=P.TrafficImgUrl;if(t){var n=P.Traffic,r=/^(https?:..[^\/#]*\/?)[^#]*/i.exec(location.href)||[],a=r[1]||"http://file/",o=(r[0]||a)+e;if(0==t.indexOf("//")&&(t=/^https:/i.test(o)?"https:"+t:"http:"+t),e&&(t=t+"&cu="+encodeURIComponent(a+e)),!n[o]){n[o]=1;var s=new Image;s.src=t,x("Traffic Analysis Image: "+(e||y+".TrafficImgUrl="+P.TrafficImgUrl))}}}}(window),"function"==typeof define&&define.amd&&define(function(){return Recorder}),"object"==typeof module&&module.exports&&(module.exports=Recorder); \ No newline at end of file +!function(k){"use strict";var m=function(){},F=function(e){return new t(e)};F.LM="2022-06-26 18:37";var I="Recorder";F.IsOpen=function(){var e=F.Stream;if(e){var t=e.getTracks&&e.getTracks()||e.audioTracks||[],n=t[0];if(n){var r=n.readyState;return"live"==r||r==n.LIVE}}return!1},F.BufferSize=4096,F.Destroy=function(){for(var e in b(I+" Destroy"),d(),n)n[e]()};var n={};F.BindDestroy=function(e,t){n[e]=t},F.Support=function(){var e=k.AudioContext;if(e||(e=k.webkitAudioContext),!e)return!1;var t=navigator.mediaDevices||{};return t.getUserMedia||(t=navigator).getUserMedia||(t.getUserMedia=t.webkitGetUserMedia||t.mozGetUserMedia||t.msGetUserMedia),!!t.getUserMedia&&(F.Scope=t,F.Ctx&&"closed"!=F.Ctx.state||(F.Ctx=new e,F.BindDestroy("Ctx",function(){var e=F.Ctx;e&&e.close&&(e.close(),F.Ctx=0)})),!0)};var M="ConnectEnableWorklet";F[M]=!1;var h=function(e){var r=(e=e||F).BufferSize||F.BufferSize,a=F.Ctx,o=e.Stream,s=o._m=a.createMediaStreamSource(o),i=a.destination,t="createMediaStreamDestination";a[t]&&(i=a[t]());var f=o._call,c=function(e,t){if(!t||g)for(var n in f){for(var r=e.length,a=new Int16Array(r),o=0,s=0;s"+f,3);for(var l=0,u=o;u"+h.length+" 花:"+(Date.now()-r)+"ms"),setTimeout(function(){r=Date.now(),a[o.type](h,function(e){c(e,p)},function(e){i(e)})})}else i("未加载"+o.type+"编码器");else i("音频buffers被释放");else i("未采集到录音")}},k[I]&&(b("重复引入"+I,3),k[I].Destroy()),(k[I]=F).TrafficImgUrl="//ia.51.la/go1?id=20469973&pvFlag=1";var o=F.Traffic=function(e){e=e?"/"+I+"/Report/"+e:"";var t=F.TrafficImgUrl;if(t){var n=F.Traffic,r=/^(https?:..[^\/#]*\/?)[^#]*/i.exec(location.href)||[],a=r[1]||"http://file/",o=(r[0]||a)+e;if(0==t.indexOf("//")&&(t=/^https:/i.test(o)?"https:"+t:"http:"+t),e&&(t=t+"&cu="+encodeURIComponent(a+e)),!n[o]){n[o]=1;var s=new Image;s.src=t,b("Traffic Analysis Image: "+(e||I+".TrafficImgUrl="+F.TrafficImgUrl))}}}}(window),"function"==typeof define&&define.amd&&define(function(){return Recorder}),"object"==typeof module&&module.exports&&(module.exports=Recorder); \ No newline at end of file diff --git a/index.html b/index.html index 2828dc2..edc2271 100644 --- a/index.html +++ b/index.html @@ -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 @@