更新文档

JYWangCN · Dec 4, 2023 · d4aa4cd · d4aa4cd
1 parent 2fd589c
commit d4aa4cd
Show file tree

Hide file tree

Showing 10 changed files with 419 additions and 86 deletions.
diff --git a/README.md b/README.md
@@ -9,9 +9,9 @@
 
 支持对任意`MediaStream`进行音频录制、实时处理，包括：`getUserMedia返回的流`、`WebRTC中的remote流`、`audio、video标签的captureStream方法返回的流`、`自己创建的流` 等等。
 
-提供多个插件功能支持：拥有丰富的音频可视化、变速变调处理、语音识别、音频流播放等；搭配上强大的实时处理支持，可用于各种网页应用：从简单的录音，到复杂的实时语音识别（ASR），甚至音频相关的游戏，都能从容应对。
+提供多个插件功能支持，拥有丰富的音频可视化、变速变调处理、语音识别、音频流播放等；搭配上强大的实时处理支持，可用于各种网页应用：从简单的录音，到复杂的实时语音识别（ASR），甚至音频相关的游戏，都能从容应对；提供转码支持，允许将录制的buffers数据或任意pcm数据转码成你需要的格式（参考`rec.mock`方法）。
 
-主要用于语音录制，因此仅对**单声道**进行支持（未适配双声道）；默认输出mp3格式，另外可选wav、pcm、g711a、g711u、ogg、amr、webm(beta)格式，支持任意格式扩展（前提有相应编码器）；使用recorder.mp3.min.js（150kb）即可录制mp3，使用recorder.wav.min.js（25kb）即可录制wav；均支持实时转码和实时传输。
+主要用于语音录制，因此仅对**单声道**进行支持（未适配双声道），支持超长时间录音（参考`rec.buffers`）；默认输出mp3格式，另外可选wav、pcm、g711a、g711u、ogg、amr、webm(beta)格式，支持任意格式扩展（前提有相应编码器）；使用recorder.mp3.min.js（150kb）即可录制mp3，使用recorder.wav.min.js（25kb）即可录制wav；均支持实时转码和实时传输。
 
 音频文件的上传和播放：可直接使用常规的`Audio HTML标签`来播放完整的音频文件，参考文档下面的【快速使用】部分，有上传和播放例子；上传了的录音直接将音频链接赋值给`audio.src`即可播放；本地的`blob音频文件`可通过`URL.createObjectURL`来生成本地链接赋值给`audio.src`即可播放，或者将blob对象直接赋值给`audio.srcObject`（兼容性没有src高）。实时的音频片段文件播放，可以使用本库自带的`BufferStreamPlayer`插件来播放，简单高效，或者采用别的途径播放。
 
@@ -587,35 +587,38 @@ stop时返回的录音数据类型，取值：`blob`、`arraybuffer`，默认为
 
 
 ### 【方法】rec.mock(pcmData,pcmSampleRate)
-模拟一段录音数据，后面直接调用stop进行编码得到音频文件。需提供pcm数据 `pcmData` `=` `[Int16,...]` 为一维数组，和pcm数据的采样率 `pcmSampleRate`。调用本方法后无需调用也无法调用open、close、start等方法，只能调用stop，如果之前已经开始了录音，前面的录音数据全部会被丢弃；本方法主要用于音频转码。
+模拟一段录音数据，后面直接调用stop进行编码得到音频文件。需提供pcm数据 `pcmData` `=` `[Int16,...]` 为Int16Array一维数组，和pcm数据的采样率 `pcmSampleRate`。调用本方法后无需调用也无法调用open、close、start等方法，只能调用stop，如果之前已经开始了录音，前面的录音数据全部会被丢弃（一般不要共用一个rec，直接创建个新的再调用mock）；本方法主要用于音频转码。
 
 提示：在录音实时回调中配合`Recorder.SampleData()`方法使用效果更佳，可实时生成小片段语音文件。
 
 **注意：pcmData为一维数组，如果提供二维数组将会产生不可预料的错误**；如果需要使用类似`onProcess`回调的`buffers`或者`rec.buffers`这种pcm列表（二维数组）时，可自行展开成一维，或者使用`Recorder.SampleData()`方法转换成一维。
 
