目录
[三 功能的使用](#三 功能的使用)
[3.1 请求录音权限](#3.1 请求录音权限)
[3.2 开始录音](#3.2 开始录音)
[3.3 停止录音](#3.3 停止录音)
[3.4 其他接口](#3.4 其他接口)
[四 、使用](#四 、使用)
[4.1 开始录音实例](#4.1 开始录音实例)
[4.2 请求录音权限](#4.2 请求录音权限)
[4.3 停止录音------文件的下载与上传](#4.3 停止录音——文件的下载与上传)
一、安装插件
javascript
npm install --registry=https://registry.npmmirror.com/
二、导入文件
以下导入仅仅我的Demo需要,其他扩展需要引入其他文件,
javascript
import Recorder from 'recorder-core';
import RecordApp from 'recorder-core/src/app-support/app.js';
/*import '../../uni_modules/Recorder-UniCore/app-uni-support.js';*/
import 'recorder-core/src/engine/mp3.js';
import 'recorder-core/src/engine/mp3-engine.js';
import 'recorder-core/src/extensions/waveview.js';
说明:
1.app-xxx-support.js支持文件
注册一个平台的实现,对应的都会有一个app-xxx-support.js支持文件(Default-H5除外)
app-xxx-support.js
是一个特定于平台的支持文件,它包含了该平台特有的实现代码,以确保跨平台录音插件 Recorder
能够在不同的平台(如 Web、微信小程序、Uni-app 等)上正常工作,比如我在Uni-app上使用我需要导入一个app-uni-support.js文件。
2.RecordApp
RecordApp是录音插件程序的入口,可以仅使用RecordApp作为入口,可以不关心recorder-core中的方法,因为RecordApp已经对他进行了一次封装,并且屏蔽了非通用的功能。
javascript
var Recorder=function(set){
return new initFn(set);
};
Recorder
对象的set
参数:
参数 | 类型 | 默认值 | 说明 |
---|---|---|---|
type | String | "mp3" | 输出类型:mp3,wav |
bitRate | Number | 16 | 比特率 wav:16或8位,MP3:8kbps 1k/s,8kbps 2k/s 录音文件很小 |
sampleRate | Number | 16000 | 采样率,wav格式大小=sampleRate*时间;mp3此项对低比特率有影响,高比特率几乎无影响。<br>wav任意值,mp3取值范围:48000, 44100, 32000, 24000, 22050, 16000, 12000, 11025, 8000 |
onProcess | Function | NOOP | fn(buffers ,powerLevel ,bufferDuration ,bufferSampleRate ,newBufferIdx,asyncEnd) buffers=[[Int16,...],...]:缓冲的PCM数据,为从开始录音到现在的所有pcm片段; powerLevel:当前缓冲的音量级别0-100, bufferDuration:已缓冲时长, bufferSampleRate:缓冲使用的采样率(当type支持边录边转码(Worker)时,此采样率和设置的采样率相同,否则不一定相同); newBufferIdx:本次回调新增的buffer起始索引; asyncEnd:fn() 如果onProcess是异步的(返回值为true时),处理完成时需要调用此回调,如果不是异步的请忽略此参数,此方法回调时必须是真异步(不能真异步时需用setTimeout包裹)。 onProcess返回值:如果返回true代表开启异步模式,在某些大量运算的场合异步是必须的,必须在异步处理完成时调用asyncEnd(不能真异步时需用setTimeout包裹),在onProcess执行后新增的buffer会全部替换成空数组,因此本回调开头应立即将newBufferIdx到本次回调结尾位置的buffer全部保存到另外一个数组内,处理完成后写回buffers中本次回调的结尾位置。 |
sourceStream | MediaStream Object | 可选直接提供一个媒体流,从这个流中录制、实时处理音频数据(当前Recorder实例独享此流);不提供时为普通的麦克风录音,由getUserMedia提供音频流(所有Recorder实例共享同一个流) | |
runningContext | AudioContext | 可选提供一个state为running状态的AudioContext对象(ctx);默认会在rec.open时自动创建一个新的ctx,无用户操作(触摸、点击等)时调用rec.open的ctx.state可能为suspended,会在rec.start时尝试进行ctx.resume,如果也无用户操作ctx.resume可能不会恢复成running状态(目前仅iOS上有此兼容性问题),导致无法去读取媒体流,这时请提前在用户操作时调用Recorder.GetContext(true)来得到一个running状态AudioContext(用完需调用CloseNewCtx(ctx)关闭) | |
audioTrackSet | Object | 普通麦克风录音时getUserMedia方法的audio配置参数,比如指定设备id,回声消除、降噪开关;注意:提供的任何配置值都不一定会生效<br>由于麦克风是全局共享的,所以新配置后需要close掉以前的再重新open<br>更多参考: [MediaTrackConstraints - Web APIs | MDN](https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints "MediaTrackConstraints - Web APIs | |
disableEnvInFix | Boolean | false | 内部参数,禁用设备卡顿时音频输入丢失补偿功能 |
takeoffEncodeChunk | Function | NOOP | fn(chunkBytes[Uint8,...]) :bool?null:{} true: 使用该方法,编码器实时编码出音频数据时,将通过回调函数takeoffEncodeChunk 输出,而不是存储后stop 一次性输出。可以实时将编码出来的音频数据上传(发送)到服务器,适用于需要实时处理或存储音频数据的场景。 false: ,编码器内部将存储生成的音频数据,最终在调用stop 方法时返回一个包含音频数据的blob 。 提供此回调方法时,将接管编码器的数据输出,编码器内部将放弃存储生成的音频数据;如果当前编码器或环境不支持实时编码处理,将在open时直接走fail逻辑<br>因此提供此回调后调用stop方法将无法获得有效的音频数据,因为编码器内没有音频数据,因此stop时返回的blob将是一个字节长度为0的blob<br>大部分录音格式编码器都支持实时编码(边录边转码),比如mp3格式:会实时的将编码出来的mp3片段通过此方法回调,所有的chunkBytes拼接到一起即为完整的mp3,此种拼接的结果比mock方法实时生成的音质更加,因为天然避免了首尾的静默<br>不支持实时编码的录音格式不可以提供此回调(wav格式不支持,因为wav文件头中需要提供文件最终长度),提供了将在open时直接走fail逻辑 |
三 功能的使用
RecordApp中config提供统一的实现接口:
3.1 请求录音权限
javascript
RequestPermission:fn(sid,success,fail) 实现录音权限请求,通过回调函数返回结果
success:fn() 有权限时回调
fail:fn(errMsg,isUserNotAllow) 没有权限或者不能录音时回调,如果是用户主动拒绝的录音权限,除了有错误消息外,isUserNotAllow=true,方便程序中做不同的提示,提升用户主动授权概率
3.2 开始录音
javascript
Start:fn(sid,set,success,fail) 实现开始录音
set:{} 和Recorder的set大部分参数相同
success:fn() 打开录音时回调
fail:fn(errMsg) 开启录音出错时回调
3.3 停止录音
javascript
Stop:fn(sid,success,fail) 实现结束录音,返回结果,success参数=null时仅清理资源
success:fn(arrayBuffer,duration,mime) 成功完成录音回调,参数可能为null
arrayBuffer:ArrayBuffer 录音数据
duration:123 //录音数据持续时间
mime:"audio/mp3" 录音数据格式
fail:fn(errMsg) 录音出错时回调
3.4 其他接口
javascript
{
Support: fn( call(canUse) ) 判断此平台是否支持或开启,如果平台可用需回调call(true)选择使用这个平台,并忽略其他平台
CanProcess: fn() 此平台是否支持实时回调,返回true代表支持
Install: fn( success(),fail(errMsg) ) 可选,平台初始化安装,当使用此平台时会执行一次本方法(同一时间只会有一次调用,没有并发调用问题)
Pause: fn() 可选,暂停录音实现,如果返回false将执行默认暂停操作
Resume: fn() 可选,继续录音实现,如果返回false将执行默认继续操作
下面的方法中sid用于同步操作,在异步回调中用App.__Sync判断此sid是否处于同步状态
实现中使用到的Recorder实例需赋值给App.__Rec(Stop结束后会自动清理并赋值为null)
Start_Check:fn(set) 可选,调用本实现的Start前执行环境检查,返回检查错误文本,如果返回false将执行默认检查操作
AllStart_Clean:fn(set) 可选,任何实现的Start前执行本配置清理,set里面可能为了兼容不同平台环境会传入额外的参数,可以进行清理,无返回值
}
四 、使用
4.1 开始录音实例
start的set参数上面自己看哈,takeoffEncodeChunk启用的话会在录制实时收集录音片段,大概是可以实时传送数据哈,避免Stop的时候一口气发送大文件。
我要录制完毕再发送就不启用了。
javascript
data:{
takeoffEncodeChunkSet:false//是否实时接收到编码器编码出来的音频片段数据
}
method:{
startRecording() {
this.takeEcChunks=this.takeoffEncodeChunkSet?[]:null;
const options = {
type: 'mp3',
sampleRate: 16000,
bitRate: 16,
onProcess: (buffers, powerLevel, duration, sampleRate, newBufferIdx, asyncEnd) => {
if (this.waveView) {
this.waveView.input(buffers[buffers.length - 1], powerLevel, sampleRate);
}
},
// 可不启用
takeoffEncodeChunk:!this.takeoffEncodeChunkSet?null:(chunkBytes)=>{
takeEcCount++; takeEcSize+=chunkBytes.byteLength;
this.takeoffEncodeChunkMsg="已接收到"+takeEcCount+"块,共"+takeEcSize+"字节";
this.takeEcChunks.push(chunkBytes);
}
};
}
}
4.2 请求录音权限
比如可以在权限请求成功:
回调"开始录音"
权限请求失败:
回调返回错误信息。
示例:
javascript
RecordApp.RequestPermission(() => {
console.log("已经获取权限!");
this.startRecording();
},
(msg, isUserNotAllow) => {
if (isUserNotAllow) {
// 引导用户开启录音权限
}
else {
console.error("请求录音权限失败:" + msg);
}});
4.3 停止录音------文件的下载与上传
1.如果你启用了takeoffEncodeChunk,那么成功回调就可以选择不用写了,为null,因为音频数据录制的时候它已经处理了。
javascript
RecordApp.Stop(
null //success传null就只会清理资源,不会进行转码
,(msg)=>{
this.reclog("已清理,错误信息:"+msg);
}
);
若是想要录制完毕后再如果没有设置则应将null替换为以下二者之一:
javascript
RecordApp.Stop((aBuf,duration,mime)=>{
//如果是H5环境,也可以直接构造成Blob/File文件对象,和Recorder使用一致
// #ifdef H5
var blob=new Blob([arrayBuffer],{type:mime});
console.log(blob, (window.URL||webkitURL).createObjectURL(blob));
var file=new File([arrayBuffer],"recorder.mp3");
//uni.uploadFile({file:file, ...}) //参考demo中的test_upload_saveFile.vue
// #endif
//如果是App、小程序环境,可以直接保存到本地文件,然后调用相关网络接口上传
// #ifdef APP || MP-WEIXIN
RecordApp.UniSaveLocalFile("recorder.mp3",arrayBuffer,(savePath)=>{
console.log(savePath); //app保存的文件夹为`plus.io.PUBLIC_DOWNLOADS`,小程序为 `wx.env.USER_DATA_PATH` 路径
//uni.uploadFile({filePath:savePath, ...}) //参考demo中的test_upload_saveFile.vue
},(errMsg)=>{ console.error(errMsg) });
// #endif
}
,(msg)=>{
this.reclog("已清理,错误信息:"+msg);
}
);
我选择是水灵灵的把aBuf传给后端了
javascript
//全平台通用:aBuf是ArrayBuffer音频文件二进制数据,可以保存成文件或者发送给服务器
uni.request({
url:"******/audio",
data:aBuf,
method:'POST',
success: (meg) => {
console.log("语音发送成功!");
console.log(meg);
}
});
后端
python
def bytes_to_audio(bytes_data, output_file, sample_width=2, sample_rate=44100, channels=2):
with wave.open(output_file, 'wb') as audio_file:
audio_file.setsampwidth(sample_width)
audio_file.setframerate(sample_rate)
audio_file.setnchannels(channels)
audio_file.writeframes(bytes_data)
@app.route("/audio",methods=['GET','POST'])
def GetAudio():
data = request.get_data() #type:bytes
with open('output2.mp3', 'wb') as f:
f.write(data)
bytes_to_audio(data,"output.wav")
return "上传成功:{}".format(type(data)), 200
可以正常播放