-本方法可用于将一个音频解码出来的pcm数据方便的转换成另外一个格式：
 ``` javascript
-var amrBlob=...;//amr音频blob对象
-var amrSampleRate=8000;//amr音频采样率
-
-//解码amr得到pcm数据
-var reader=new FileReader();
-reader.onload=function(){
-    Recorder.AMR.decode(new Uint8Array(reader.result),function(pcm){
-        transformOgg(pcm);
-    });
-};
-reader.readAsArrayBuffer(amrBlob);
-
-//将pcm转成ogg
-function transformOgg(pcmData){
-    Recorder({type:"ogg",bitRate:64,sampleRate:32000})
-        .mock(pcmData,amrSampleRate)
-        .stop(function(blob,duration){
-            //我们就得到了新采样率和比特率的ogg文件
-            console.log(blob,duration);
-        });
-};
+//提供一个变量，用于连续转换buffers数据，注意开始新的转换时需要重置为null
+var prevChunk=null;
+
+//将onProcess回调中的buffers转成pcm   onProcess(buffers,powerLevel,duration,sampleRate)
+//var chunk=Recorder.SampleData(buffers,sampleRate,sampleRate,prevChunk);
+
+//将rec.buffers转成pcm
+var chunk=Recorder.SampleData(rec.buffers,rec.srcSampleRate,rec.srcSampleRate,prevChunk);
+
+prevChunk=chunk; //存起来，下次从当前已转换位置继续转换
+
+//这就是上面的代码自动截取到的最新未转换pcm数据
+//你也可以自行从buffers中截取出需要转码的pcm
+//或者从其他地方获取到pcm数据，比如用解码其他音频文件得到pcm，即可实现不同音频格式之间转码
+var pcm=chunk.data; 
+var sampleRate=chunk.sampleRate;
+
+//调用mock方法把pcm转码成mp3或其他格式
+var mockRec=Recorder({ type:"mp3",bitRate:16,sampleRate:16000 });
+mockRec.mock(pcm,sampleRate);
+mockRec.stop(function(blob,duration){
+    console.log("pcm已转码成mp3",blob,duration);
+},function(msg){
+    console.error("不应该出现的错误:"+msg);
+});
 ```
 
 

diff --git a/app-support-sample/README.md b/app-support-sample/README.md
@@ -107,7 +107,7 @@ require("./你clone的目录/src/app-support/app-miniProgram-wx-support.js");
 ### 在uni-app中使用
 请直接参考本目录下的 [demo_UniApp](./demo_UniApp) demo项目，可编译成：H5、Android App、iOS App、微信小程序，**[AD]编译成App时仅供测试，正式发布需商用授权**。
 
-在uni-app中使用，需要先导入Recorder-UniCore组件，在demo_UniApp项目中可以找到此组件，或者到DCloud 插件市场下载此组件（暂未发布）。
+在uni-app中使用，需要先导入Recorder-UniCore组件，在demo_UniApp项目中可以找到此组件，或者到[DCloud 插件市场下载此组件](https://ext.dcloud.net.cn/plugin?name=Recorder-UniCore)。
 ``` javascript
 //所有平台必须引入的uni-app支持文件
 import '@/uni_modules/Recorder-UniCore/app-uni-support.js'
@@ -207,7 +207,7 @@ recReq(function(){
 
 [](?)
 
-## 【附】App中使用H5录音需要进行的权限处理
+## 【附】需要进行的权限处理
 App的WebView中打开网页进行录音时，如果未使用原生录音，将默认使用Recorder H5进行录音（和普通网页录音没有任何区别），此时必须在`RecordApp.RequestPermission`前先获取到App的系统录音权限，如果App没有系统录音权限，将无法录音。
 
 ### Android App录音权限
@@ -469,7 +469,7 @@ JsBridge可以是自己实现的交互方式 或 别人提供的框架。因为
 [](?)
 
 ## uni-app组件：app-uni-support.js
-在本文档目录下的[demo_UniApp](./demo_UniApp)项目中可以找到Recorder-UniCore组件，或者到DCloud 插件市场下载此组件（暂未发布），路径为 `@/uni_modules/Recorder-UniCore/app-uni-support.js` 。
+在本文档目录下的[demo_UniApp](./demo_UniApp)项目中可以找到Recorder-UniCore组件，或者到[DCloud 插件市场下载此组件](https://ext.dcloud.net.cn/plugin?name=Recorder-UniCore)，路径为 `@/uni_modules/Recorder-UniCore/app-uni-support.js` 。
 
 此组件支持vue2、vue3、nvue，支持编译成：H5、Android App、iOS App、微信小程序，**[AD]编译成App时仅供测试，正式发布需商用授权**。
 

diff --git a/app-support-sample/demo_UniApp/README.md b/app-support-sample/demo_UniApp/README.md
@@ -2,13 +2,14 @@
 
 # :open_book:uni-app内使用RecordApp录音
 
-本目录内包含uni-app的测试项目源码，主要文件请参考 [main_recTest.vue](pages/recTest/main_recTest.vue) ；本测试项目是使用[app-uni-support.js](uni_modules/Recorder-UniCore/app-uni-support.js)来给`RecordApp`提供uni-app支持的，此文件在 `uni_modules/Recorder-UniCore` 组件内，copy即可使用，或者到DCloud 插件市场下载此组件（暂未发布）。
+本目录内包含uni-app的测试项目源码，主要文件请参考 [main_recTest.vue](pages/recTest/main_recTest.vue) ；本测试项目是使用[app-uni-support.js](uni_modules/Recorder-UniCore/app-uni-support.js)来给`RecordApp`提供uni-app支持的，此文件在 `uni_modules/Recorder-UniCore` 组件内，copy即可使用，或者到[DCloud 插件市场下载此组件](https://ext.dcloud.net.cn/plugin?name=Recorder-UniCore)。
 
 - 支持vue2、vue3、nvue
 - 支持编译成：H5、Android App、iOS App、微信小程序
 - 支持已有的大部分录音格式：mp3、wav、pcm、amr、ogg、g711a、g711u等
 - 支持实时处理，包括变速变调、实时上传、ASR语音转文字
 - 支持可视化波形显示
+- App端另有配套的原生录音插件、uts插件可供选择，兼容性和体验更好
 
 **[AD]app-uni-support.js文件在uni-app中编译到App平台时仅供测试用（App平台包括：Android App、iOS App），不可用于正式发布或商用，正式发布或商用需先联系作者获得授权许可**；编译到其他平台时无此授权限制，比如：H5、小程序，均为免费授权；详情参考本文档下面的授权许可章节。
 
@@ -38,7 +39,7 @@
 
 ## 一、引入js文件
 1. 在你的项目根目录安装`recorder-core`：`npm install recorder-core`
-2. 导入Recorder-UniCore组件：直接复制本目录下的`uni_modules/Recorder-UniCore`组件到你项目中，或者到DCloud 插件市场下载此组件（暂未发布）
+2. 导入Recorder-UniCore组件：直接复制本目录下的`uni_modules/Recorder-UniCore`组件到你项目中，或者到[DCloud 插件市场下载此组件](https://ext.dcloud.net.cn/plugin?name=Recorder-UniCore)
 3. 在需要录音的vue文件内编写以下代码，按需引入需要的js
 
 ``` html
@@ -52,7 +53,8 @@ import RecordApp from 'recorder-core/src/app-support/app'
 //所有平台必须引入的uni-app支持文件（如果编译出现路径错误，请把@换成 ../../ 这种）
 import '@/uni_modules/Recorder-UniCore/app-uni-support.js'
 
-// #ifdef MP-WEIXIN //需要编译成微信小程序时，引入微信小程序支持文件
+/** 需要编译成微信小程序时，引入微信小程序支持文件 **/
+// #ifdef MP-WEIXIN
     import 'recorder-core/src/app-support/app-miniProgram-wx-support.js'
 // #endif
 
@@ -76,7 +78,7 @@ import '@/uni_modules/Recorder-UniCore/app-uni-support.js'
     ，因为App中默认是在renderjs（WebView）中进行录音和音频编码**/
 import 'recorder-core'
 import RecordApp from 'recorder-core/src/app-support/app'
-import '@/uni_modules/Recorder-UniCore/app-uni-support.js' //如果编译出现路径错误，请把@换成 ../../ 这种
+import '../../uni_modules/Recorder-UniCore/app-uni-support.js' //renderjs中似乎不支持"@/"打头的路径，如果编译路径错误请改正路径即可
 
 //按需引入你需要的录音格式支持文件，和插件
 import 'recorder-core/src/engine/mp3'
@@ -130,6 +132,9 @@ data() { return {} } //视图没有引用到的变量无需放data里，直接th
         RecordApp.RequestPermission(()=>{
             console.log("已获得录音权限，可以开始录音了");
         },(msg,isUserNotAllow)=>{
+            if(isUserNotAllow){//用户拒绝了录音权限
+                //这里你应当编写代码进行引导用户给录音权限，不同平台分别进行编写
+            }
             console.error("请求录音权限失败："+msg);
         });
     }
@@ -139,7 +144,7 @@ data() { return {} } //视图没有引用到的变量无需放data里，直接th
         //录音配置信息
         var set={
             type:"mp3",sampleRate:16000,bitRate:16 //mp3格式，指定采样率hz、比特率kbps，其他参数使用默认配置；注意：是数字的参数必须提供数字，不要用字符串；需要使用的type类型，需提前把格式支持文件加载进来，比如使用wav格式需要提前加载wav.js编码引擎
-            ,onProcess:function(buffers,powerLevel,duration,sampleRate,newBufferIdx,asyncEnd){
+            ,onProcess:(buffers,powerLevel,duration,sampleRate,newBufferIdx,asyncEnd)=>{
                 //全平台通用：可实时上传（发送）数据，配合Recorder.SampleData方法，将buffers中的新数据连续的转换成pcm上传，或使用mock方法将新数据连续的转码成其他格式上传，可以参考Recorder文档里面的：Demo片段列表 -> 实时转码并上传-通用版；基于本功能可以做到：实时转发数据、实时保存数据、实时语音识别（ASR）等
 
                 //注意：App里面是在renderjs中进行实际的音频格式编码操作，此处的buffers数据是renderjs实时转发过来的，修改此处的buffers数据不会改变renderjs中buffers，所以不会改变生成的音频文件，可在onProcess_renderjs中进行修改操作就没有此问题了；如需清理buffers内存，此处和onProcess_renderjs中均需要进行清理，H5、小程序中无此限制
@@ -249,7 +254,7 @@ data() { return {} } //视图没有引用到的变量无需放data里，直接th
 [](?)
 
 ## 编译成微信小程序时录音和权限
-编译成微信小程序时，录音功能由小程序的`RecorderManager`提供。
+编译成微信小程序时，录音功能由小程序的`RecorderManager`提供，屏蔽了微信原有的底层细节（无录音时长限制）。
 
 小程序录音需要用户授予录音权限，调用`RecordApp.RequestPermission`的时候会检查是否能正常录音，如果用户拒绝了录音权限，会进入错误回调，回调里面你应当编写代码检查`wx.getSetting`中的`scope.record`录音权限，然后引导用户进行授权（可调用`wx.openSetting`打开设置页面，方便用户给权限）。
 

diff --git a/app-support-sample/demo_UniApp/pages/recTest/main_recTest.vue b/app-support-sample/demo_UniApp/pages/recTest/main_recTest.vue
@@ -1,3 +1,8 @@
+<!-- uni-app内使用RecordApp录音
+GitHub: https://github.com/xiangyuecn/Recorder/tree/master/app-support-sample/demo_UniApp
+DCloud 插件市场下载组件: https://ext.dcloud.net.cn/plugin?name=Recorder-UniCore
+-->
+
 <template>
 <view>
 	<view style="padding:5px 10px 0">
@@ -31,7 +36,7 @@
 		<checkbox @click="recTypeClick" :checked="recType=='mp3'" data-type="mp3">mp3</checkbox>
 		<checkbox @click="recTypeClick" :checked="recType=='wav'" data-type="wav">wav</checkbox>
 		<checkbox @click="recTypeClick" :checked="recType=='pcm'" data-type="pcm">pcm</checkbox>
-		<checkbox @click="recTypeClick" :checked="recType=='amr'" data-type="amr">amr</checkbox>
+		<checkbox @click="recTypeClick" :checked="recType=='amr'" data-type="amr" :disabled="disableAmr">amr</checkbox>
 		<checkbox @click="recTypeClick" :checked="recType=='g711a'" data-type="g711a">g711a</checkbox>
 		<checkbox @click="recTypeClick" :checked="recType=='g711u'" data-type="g711u">g711u</checkbox>
 		<checkbox @click="recTypeClick" :checked="recType=='ogg'" data-type="ogg" :disabled="disableOgg">ogg{{disableOgg?'(js太大)':''}}</checkbox>
@@ -125,7 +130,8 @@
 	<view style="height:10px;background:#eee"></view>
 	<view style="padding:10px 10px">
 		<view style="padding-bottom: 10px;color:#02a2ff;word-break:break-all;">
-			RecordApp的uni-app支持文档和示例: https://github.com/xiangyuecn/Recorder/tree/master/app-support-sample/demo_UniApp (github可以换成gitee)
+			<view>DCloud 插件市场下载本组件: https://ext.dcloud.net.cn/plugin?name=Recorder-UniCore</view>
+			<view>RecordApp的uni-app支持文档和示例: https://github.com/xiangyuecn/Recorder/tree/master/app-support-sample/demo_UniApp (github可以换成gitee)</view>
 		</view>
 		<view style="color:#0ab;font-size:22px;font-weight:bold">
 			如需录音功能定制开发，网站、App、小程序、前端后端开发等需求，请加QQ群：①群 781036591、②群 748359095，口令recorder，联系群主（即作者），谢谢~
@@ -200,19 +206,13 @@ import 'recorder-core/src/app-support/app-miniProgram-wx-support.js'
 
 
 //特殊处理：amr、ogg编码器需要atob进行base64解码，小程序没有atob
-var disableOgg=false;
+var disableOgg=false,disableAmr=false;
 // #ifdef MP-WEIXIN
 	disableOgg=true;
-	if(typeof atob=="undefined" && typeof globalThis=="object"){
-		globalThis.atob=(s)=>{
-			var a=new Uint8Array(uni.base64ToArrayBuffer(s)),t="";
-			for(var i=0;i<a.length;i++)t+=String.fromCharCode(a[i]);
-			return t;
-		};
-		console.warn("没有atob，已提供全局变量");
-	}
+	disableAmr=true;
+	//无法像小程序demo项目一样在开头提供 globalThis.atob 来支持atob，因为uni-app编译后npm包会在所有js文件前面加载，js代码块会在所有import之后执行，本demo代码暂不提供amr、ogg小程序的支持，你可以在node_modules包中手动增加一个js来实现 globalThis.atob 并import这个文件，小程序里面就能正常使用amr、ogg了
 // #endif
-// #ifdef H5 || MP-WEIXIN
+// #ifdef H5
 	//H5、renderjs中可以把编码器放到static文件夹里面用动态创建script来引入，免得这些文件太大
 	import 'recorder-core/src/engine/beta-amr' //小程序中需要atob支持
 	import 'recorder-core/src/engine/beta-amr-engine'
@@ -252,7 +252,7 @@ export default {
 			,recpowerx:0
 			,recpowert:""
 			,pageDeep:0,pageNewPath:"main_recTest"
-			,disableOgg:disableOgg
+			,disableOgg:disableOgg,disableAmr:disableAmr
 			,evalExecCode:""
 			,reclogs:[]
 		}

diff --git a/app-support-sample/demo_UniApp/pages/recTest/page_i18n.vue b/app-support-sample/demo_UniApp/pages/recTest/page_i18n.vue
@@ -1,3 +1,8 @@
+<!-- uni-app内使用RecordApp录音
+GitHub: https://github.com/xiangyuecn/Recorder/tree/master/app-support-sample/demo_UniApp
+DCloud 插件市场下载组件: https://ext.dcloud.net.cn/plugin?name=Recorder-UniCore
+-->
+
 <template>
 <view>
 	<!-- 语言选择 -->

diff --git a/app-support-sample/demo_UniApp/pages/recTest/page_nvue.nvue b/app-support-sample/demo_UniApp/pages/recTest/page_nvue.nvue
@@ -1,3 +1,8 @@
+<!-- uni-app内使用RecordApp录音
+GitHub: https://github.com/xiangyuecn/Recorder/tree/master/app-support-sample/demo_UniApp
+DCloud 插件市场下载组件: https://ext.dcloud.net.cn/plugin?name=Recorder-UniCore
+-->
+
 <template>
 <view>
 	<view style="padding:5px 10px 0">

diff --git a/app-support-sample/demo_UniApp/uni_modules/Recorder-UniCore/changelog.md b/app-support-sample/demo_UniApp/uni_modules/Recorder-UniCore/changelog.md
@@ -1,3 +1,2 @@
-
-# 1.0.231201
-首个版本
+## 1.0.231201（2023-12-04）
+第一次发布