mirror of
https://github.com/babysor/Realtime-Voice-Clone-Chinese.git
synced 2026-07-17 11:32:07 +08:00
Web server (#94)
* Init App * init server.py (#93) * init server.py * Update requirements.txt Add requirement Co-authored-by: auau <auau@test.com> Co-authored-by: babysor00 <babysor00@gmail.com> * Run web.py！ Run web.py！ Co-authored-by: balala <Ozgay@users.noreply.github.com> Co-authored-by: auau <auau@test.com>
This commit is contained in:
Vega
2
web/static/js/eruda.min.js
vendored
Normal file
2
web/static/js/eruda.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
338
web/static/js/frequency.histogram.view.js
Normal file
338
web/static/js/frequency.histogram.view.js
Normal file
@@ -0,0 +1,338 @@
|
||||
/*
|
||||
录音 Recorder扩展，频率直方图显示
|
||||
使用本扩展需要引入lib.fft.js支持，直方图特意优化主要显示0-5khz语音部分，其他高频显示区域较小，不适合用来展示音乐频谱
|
||||
|
||||
https://github.com/xiangyuecn/Recorder
|
||||
|
||||
本扩展核心算法主要参考了Java开源库jmp123 版本0.3 的代码：
|
||||
https://www.iteye.com/topic/851459
|
||||
https://sourceforge.net/projects/jmp123/files/
|
||||
*/
|
||||
(function(){
|
||||
"use strict";
|
||||
|
||||
var FrequencyHistogramView=function(set){
|
||||
return new fn(set);
|
||||
};
|
||||
var fn=function(set){
|
||||
var This=this;
|
||||
var o={
|
||||
/*
|
||||
elem:"css selector" //自动显示到dom，并以此dom大小为显示大小
|
||||
//或者配置显示大小，手动把frequencyObj.elem显示到别的地方
|
||||
,width:0 //显示宽度
|
||||
,height:0 //显示高度
|
||||
|
||||
以上配置二选一
|
||||
*/
|
||||
|
||||
scale:2 //缩放系数，应为正整数，使用2(3? no!)倍宽高进行绘制，避免移动端绘制模糊
|
||||
|
||||
,fps:20 //绘制帧率，不可过高
|
||||
|
||||
,lineCount:30 //直方图柱子数量，数量的多少对性能影响不大，密集运算集中在FFT算法中
|
||||
,widthRatio:0.6 //柱子线条宽度占比，为所有柱子占用整个视图宽度的比例，剩下的空白区域均匀插入柱子中间；默认值也基本相当于一根柱子占0.6，一根空白占0.4；设为1不留空白，当视图不足容下所有柱子时也不留空白
|
||||
,spaceWidth:0 //柱子间空白固定基础宽度，柱子宽度自适应，当不为0时widthRatio无效，当视图不足容下所有柱子时将不会留空白，允许为负数，让柱子发生重叠
|
||||
,minHeight:0 //柱子保留基础高度，position不为±1时应该保留点高度
|
||||
,position:-1 //绘制位置，取值-1到1，-1为最底下，0为中间，1为最顶上，小数为百分比
|
||||
,mirrorEnable:false //是否启用镜像，如果启用，视图宽度会分成左右两块，右边这块进行绘制，左边这块进行镜像（以中间这根柱子的中心进行镜像）
|
||||
|
||||
,stripeEnable:true //是否启用柱子顶上的峰值小横条，position不是-1时应当关闭，否则会很丑
|
||||
,stripeHeight:3 //峰值小横条基础高度
|
||||
,stripeMargin:6 //峰值小横条和柱子保持的基础距离
|
||||
|
||||
,fallDuration:1000 //柱子从最顶上下降到最底部最长时间ms
|
||||
,stripeFallDuration:3500 //峰值小横条从最顶上下降到底部最长时间ms
|
||||
|
||||
//柱子颜色配置：[位置，css颜色，...] 位置: 取值0.0-1.0之间
|
||||
,linear:[0,"rgba(0,187,17,1)",0.5,"rgba(255,215,0,1)",1,"rgba(255,102,0,1)"]
|
||||
//峰值小横条渐变颜色配置，取值格式和linear一致，留空为柱子的渐变颜色
|
||||
,stripeLinear:null
|
||||
|
||||
,shadowBlur:0 //柱子阴影基础大小，设为0不显示阴影，如果柱子数量太多时请勿开启，非常影响性能
|
||||
,shadowColor:"#bbb" //柱子阴影颜色
|
||||
,stripeShadowBlur:-1 //峰值小横条阴影基础大小，设为0不显示阴影，-1为柱子的大小，如果柱子数量太多时请勿开启，非常影响性能
|
||||
,stripeShadowColor:"" //峰值小横条阴影颜色，留空为柱子的阴影颜色
|
||||
|
||||
//当发生绘制时会回调此方法，参数为当前绘制的频率数据和采样率，可实现多个直方图同时绘制，只消耗一个input输入和计算时间
|
||||
,onDraw:function(frequencyData,sampleRate){}
|
||||
};
|
||||
for(var k in set){
|
||||
o[k]=set[k];
|
||||
};
|
||||
This.set=set=o;
|
||||
|
||||
var elem=set.elem;
|
||||
if(elem){
|
||||
if(typeof(elem)=="string"){
|
||||
elem=document.querySelector(elem);
|
||||
}else if(elem.length){
|
||||
elem=elem[0];
|
||||
};
|
||||
};
|
||||
if(elem){
|
||||
set.width=elem.offsetWidth;
|
||||
set.height=elem.offsetHeight;
|
||||
};
|
||||
|
||||
var scale=set.scale;
|
||||
var width=set.width*scale;
|
||||
var height=set.height*scale;
|
||||
|
||||
var thisElem=This.elem=document.createElement("div");
|
||||
var lowerCss=["","transform-origin:0 0;","transform:scale("+(1/scale)+");"];
|
||||
thisElem.innerHTML='<div style="width:'+set.width+'px;height:'+set.height+'px;overflow:hidden"><div style="width:'+width+'px;height:'+height+'px;'+lowerCss.join("-webkit-")+lowerCss.join("-ms-")+lowerCss.join("-moz-")+lowerCss.join("")+'"><canvas/></div></div>';
|
||||
|
||||
var canvas=This.canvas=thisElem.querySelector("canvas");
|
||||
var ctx=This.ctx=canvas.getContext("2d");
|
||||
canvas.width=width;
|
||||
canvas.height=height;
|
||||
|
||||
if(elem){
|
||||
elem.innerHTML="";
|
||||
elem.appendChild(thisElem);
|
||||
};
|
||||
|
||||
if(!Recorder.LibFFT){
|
||||
throw new Error("需要lib.fft.js支持");
|
||||
};
|
||||
This.fft=Recorder.LibFFT(1024);
|
||||
|
||||
//柱子所在高度
|
||||
This.lastH=[];
|
||||
//峰值小横条所在高度
|
||||
This.stripesH=[];
|
||||
};
|
||||
fn.prototype=FrequencyHistogramView.prototype={
|
||||
genLinear:function(ctx,colors,from,to){
|
||||
var rtv=ctx.createLinearGradient(0,from,0,to);
|
||||
for(var i=0;i<colors.length;){
|
||||
rtv.addColorStop(colors[i++],colors[i++]);
|
||||
};
|
||||
return rtv;
|
||||
}
|
||||
,input:function(pcmData,powerLevel,sampleRate){
|
||||
var This=this;
|
||||
This.sampleRate=sampleRate;
|
||||
This.pcmData=pcmData;
|
||||
This.pcmPos=0;
|
||||
|
||||
This.inputTime=Date.now();
|
||||
This.schedule();
|
||||
}
|
||||
,schedule:function(){
|
||||
var This=this,set=This.set;
|
||||
var interval=Math.floor(1000/set.fps);
|
||||
if(!This.timer){
|
||||
This.timer=setInterval(function(){
|
||||
This.schedule();
|
||||
},interval);
|
||||
};
|
||||
|
||||
var now=Date.now();
|
||||
var drawTime=This.drawTime||0;
|
||||
if(now-This.inputTime>set.stripeFallDuration*1.3){
|
||||
//超时没有输入，顶部横条已全部落下，干掉定时器
|
||||
clearInterval(This.timer);
|
||||
This.timer=0;
|
||||
return;
|
||||
};
|
||||
if(now-drawTime<interval){
|
||||
//没到间隔时间，不绘制
|
||||
return;
|
||||
};
|
||||
This.drawTime=now;
|
||||
|
||||
//调用FFT计算频率数据
|
||||
var bufferSize=This.fft.bufferSize;
|
||||
var pcm=This.pcmData;
|
||||
var pos=This.pcmPos;
|
||||
var arr=new Int16Array(bufferSize);
|
||||
for(var i=0;i<bufferSize&&pos<pcm.length;i++,pos++){
|
||||
arr[i]=pcm[pos];
|
||||
};
|
||||
This.pcmPos=pos;
|
||||
|
||||
var frequencyData=This.fft.transform(arr);
|
||||
|
||||
//推入绘制
|
||||
This.draw(frequencyData,This.sampleRate);
|
||||
}
|
||||
,draw:function(frequencyData,sampleRate){
|
||||
var This=this,set=This.set;
|
||||
var ctx=This.ctx;
|
||||
var scale=set.scale;
|
||||
var width=set.width*scale;
|
||||
var height=set.height*scale;
|
||||
var lineCount=set.lineCount;
|
||||
var bufferSize=This.fft.bufferSize;
|
||||
|
||||
|
||||
//计算高度位置
|
||||
var position=set.position;
|
||||
var posAbs=Math.abs(set.position);
|
||||
var originY=position==1?0:height;//y轴原点
|
||||
var heightY=height;//最高的一边高度
|
||||
if(posAbs<1){
|
||||
heightY=heightY/2;
|
||||
originY=heightY;
|
||||
heightY=Math.floor(heightY*(1+posAbs));
|
||||
originY=Math.floor(position>0?originY*(1-posAbs):originY*(1+posAbs));
|
||||
};
|
||||
|
||||
var lastH=This.lastH;
|
||||
var stripesH=This.stripesH;
|
||||
var speed=Math.ceil(heightY/(set.fallDuration/(1000/set.fps)));
|
||||
var stripeSpeed=Math.ceil(heightY/(set.stripeFallDuration/(1000/set.fps)));
|
||||
var stripeMargin=set.stripeMargin*scale;
|
||||
|
||||
var Y0=1 << (Math.round(Math.log(bufferSize)/Math.log(2) + 3) << 1);
|
||||
var logY0 = Math.log(Y0)/Math.log(10);
|
||||
var dBmax=20*Math.log(0x7fff)/Math.log(10);
|
||||
|
||||
var fftSize=bufferSize/2;
|
||||
var fftSize5k=Math.min(fftSize,Math.floor(fftSize*5000/(sampleRate/2)));//5khz所在位置，8000采样率及以下最高只有4khz
|
||||
var fftSize5kIsAll=fftSize5k==fftSize;
|
||||
var line80=fftSize5kIsAll?lineCount:Math.round(lineCount*0.8);//80%的柱子位置
|
||||
var fftSizeStep1=fftSize5k/line80;
|
||||
var fftSizeStep2=fftSize5kIsAll?0:(fftSize-fftSize5k)/(lineCount-line80);
|
||||
var fftIdx=0;
|
||||
for(var i=0;i<lineCount;i++){
|
||||
//不采用jmp123的非线性划分频段，录音语音并不适用于音乐的频率，应当弱化高频部分
|
||||
//80%关注0-5khz主要人声部分 20%关注剩下的高频，这样不管什么采样率都能做到大部分频率显示一致。
|
||||
var start=Math.ceil(fftIdx);
|
||||
if(i<line80){
|
||||
//5khz以下
|
||||
fftIdx+=fftSizeStep1;
|
||||
}else{
|
||||
//5khz以上
|
||||
fftIdx+=fftSizeStep2;
|
||||
};
|
||||
var end=Math.min(Math.ceil(fftIdx),fftSize);
|
||||
|
||||
|
||||
//参考AudioGUI.java .drawHistogram方法
|
||||
|
||||
//查找当前频段的最大"幅值"
|
||||
var maxAmp=0;
|
||||
for (var j=start; j<end; j++) {
|
||||
maxAmp=Math.max(maxAmp,Math.abs(frequencyData[j]));
|
||||
};
|
||||
|
||||
//计算音量
|
||||
var dB= (maxAmp > Y0) ? Math.floor((Math.log(maxAmp)/Math.log(10) - logY0) * 17) : 0;
|
||||
var h=heightY*Math.min(dB/dBmax,1);
|
||||
|
||||
//使柱子匀速下降
|
||||
lastH[i]=(lastH[i]||0)-speed;
|
||||
if(h<lastH[i]){h=lastH[i];};
|
||||
if(h<0){h=0;};
|
||||
lastH[i]=h;
|
||||
|
||||
var shi=stripesH[i]||0;
|
||||
if(h&&h+stripeMargin>shi) {
|
||||
stripesH[i]=h+stripeMargin;
|
||||
}else{
|
||||
//使峰值小横条匀速度下落
|
||||
var sh =shi-stripeSpeed;
|
||||
if(sh < 0){sh = 0;};
|
||||
stripesH[i] = sh;
|
||||
};
|
||||
};
|
||||
|
||||
//开始绘制图形
|
||||
ctx.clearRect(0,0,width,height);
|
||||
|
||||
var linear1=This.genLinear(ctx,set.linear,originY,originY-heightY);//上半部分的填充
|
||||
var stripeLinear1=set.stripeLinear&&This.genLinear(ctx,set.stripeLinear,originY,originY-heightY)||linear1;//上半部分的峰值小横条填充
|
||||
|
||||
var linear2=This.genLinear(ctx,set.linear,originY,originY+heightY);//下半部分的填充
|
||||
var stripeLinear2=set.stripeLinear&&This.genLinear(ctx,set.stripeLinear,originY,originY+heightY)||linear2;//上半部分的峰值小横条填充
|
||||
|
||||
//计算柱子间距
|
||||
ctx.shadowBlur=set.shadowBlur*scale;
|
||||
ctx.shadowColor=set.shadowColor;
|
||||
var mirrorEnable=set.mirrorEnable;
|
||||
var mirrorCount=mirrorEnable?lineCount*2-1:lineCount;//镜像柱子数量翻一倍-1根
|
||||
|
||||
var widthRatio=set.widthRatio;
|
||||
var spaceWidth=set.spaceWidth*scale;
|
||||
if(spaceWidth!=0){
|
||||
widthRatio=(width-spaceWidth*(mirrorCount+1))/width;
|
||||
};
|
||||
|
||||
var lineWidth=Math.max(1*scale,Math.floor((width*widthRatio)/mirrorCount));//柱子宽度至少1个单位
|
||||
var spaceFloat=(width-mirrorCount*lineWidth)/(mirrorCount+1);//均匀间隔，首尾都留空，可能为负数，柱子将发生重叠
|
||||
|
||||
//绘制柱子
|
||||
var minHeight=set.minHeight*scale;
|
||||
var mirrorSubX=spaceFloat+lineWidth/2;
|
||||
var XFloat=mirrorEnable?width/2-mirrorSubX:0;//镜像时，中间柱子位于正中心
|
||||
for(var i=0,xFloat=XFloat,x,y,h;i<lineCount;i++){
|
||||
xFloat+=spaceFloat;
|
||||
x=Math.floor(xFloat);
|
||||
h=Math.max(lastH[i],minHeight);
|
||||
|
||||
//绘制上半部分
|
||||
if(originY!=0){
|
||||
y=originY-h;
|
||||
ctx.fillStyle=linear1;
|
||||
ctx.fillRect(x, y, lineWidth, h);
|
||||
};
|
||||
//绘制下半部分
|
||||
if(originY!=height){
|
||||
ctx.fillStyle=linear2;
|
||||
ctx.fillRect(x, originY, lineWidth, h);
|
||||
};
|
||||
|
||||
xFloat+=lineWidth;
|
||||
};
|
||||
|
||||
//绘制柱子顶上峰值小横条
|
||||
if(set.stripeEnable){
|
||||
var stripeShadowBlur=set.stripeShadowBlur;
|
||||
ctx.shadowBlur=(stripeShadowBlur==-1?set.shadowBlur:stripeShadowBlur)*scale;
|
||||
ctx.shadowColor=set.stripeShadowColor||set.shadowColor;
|
||||
var stripeHeight=set.stripeHeight*scale;
|
||||
for(var i=0,xFloat=XFloat,x,y,h;i<lineCount;i++){
|
||||
xFloat+=spaceFloat;
|
||||
x=Math.floor(xFloat);
|
||||
h=stripesH[i];
|
||||
|
||||
//绘制上半部分
|
||||
if(originY!=0){
|
||||
y=originY-h-stripeHeight;
|
||||
if(y<0){y=0;};
|
||||
ctx.fillStyle=stripeLinear1;
|
||||
ctx.fillRect(x, y, lineWidth, stripeHeight);
|
||||
};
|
||||
//绘制下半部分
|
||||
if(originY!=height){
|
||||
y=originY+h;
|
||||
if(y+stripeHeight>height){
|
||||
y=height-stripeHeight;
|
||||
};
|
||||
ctx.fillStyle=stripeLinear2;
|
||||
ctx.fillRect(x, y, lineWidth, stripeHeight);
|
||||
};
|
||||
|
||||
xFloat+=lineWidth;
|
||||
};
|
||||
};
|
||||
|
||||
//镜像，从中间直接镜像即可
|
||||
if(mirrorEnable){
|
||||
var srcW=Math.floor(width/2);
|
||||
ctx.save();
|
||||
ctx.scale(-1,1);
|
||||
ctx.drawImage(This.canvas,Math.ceil(width/2),0,srcW,height,-srcW,0,srcW,height);
|
||||
ctx.restore();
|
||||
};
|
||||
|
||||
set.onDraw(frequencyData,sampleRate);
|
||||
}
|
||||
};
|
||||
Recorder.FrequencyHistogramView=FrequencyHistogramView;
|
||||
|
||||
|
||||
})();
|
||||
10881
web/static/js/jquery.js
vendored
Normal file
10881
web/static/js/jquery.js
vendored
Normal file
File diff suppressed because it is too large
Load Diff
111
web/static/js/lib.fft.js
Normal file
111
web/static/js/lib.fft.js
Normal file
@@ -0,0 +1,111 @@
|
||||
/*
|
||||
时域转频域，快速傅里叶变换(FFT)
|
||||
https://github.com/xiangyuecn/Recorder
|
||||
|
||||
var fft=Recorder.LibFFT(bufferSize)
|
||||
bufferSize取值2的n次方
|
||||
|
||||
fft.bufferSize 实际采用的bufferSize
|
||||
fft.transform(inBuffer)
|
||||
inBuffer:[Int16,...] 数组长度必须是bufferSize
|
||||
返回[Float64(Long),...]，长度为bufferSize/2
|
||||
*/
|
||||
|
||||
/*
|
||||
从FFT.java 移植，Java开源库：jmp123 版本0.3
|
||||
https://www.iteye.com/topic/851459
|
||||
https://sourceforge.net/projects/jmp123/files/
|
||||
*/
|
||||
Recorder.LibFFT=function(bufferSize){
|
||||
"use strict";
|
||||
|
||||
var FFT_N_LOG,FFT_N,MINY;
|
||||
var real, imag, sintable, costable;
|
||||
var bitReverse;
|
||||
|
||||
var FFT_Fn=function(bufferSize) {//bufferSize只能取值2的n次方
|
||||
FFT_N_LOG=Math.round(Math.log(bufferSize)/Math.log(2));
|
||||
FFT_N = 1 << FFT_N_LOG;
|
||||
MINY = ((FFT_N << 2) * Math.sqrt(2));
|
||||
|
||||
real = [];
|
||||
imag = [];
|
||||
sintable = [0];
|
||||
costable = [0];
|
||||
bitReverse = [];
|
||||
|
||||
var i, j, k, reve;
|
||||
for (i = 0; i < FFT_N; i++) {
|
||||
k = i;
|
||||
for (j = 0, reve = 0; j != FFT_N_LOG; j++) {
|
||||
reve <<= 1;
|
||||
reve |= (k & 1);
|
||||
k >>>= 1;
|
||||
}
|
||||
bitReverse[i] = reve;
|
||||
}
|
||||
|
||||
var theta, dt = 2 * Math.PI / FFT_N;
|
||||
for (i = (FFT_N >> 1) - 1; i > 0; i--) {
|
||||
theta = i * dt;
|
||||
costable[i] = Math.cos(theta);
|
||||
sintable[i] = Math.sin(theta);
|
||||
}
|
||||
}
|
||||
|
||||
/*
|
||||
用于频谱显示的快速傅里叶变换
|
||||
inBuffer 输入FFT_N个实数，返回 FFT_N/2个输出值(复数模的平方)。
|
||||
*/
|
||||
var getModulus=function(inBuffer) {
|
||||
var i, j, k, ir, j0 = 1, idx = FFT_N_LOG - 1;
|
||||
var cosv, sinv, tmpr, tmpi;
|
||||
for (i = 0; i != FFT_N; i++) {
|
||||
real[i] = inBuffer[bitReverse[i]];
|
||||
imag[i] = 0;
|
||||
}
|
||||
|
||||
for (i = FFT_N_LOG; i != 0; i--) {
|
||||
for (j = 0; j != j0; j++) {
|
||||
cosv = costable[j << idx];
|
||||
sinv = sintable[j << idx];
|
||||
for (k = j; k < FFT_N; k += j0 << 1) {
|
||||
ir = k + j0;
|
||||
tmpr = cosv * real[ir] - sinv * imag[ir];
|
||||
tmpi = cosv * imag[ir] + sinv * real[ir];
|
||||
real[ir] = real[k] - tmpr;
|
||||
imag[ir] = imag[k] - tmpi;
|
||||
real[k] += tmpr;
|
||||
imag[k] += tmpi;
|
||||
}
|
||||
}
|
||||
j0 <<= 1;
|
||||
idx--;
|
||||
}
|
||||
|
||||
j = FFT_N >> 1;
|
||||
var outBuffer=new Float64Array(j);
|
||||
/*
|
||||
* 输出模的平方:
|
||||
* for(i = 1; i <= j; i++)
|
||||
* inBuffer[i-1] = real[i] * real[i] + imag[i] * imag[i];
|
||||
*
|
||||
* 如果FFT只用于频谱显示,可以"淘汰"幅值较小的而减少浮点乘法运算. MINY的值
|
||||
* 和Spectrum.Y0,Spectrum.logY0对应.
|
||||
*/
|
||||
sinv = MINY;
|
||||
cosv = -MINY;
|
||||
for (i = j; i != 0; i--) {
|
||||
tmpr = real[i];
|
||||
tmpi = imag[i];
|
||||
if (tmpr > cosv && tmpr < sinv && tmpi > cosv && tmpi < sinv)
|
||||
outBuffer[i - 1] = 0;
|
||||
else
|
||||
outBuffer[i - 1] = Math.round(tmpr * tmpr + tmpi * tmpi);
|
||||
}
|
||||
return outBuffer;
|
||||
}
|
||||
|
||||
FFT_Fn(bufferSize);
|
||||
return {transform:getModulus,bufferSize:FFT_N};
|
||||
};
|
||||
14173
web/static/js/mp3-engine.js
Normal file
14173
web/static/js/mp3-engine.js
Normal file
File diff suppressed because it is too large
Load Diff
424
web/static/js/mp3.js
Normal file
424
web/static/js/mp3.js
Normal file
@@ -0,0 +1,424 @@
|
||||
/*
|
||||
mp3编码器，需带上mp3-engine.js引擎使用
|
||||
https://github.com/xiangyuecn/Recorder
|
||||
|
||||
当然最佳推荐使用mp3、wav格式，代码也是优先照顾这两种格式
|
||||
浏览器支持情况
|
||||
https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
|
||||
*/
|
||||
(function(){
|
||||
"use strict";
|
||||
|
||||
Recorder.prototype.enc_mp3={
|
||||
stable:true
|
||||
,testmsg:"采样率范围48000, 44100, 32000, 24000, 22050, 16000, 12000, 11025, 8000"
|
||||
};
|
||||
|
||||
|
||||
|
||||
//*******标准UI线程转码支持函数************
|
||||
|
||||
Recorder.prototype.mp3=function(res,True,False){
|
||||
var This=this,set=This.set,size=res.length;
|
||||
|
||||
//优先采用worker编码，太低版本下面用老方法提供兼容
|
||||
var ctx=This.mp3_start(set);
|
||||
if(ctx){
|
||||
This.mp3_encode(ctx,res);
|
||||
This.mp3_complete(ctx,True,False,1);
|
||||
return;
|
||||
};
|
||||
|
||||
//https://github.com/wangpengfei15975/recorder.js
|
||||
//https://github.com/zhuker/lamejs bug:采样率必须和源一致，不然8k时没有声音，有问题fix：https://github.com/zhuker/lamejs/pull/11
|
||||
var mp3=new Recorder.lamejs.Mp3Encoder(1,set.sampleRate,set.bitRate);
|
||||
|
||||
var blockSize=57600;
|
||||
var data=[];
|
||||
|
||||
var idx=0,mp3Size=0;
|
||||
var run=function(){
|
||||
if(idx<size){
|
||||
var buf=mp3.encodeBuffer(res.subarray(idx,idx+blockSize));
|
||||
if(buf.length>0){
|
||||
mp3Size+=buf.buffer.byteLength;
|
||||
data.push(buf.buffer);
|
||||
};
|
||||
idx+=blockSize;
|
||||
setTimeout(run);//尽量避免卡ui
|
||||
}else{
|
||||
var buf=mp3.flush();
|
||||
if(buf.length>0){
|
||||
mp3Size+=buf.buffer.byteLength;
|
||||
data.push(buf.buffer);
|
||||
};
|
||||
|
||||
//去掉开头的标记信息帧
|
||||
var meta=mp3TrimFix.fn(data,mp3Size,size,set.sampleRate);
|
||||
mp3TrimFixSetMeta(meta,set);
|
||||
|
||||
True(new Blob(data,{type:"audio/mp3"}));
|
||||
};
|
||||
};
|
||||
run();
|
||||
}
|
||||
|
||||
|
||||
//********边录边转码(Worker)支持函数，如果提供就代表可能支持，否则只支持标准转码*********
|
||||
|
||||
//全局共享一个Worker，后台串行执行。如果每次都开一个新的，编码速度可能会慢很多，可能是浏览器运行缓存的因素，并且可能瞬间产生多个并行操作占用大量cpu
|
||||
var mp3Worker;
|
||||
Recorder.BindDestroy("mp3Worker",function(){
|
||||
console.log("mp3Worker Destroy");
|
||||
mp3Worker&&mp3Worker.terminate();
|
||||
mp3Worker=null;
|
||||
});
|
||||
|
||||
|
||||
Recorder.prototype.mp3_envCheck=function(envInfo,set){//检查环境下配置是否可用
|
||||
var errMsg="";
|
||||
//需要实时编码返回数据，此时需要检查环境是否有实时特性、和是否可实时编码
|
||||
if(set.takeoffEncodeChunk){
|
||||
if(!envInfo.canProcess){
|
||||
errMsg=envInfo.envName+"环境不支持实时处理";
|
||||
}else if(!newContext()){//浏览器不能创建实时编码环境
|
||||
errMsg="当前浏览器版本太低，无法实时处理";
|
||||
};
|
||||
};
|
||||
return errMsg;
|
||||
};
|
||||
Recorder.prototype.mp3_start=function(set){//如果返回null代表不支持
|
||||
return newContext(set);
|
||||
};
|
||||
var openList={id:0};
|
||||
var newContext=function(setOrNull){
|
||||
var worker=mp3Worker;
|
||||
try{
|
||||
if(!worker){
|
||||
var onmsg=function(e){
|
||||
var ed=e.data;
|
||||
var cur=wk_ctxs[ed.id];
|
||||
if(ed.action=="init"){
|
||||
wk_ctxs[ed.id]={
|
||||
sampleRate:ed.sampleRate
|
||||
,bitRate:ed.bitRate
|
||||
,takeoff:ed.takeoff
|
||||
|
||||
,mp3Size:0
|
||||
,pcmSize:0
|
||||
,encArr:[]
|
||||
,encObj:new wk_lame.Mp3Encoder(1,ed.sampleRate,ed.bitRate)
|
||||
};
|
||||
}else if(!cur){
|
||||
return;
|
||||
};
|
||||
|
||||
switch(ed.action){
|
||||
case "stop":
|
||||
cur.encObj=null;
|
||||
delete wk_ctxs[ed.id];
|
||||
break;
|
||||
case "encode":
|
||||
cur.pcmSize+=ed.pcm.length;
|
||||
var buf=cur.encObj.encodeBuffer(ed.pcm);
|
||||
if(buf.length>0){
|
||||
if(cur.takeoff){
|
||||
self.postMessage({action:"takeoff",id:ed.id,chunk:buf});
|
||||
}else{
|
||||
cur.mp3Size+=buf.buffer.byteLength;
|
||||
cur.encArr.push(buf.buffer);
|
||||
};
|
||||
};
|
||||
break;
|
||||
case "complete":
|
||||
var buf=cur.encObj.flush();
|
||||
if(buf.length>0){
|
||||
if(cur.takeoff){
|
||||
self.postMessage({action:"takeoff",id:ed.id,chunk:buf});
|
||||
}else{
|
||||
cur.mp3Size+=buf.buffer.byteLength;
|
||||
cur.encArr.push(buf.buffer);
|
||||
};
|
||||
};
|
||||
|
||||
//去掉开头的标记信息帧
|
||||
var meta=wk_mp3TrimFix.fn(cur.encArr,cur.mp3Size,cur.pcmSize,cur.sampleRate);
|
||||
|
||||
self.postMessage({
|
||||
action:ed.action
|
||||
,id:ed.id
|
||||
,blob:new Blob(cur.encArr,{type:"audio/mp3"})
|
||||
,meta:meta
|
||||
});
|
||||
break;
|
||||
};
|
||||
};
|
||||
|
||||
//创建一个新Worker
|
||||
var jsCode=");wk_lame();var wk_ctxs={};self.onmessage="+onmsg;
|
||||
jsCode+=";var wk_mp3TrimFix={rm:"+mp3TrimFix.rm+",fn:"+mp3TrimFix.fn+"}";
|
||||
|
||||
var lamejsCode=Recorder.lamejs.toString();
|
||||
var url=(window.URL||webkitURL).createObjectURL(new Blob(["var wk_lame=(",lamejsCode,jsCode], {type:"text/javascript"}));
|
||||
|
||||
worker=new Worker(url);
|
||||
setTimeout(function(){
|
||||
(window.URL||webkitURL).revokeObjectURL(url);//必须要释放，不然每次调用内存都明显泄露内存
|
||||
},10000);//chrome 83 file协议下如果直接释放，将会使WebWorker无法启动
|
||||
|
||||
worker.onmessage=function(e){
|
||||
var data=e.data;
|
||||
var ctx=openList[data.id];
|
||||
if(ctx){
|
||||
if(data.action=="takeoff"){
|
||||
//取走实时生成的mp3数据
|
||||
ctx.set.takeoffEncodeChunk(new Uint8Array(data.chunk.buffer));
|
||||
}else{
|
||||
//complete
|
||||
ctx.call&&ctx.call(data);
|
||||
ctx.call=null;
|
||||
};
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
var ctx={worker:worker,set:setOrNull,takeoffQueue:[]};
|
||||
if(setOrNull){
|
||||
ctx.id=++openList.id;
|
||||
openList[ctx.id]=ctx;
|
||||
|
||||
worker.postMessage({
|
||||
action:"init"
|
||||
,id:ctx.id
|
||||
,sampleRate:setOrNull.sampleRate
|
||||
,bitRate:setOrNull.bitRate
|
||||
,takeoff:!!setOrNull.takeoffEncodeChunk
|
||||
|
||||
,x:new Int16Array(5)//低版本浏览器不支持序列化TypedArray
|
||||
});
|
||||
}else{
|
||||
worker.postMessage({
|
||||
x:new Int16Array(5)//低版本浏览器不支持序列化TypedArray
|
||||
});
|
||||
};
|
||||
|
||||
|
||||
mp3Worker=worker;
|
||||
return ctx;
|
||||
}catch(e){//出错了就不要提供了
|
||||
worker&&worker.terminate();
|
||||
|
||||
console.error(e);
|
||||
return null;
|
||||
};
|
||||
};
|
||||
Recorder.prototype.mp3_stop=function(startCtx){
|
||||
if(startCtx&&startCtx.worker){
|
||||
startCtx.worker.postMessage({
|
||||
action:"stop"
|
||||
,id:startCtx.id
|
||||
});
|
||||
startCtx.worker=null;
|
||||
delete openList[startCtx.id];
|
||||
|
||||
//疑似泄露检测 排除id
|
||||
var opens=-1;
|
||||
for(var k in openList){
|
||||
opens++;
|
||||
};
|
||||
if(opens){
|
||||
console.warn("mp3 worker剩"+opens+"个在串行等待");
|
||||
};
|
||||
};
|
||||
};
|
||||
Recorder.prototype.mp3_encode=function(startCtx,pcm){
|
||||
if(startCtx&&startCtx.worker){
|
||||
startCtx.worker.postMessage({
|
||||
action:"encode"
|
||||
,id:startCtx.id
|
||||
,pcm:pcm
|
||||
});
|
||||
};
|
||||
};
|
||||
Recorder.prototype.mp3_complete=function(startCtx,True,False,autoStop){
|
||||
var This=this;
|
||||
if(startCtx&&startCtx.worker){
|
||||
startCtx.call=function(data){
|
||||
mp3TrimFixSetMeta(data.meta,startCtx.set);
|
||||
True(data.blob);
|
||||
|
||||
if(autoStop){
|
||||
This.mp3_stop(startCtx);
|
||||
};
|
||||
};
|
||||
startCtx.worker.postMessage({
|
||||
action:"complete"
|
||||
,id:startCtx.id
|
||||
});
|
||||
}else{
|
||||
False("mp3编码器未打开");
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
//*******辅助函数************
|
||||
|
||||
/*读取lamejs编码出来的mp3信息，只能读特定格式，如果读取失败返回null
|
||||
mp3Buffers=[ArrayBuffer,...]
|
||||
length=mp3Buffers的数据二进制总长度
|
||||
*/
|
||||
Recorder.mp3ReadMeta=function(mp3Buffers,length){
|
||||
//kill babel-polyfill ES6 Number.parseInt 不然放到Worker里面找不到方法
|
||||
var parseInt_ES3=typeof(window)=="object"?window.parseInt:self.parseInt;
|
||||
|
||||
var u8arr0=new Uint8Array(mp3Buffers[0]||[]);
|
||||
if(u8arr0.length<4){
|
||||
return null;
|
||||
};
|
||||
var byteAt=function(idx,u8){
|
||||
return ("0000000"+((u8||u8arr0)[idx]||0).toString(2)).substr(-8);
|
||||
};
|
||||
var b2=byteAt(0)+byteAt(1);
|
||||
var b4=byteAt(2)+byteAt(3);
|
||||
|
||||
if(!/^1{11}/.test(b2)){//未发现帧同步
|
||||
return null;
|
||||
};
|
||||
var version=({"00":2.5,"10":2,"11":1})[b2.substr(11,2)];
|
||||
var layer=({"01":3})[b2.substr(13,2)];//仅支持Layer3
|
||||
var sampleRate=({ //lamejs -> Tables.samplerate_table
|
||||
"1":[44100, 48000, 32000]
|
||||
,"2":[22050, 24000, 16000]
|
||||
,"2.5":[11025, 12000, 8000]
|
||||
})[version];
|
||||
sampleRate&&(sampleRate=sampleRate[parseInt_ES3(b4.substr(4,2),2)]);
|
||||
var bitRate=[ //lamejs -> Tables.bitrate_table
|
||||
[0, 8, 16, 24, 32, 40, 48, 56, 64, 80, 96, 112, 128, 144, 160] //MPEG 2 2.5
|
||||
,[0, 32, 40, 48, 56, 64, 80, 96, 112, 128, 160, 192, 224, 256, 320]//MPEG 1
|
||||
][version==1?1:0][parseInt_ES3(b4.substr(0,4),2)];
|
||||
|
||||
if(!version || !layer || !bitRate || !sampleRate){
|
||||
return null;
|
||||
};
|
||||
|
||||
var duration=Math.round(length*8/bitRate);
|
||||
var frame=layer==1?384:layer==2?1152:version==1?1152:576;
|
||||
var frameDurationFloat=frame/sampleRate*1000;
|
||||
var frameSize=Math.floor((frame*bitRate)/8/sampleRate*1000);
|
||||
|
||||
//检测是否存在Layer3帧填充1字节。这里只获取第二帧的填充信息，首帧永远没有填充。其他帧可能隔一帧出现一个填充，或者隔很多帧出现一个填充；目测是取决于frameSize未舍入时的小数部分，因为有些采样率的frameSize会出现小数（11025、22050、44100 典型的除不尽），然后字节数无法表示这种小数，就通过一定步长来填充弥补小数部分丢失
|
||||
var hasPadding=0,seek=0;
|
||||
for(var i=0;i<mp3Buffers.length;i++){
|
||||
//寻找第二帧
|
||||
var buf=mp3Buffers[i];
|
||||
seek+=buf.byteLength;
|
||||
if(seek>=frameSize+3){
|
||||
var buf8=new Uint8Array(buf);
|
||||
var idx=buf.byteLength-(seek-(frameSize+3)+1);
|
||||
var ib4=byteAt(idx,buf8);
|
||||
hasPadding=ib4.charAt(6)=="1";
|
||||
break;
|
||||
};
|
||||
};
|
||||
if(hasPadding){
|
||||
frameSize++;
|
||||
};
|
||||
|
||||
|
||||
return {
|
||||
version:version //1 2 2.5 -> MPEG1 MPEG2 MPEG2.5
|
||||
,layer:layer//3 -> Layer3
|
||||
,sampleRate:sampleRate //采样率 hz
|
||||
,bitRate:bitRate //比特率 kbps
|
||||
|
||||
,duration:duration //音频时长 ms
|
||||
,size:length //总长度 byte
|
||||
,hasPadding:hasPadding //是否存在1字节填充，首帧永远没有，这个值其实代表的第二帧是否有填充，并不代表其他帧的
|
||||
,frameSize:frameSize //每帧最大长度，含可能存在的1字节padding byte
|
||||
,frameDurationFloat:frameDurationFloat //每帧时长，含小数 ms
|
||||
};
|
||||
};
|
||||
|
||||
//去掉lamejs开头的标记信息帧，免得mp3解码出来的时长比pcm的长太多
|
||||
var mp3TrimFix={//minfiy keep name
|
||||
rm:Recorder.mp3ReadMeta
|
||||
,fn:function(mp3Buffers,length,pcmLength,pcmSampleRate){
|
||||
var meta=this.rm(mp3Buffers,length);
|
||||
if(!meta){
|
||||
return {err:"mp3非预定格式"};
|
||||
};
|
||||
var pcmDuration=Math.round(pcmLength/pcmSampleRate*1000);
|
||||
|
||||
//开头多出这么多帧，移除掉；正常情况下最多为2帧
|
||||
var num=Math.floor((meta.duration-pcmDuration)/meta.frameDurationFloat);
|
||||
if(num>0){
|
||||
var size=num*meta.frameSize-(meta.hasPadding?1:0);//首帧没有填充，第二帧可能有填充，这里假设最多为2帧（测试并未出现3帧以上情况），其他帧不管，就算出现了并且导致了错误后面自动容错
|
||||
length-=size;
|
||||
var arr0=0,arrs=[];
|
||||
for(var i=0;i<mp3Buffers.length;i++){
|
||||
var arr=mp3Buffers[i];
|
||||
if(size<=0){
|
||||
break;
|
||||
};
|
||||
if(size>=arr.byteLength){
|
||||
size-=arr.byteLength;
|
||||
arrs.push(arr);
|
||||
mp3Buffers.splice(i,1);
|
||||
i--;
|
||||
}else{
|
||||
mp3Buffers[i]=arr.slice(size);
|
||||
arr0=arr;
|
||||
size=0;
|
||||
};
|
||||
};
|
||||
var checkMeta=this.rm(mp3Buffers,length);
|
||||
if(!checkMeta){
|
||||
//还原变更，应该不太可能会出现
|
||||
arr0&&(mp3Buffers[0]=arr0);
|
||||
for(var i=0;i<arrs.length;i++){
|
||||
mp3Buffers.splice(i,0,arrs[i]);
|
||||
};
|
||||
meta.err="fix后数据错误，已还原，错误原因不明";
|
||||
};
|
||||
|
||||
var fix=meta.trimFix={};
|
||||
fix.remove=num;
|
||||
fix.removeDuration=Math.round(num*meta.frameDurationFloat);
|
||||
fix.duration=Math.round(length*8/meta.bitRate);
|
||||
};
|
||||
return meta;
|
||||
}
|
||||
};
|
||||
var mp3TrimFixSetMeta=function(meta,set){
|
||||
var tag="MP3信息 ";
|
||||
if(meta.sampleRate&&meta.sampleRate!=set.sampleRate || meta.bitRate&&meta.bitRate!=set.bitRate){
|
||||
console.warn(tag+"和设置的不匹配set:"+set.bitRate+"kbps "+set.sampleRate+"hz，已更新set:"+meta.bitRate+"kbps "+meta.sampleRate+"hz",set);
|
||||
set.sampleRate=meta.sampleRate;
|
||||
set.bitRate=meta.bitRate;
|
||||
};
|
||||
|
||||
var trimFix=meta.trimFix;
|
||||
if(trimFix){
|
||||
tag+="Fix移除"+trimFix.remove+"帧"+trimFix.removeDuration+"ms -> "+trimFix.duration+"ms";
|
||||
if(trimFix.remove>2){
|
||||
meta.err=(meta.err?meta.err+", ":"")+"移除帧数过多";
|
||||
};
|
||||
}else{
|
||||
tag+=(meta.duration||"-")+"ms";
|
||||
};
|
||||
|
||||
if(meta.err){
|
||||
console.error(tag,meta.err,meta);
|
||||
}else{
|
||||
console.log(tag,meta);
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
|
||||
})();
|
||||
950
web/static/js/recorder-core.js
Normal file
950
web/static/js/recorder-core.js
Normal file
@@ -0,0 +1,950 @@
|
||||
/*
|
||||
录音
|
||||
https://github.com/xiangyuecn/Recorder
|
||||
*/
|
||||
(function(factory){
|
||||
factory(window);
|
||||
//umd returnExports.js
|
||||
if(typeof(define)=='function' && define.amd){
|
||||
define(function(){
|
||||
return Recorder;
|
||||
});
|
||||
};
|
||||
if(typeof(module)=='object' && module.exports){
|
||||
module.exports=Recorder;
|
||||
};
|
||||
}(function(window){
|
||||
"use strict";
|
||||
|
||||
//兼容环境
|
||||
var LM="2021-08-03 20:01:03";
|
||||
var NOOP=function(){};
|
||||
//end 兼容环境 ****从以下开始copy源码*****
|
||||
|
||||
var Recorder=function(set){
|
||||
return new initFn(set);
|
||||
};
|
||||
//是否已经打开了全局的麦克风录音，所有工作都已经准备好了，就等接收音频数据了
|
||||
Recorder.IsOpen=function(){
|
||||
var stream=Recorder.Stream;
|
||||
if(stream){
|
||||
var tracks=stream.getTracks&&stream.getTracks()||stream.audioTracks||[];
|
||||
var track=tracks[0];
|
||||
if(track){
|
||||
var state=track.readyState;
|
||||
return state=="live"||state==track.LIVE;
|
||||
};
|
||||
};
|
||||
return false;
|
||||
};
|
||||
/*H5录音时的AudioContext缓冲大小。会影响H5录音时的onProcess调用速率，相对于AudioContext.sampleRate=48000时，4096接近12帧/s，调节此参数可生成比较流畅的回调动画。
|
||||
取值256, 512, 1024, 2048, 4096, 8192, or 16384
|
||||
注意，取值不能过低，2048开始不同浏览器可能回调速率跟不上造成音质问题。
|
||||
一般无需调整，调整后需要先close掉已打开的录音，再open时才会生效。
|
||||
*/
|
||||
Recorder.BufferSize=4096;
|
||||
//销毁已持有的所有全局资源，当要彻底移除Recorder时需要显式的调用此方法
|
||||
Recorder.Destroy=function(){
|
||||
CLog("Recorder Destroy");
|
||||
Disconnect();//断开可能存在的全局Stream、资源
|
||||
|
||||
for(var k in DestroyList){
|
||||
DestroyList[k]();
|
||||
};
|
||||
};
|
||||
var DestroyList={};
|
||||
//登记一个需要销毁全局资源的处理方法
|
||||
Recorder.BindDestroy=function(key,call){
|
||||
DestroyList[key]=call;
|
||||
};
|
||||
//判断浏览器是否支持录音，随时可以调用。注意：仅仅是检测浏览器支持情况，不会判断和调起用户授权，不会判断是否支持特定格式录音。
|
||||
Recorder.Support=function(){
|
||||
var AC=window.AudioContext;
|
||||
if(!AC){
|
||||
AC=window.webkitAudioContext;
|
||||
};
|
||||
if(!AC){
|
||||
return false;
|
||||
};
|
||||
var scope=navigator.mediaDevices||{};
|
||||
if(!scope.getUserMedia){
|
||||
scope=navigator;
|
||||
scope.getUserMedia||(scope.getUserMedia=scope.webkitGetUserMedia||scope.mozGetUserMedia||scope.msGetUserMedia);
|
||||
};
|
||||
if(!scope.getUserMedia){
|
||||
return false;
|
||||
};
|
||||
|
||||
Recorder.Scope=scope;
|
||||
if(!Recorder.Ctx||Recorder.Ctx.state=="closed"){
|
||||
//不能反复构造，低版本number of hardware contexts reached maximum (6)
|
||||
Recorder.Ctx=new AC();
|
||||
|
||||
Recorder.BindDestroy("Ctx",function(){
|
||||
var ctx=Recorder.Ctx;
|
||||
if(ctx&&ctx.close){//能关掉就关掉，关不掉就保留着
|
||||
ctx.close();
|
||||
Recorder.Ctx=0;
|
||||
};
|
||||
});
|
||||
};
|
||||
return true;
|
||||
};
|
||||
/*初始化H5音频采集连接。如果自行提供了sourceStream将只进行一次简单的连接处理。如果是普通麦克风录音，此时的Stream是全局的，Safari上断开后就无法再次进行连接使用，表现为静音，因此使用全部使用全局处理避免调用到disconnect；全局处理也有利于屏蔽底层细节，start时无需再调用底层接口，提升兼容、可靠性。*/
|
||||
var Connect=function(streamStore){
|
||||
streamStore=streamStore||Recorder;
|
||||
var bufferSize=streamStore.BufferSize||Recorder.BufferSize;
|
||||
|
||||
var ctx=Recorder.Ctx,stream=streamStore.Stream;
|
||||
var media=stream._m=ctx.createMediaStreamSource(stream);
|
||||
var process=stream._p=(ctx.createScriptProcessor||ctx.createJavaScriptNode).call(ctx,bufferSize,1,1);//单声道，省的数据处理复杂
|
||||
|
||||
media.connect(process);
|
||||
process.connect(ctx.destination);
|
||||
|
||||
var calls=stream._call;
|
||||
process.onaudioprocess=function(e){
|
||||
for(var k0 in calls){//has item
|
||||
var o=e.inputBuffer.getChannelData(0);//块是共享的，必须复制出来
|
||||
var size=o.length;
|
||||
|
||||
var pcm=new Int16Array(size);
|
||||
var sum=0;
|
||||
for(var j=0;j<size;j++){//floatTo16BitPCM
|
||||
var s=Math.max(-1,Math.min(1,o[j]));
|
||||
s=s<0?s*0x8000:s*0x7FFF;
|
||||
pcm[j]=s;
|
||||
sum+=Math.abs(s);
|
||||
};
|
||||
|
||||
for(var k in calls){
|
||||
calls[k](pcm,sum);
|
||||
};
|
||||
|
||||
return;
|
||||
};
|
||||
};
|
||||
};
|
||||
var Disconnect=function(streamStore){
|
||||
streamStore=streamStore||Recorder;
|
||||
var isGlobal=streamStore==Recorder;
|
||||
|
||||
var stream=streamStore.Stream;
|
||||
if(stream){
|
||||
if(stream._m){
|
||||
stream._m.disconnect();
|
||||
stream._p.disconnect();
|
||||
stream._p.onaudioprocess=stream._p=stream._m=null;
|
||||
};
|
||||
|
||||
if(isGlobal){//全局的时候，要把流关掉（麦克风），直接提供的流不处理
|
||||
var tracks=stream.getTracks&&stream.getTracks()||stream.audioTracks||[];
|
||||
for(var i=0;i<tracks.length;i++){
|
||||
var track=tracks[i];
|
||||
track.stop&&track.stop();
|
||||
};
|
||||
stream.stop&&stream.stop();
|
||||
};
|
||||
};
|
||||
streamStore.Stream=0;
|
||||
};
|
||||
|
||||
/*对pcm数据的采样率进行转换
|
||||
pcmDatas: [[Int16,...]] pcm片段列表
|
||||
pcmSampleRate:48000 pcm数据的采样率
|
||||
newSampleRate:16000 需要转换成的采样率，newSampleRate>=pcmSampleRate时不会进行任何处理，小于时会进行重新采样
|
||||
prevChunkInfo:{} 可选，上次调用时的返回值，用于连续转换，本次调用将从上次结束位置开始进行处理。或可自行定义一个ChunkInfo从pcmDatas指定的位置开始进行转换
|
||||
option:{ 可选，配置项
|
||||
frameSize:123456 帧大小，每帧的PCM Int16的数量，采样率转换后的pcm长度为frameSize的整数倍，用于连续转换。目前仅在mp3格式时才有用，frameSize取值为1152，这样编码出来的mp3时长和pcm的时长完全一致，否则会因为mp3最后一帧录音不够填满时添加填充数据导致mp3的时长变长。
|
||||
frameType:"" 帧类型，一般为rec.set.type，提供此参数时无需提供frameSize，会自动使用最佳的值给frameSize赋值，目前仅支持mp3=1152(MPEG1 Layer3的每帧采采样数)，其他类型=1。
|
||||
以上两个参数用于连续转换时使用，最多使用一个，不提供时不进行帧的特殊处理，提供时必须同时提供prevChunkInfo才有作用。最后一段数据处理时无需提供帧大小以便输出最后一丁点残留数据。
|
||||
}
|
||||
|
||||
返回ChunkInfo:{
|
||||
//可定义，从指定位置开始转换到结尾
|
||||
index:0 pcmDatas已处理到的索引
|
||||
offset:0.0 已处理到的index对应的pcm中的偏移的下一个位置
|
||||
|
||||
//仅作为返回值
|
||||
frameNext:null||[Int16,...] 下一帧的部分数据，frameSize设置了的时候才可能会有
|
||||
sampleRate:16000 结果的采样率，<=newSampleRate
|
||||
data:[Int16,...] 转换后的PCM结果；如果是连续转换，并且pcmDatas中并没有新数据时，data的长度可能为0
|
||||
}
|
||||
*/
|
||||
Recorder.SampleData=function(pcmDatas,pcmSampleRate,newSampleRate,prevChunkInfo,option){
|
||||
prevChunkInfo||(prevChunkInfo={});
|
||||
var index=prevChunkInfo.index||0;
|
||||
var offset=prevChunkInfo.offset||0;
|
||||
|
||||
var frameNext=prevChunkInfo.frameNext||[];
|
||||
option||(option={});
|
||||
var frameSize=option.frameSize||1;
|
||||
if(option.frameType){
|
||||
frameSize=option.frameType=="mp3"?1152:1;
|
||||
};
|
||||
|
||||
var size=0;
|
||||
for(var i=index;i<pcmDatas.length;i++){
|
||||
size+=pcmDatas[i].length;
|
||||
};
|
||||
size=Math.max(0,size-Math.floor(offset));
|
||||
|
||||
//采样 https://www.cnblogs.com/blqw/p/3782420.html
|
||||
var step=pcmSampleRate/newSampleRate;
|
||||
if(step>1){//新采样低于录音采样，进行抽样
|
||||
size=Math.floor(size/step);
|
||||
}else{//新采样高于录音采样不处理，省去了插值处理
|
||||
step=1;
|
||||
newSampleRate=pcmSampleRate;
|
||||
};
|
||||
|
||||
size+=frameNext.length;
|
||||
var res=new Int16Array(size);
|
||||
var idx=0;
|
||||
//添加上一次不够一帧的剩余数据
|
||||
for(var i=0;i<frameNext.length;i++){
|
||||
res[idx]=frameNext[i];
|
||||
idx++;
|
||||
};
|
||||
//处理数据
|
||||
for (var nl=pcmDatas.length;index<nl;index++) {
|
||||
var o=pcmDatas[index];
|
||||
var i=offset,il=o.length;
|
||||
while(i<il){
|
||||
//res[idx]=o[Math.round(i)]; 直接简单抽样
|
||||
|
||||
//https://www.cnblogs.com/xiaoqi/p/6993912.html
|
||||
//当前点=当前点+到后面一个点之间的增量，音质比直接简单抽样好些
|
||||
var before = Math.floor(i);
|
||||
var after = Math.ceil(i);
|
||||
var atPoint = i - before;
|
||||
|
||||
var beforeVal=o[before];
|
||||
var afterVal=after<il ? o[after]
|
||||
: (//后个点越界了，查找下一个数组
|
||||
(pcmDatas[index+1]||[beforeVal])[0]||0
|
||||
);
|
||||
res[idx]=beforeVal+(afterVal-beforeVal)*atPoint;
|
||||
|
||||
idx++;
|
||||
i+=step;//抽样
|
||||
};
|
||||
offset=i-il;
|
||||
};
|
||||
//帧处理
|
||||
frameNext=null;
|
||||
var frameNextSize=res.length%frameSize;
|
||||
if(frameNextSize>0){
|
||||
var u8Pos=(res.length-frameNextSize)*2;
|
||||
frameNext=new Int16Array(res.buffer.slice(u8Pos));
|
||||
res=new Int16Array(res.buffer.slice(0,u8Pos));
|
||||
};
|
||||
|
||||
return {
|
||||
index:index
|
||||
,offset:offset
|
||||
|
||||
,frameNext:frameNext
|
||||
,sampleRate:newSampleRate
|
||||
,data:res
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
/*计算音量百分比的一个方法
|
||||
pcmAbsSum: pcm Int16所有采样的绝对值的和
|
||||
pcmLength: pcm长度
|
||||
返回值：0-100，主要当做百分比用
|
||||
注意：这个不是分贝，因此没用volume当做名称*/
|
||||
Recorder.PowerLevel=function(pcmAbsSum,pcmLength){
|
||||
/*计算音量 https://blog.csdn.net/jody1989/article/details/73480259
|
||||
更高灵敏度算法:
|
||||
限定最大感应值10000
|
||||
线性曲线：低音量不友好
|
||||
power/10000*100
|
||||
对数曲线：低音量友好，但需限定最低感应值
|
||||
(1+Math.log10(power/10000))*100
|
||||
*/
|
||||
var power=(pcmAbsSum/pcmLength) || 0;//NaN
|
||||
var level;
|
||||
if(power<1251){//1250的结果10%，更小的音量采用线性取值
|
||||
level=Math.round(power/1250*10);
|
||||
}else{
|
||||
level=Math.round(Math.min(100,Math.max(0,(1+Math.log(power/10000)/Math.log(10))*100)));
|
||||
};
|
||||
return level;
|
||||
};
|
||||
|
||||
|
||||
|
||||
|
||||
//带时间的日志输出，CLog(msg,errOrLogMsg, logMsg...) err为数字时代表日志类型1:error 2:log默认 3:warn，否则当做内容输出，第一个参数不能是对象因为要拼接时间，后面可以接无数个输出参数
|
||||
var CLog=function(msg,err){
|
||||
var now=new Date();
|
||||
var t=("0"+now.getMinutes()).substr(-2)
|
||||
+":"+("0"+now.getSeconds()).substr(-2)
|
||||
+"."+("00"+now.getMilliseconds()).substr(-3);
|
||||
var arr=["["+t+" Recorder]"+msg];
|
||||
var a=arguments;
|
||||
var i=2,fn=console.log;
|
||||
if(typeof(err)=="number"){
|
||||
fn=err==1?console.error:err==3?console.warn:fn;
|
||||
}else{
|
||||
i=1;
|
||||
};
|
||||
for(;i<a.length;i++){
|
||||
arr.push(a[i]);
|
||||
};
|
||||
fn.apply(console,arr);
|
||||
};
|
||||
Recorder.CLog=CLog;
|
||||
|
||||
|
||||
|
||||
|
||||
var ID=0;
|
||||
function initFn(set){
|
||||
this.id=++ID;
|
||||
|
||||
//如果开启了流量统计，这里将发送一个图片请求
|
||||
Recorder.Traffic&&Recorder.Traffic();
|
||||
|
||||
|
||||
var o={
|
||||
type:"mp3" //输出类型：mp3,wav，wav输出文件尺寸超大不推荐使用，但mp3编码支持会导致js文件超大，如果不需支持mp3可以使js文件大幅减小
|
||||
,bitRate:16 //比特率 wav:16或8位，MP3：8kbps 1k/s，8kbps 2k/s 录音文件很小
|
||||
|
||||
,sampleRate:16000 //采样率，wav格式大小=sampleRate*时间；mp3此项对低比特率有影响，高比特率几乎无影响。
|
||||
//wav任意值，mp3取值范围：48000, 44100, 32000, 24000, 22050, 16000, 12000, 11025, 8000
|
||||
//采样率参考https://www.cnblogs.com/devin87/p/mp3-recorder.html
|
||||
|
||||
,onProcess: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实例共享同一个流）
|
||||
//比如：audio、video标签dom节点的captureStream方法（实验特性，不同浏览器支持程度不高）返回的流；WebRTC中的remote流；自己创建的流等
|
||||
//注意：流内必须至少存在一条音轨(Audio Track)，比如audio标签必须等待到可以开始播放后才会有音轨，否则open会失败
|
||||
|
||||
//,audioTrackSet:{ deviceId:"",groupId:"", autoGainControl:true, echoCancellation:true, noiseSuppression:true }
|
||||
//普通麦克风录音时getUserMedia方法的audio配置参数，比如指定设备id，回声消除、降噪开关；注意：提供的任何配置值都不一定会生效
|
||||
//由于麦克风是全局共享的，所以新配置后需要close掉以前的再重新open
|
||||
//更多参考: https://developer.mozilla.org/en-US/docs/Web/API/MediaTrackConstraints
|
||||
|
||||
//,disableEnvInFix:false 内部参数，禁用设备卡顿时音频输入丢失补偿功能
|
||||
|
||||
//,takeoffEncodeChunk:NOOP //fn(chunkBytes) chunkBytes=[Uint8,...]：实时编码环境下接管编码器输出，当编码器实时编码出一块有效的二进制音频数据时实时回调此方法；参数为二进制的Uint8Array，就是编码出来的音频数据片段，所有的chunkBytes拼接在一起即为完整音频。本实现的想法最初由QQ2543775048提出
|
||||
//当提供此回调方法时，将接管编码器的数据输出，编码器内部将放弃存储生成的音频数据；环境要求比较苛刻：如果当前环境不支持实时编码处理，将在open时直接走fail逻辑
|
||||
//因此提供此回调后调用stop方法将无法获得有效的音频数据，因为编码器内没有音频数据，因此stop时返回的blob将是一个字节长度为0的blob
|
||||
//目前只有mp3格式实现了实时编码，在支持实时处理的环境中将会实时的将编码出来的mp3片段通过此方法回调，所有的chunkBytes拼接到一起即为完整的mp3，此种拼接的结果比mock方法实时生成的音质更加，因为天然避免了首尾的静默
|
||||
//目前除mp3外其他格式不可以提供此回调，提供了将在open时直接走fail逻辑
|
||||
};
|
||||
|
||||
for(var k in set){
|
||||
o[k]=set[k];
|
||||
};
|
||||
this.set=o;
|
||||
|
||||
this._S=9;//stop同步锁，stop可以阻止open过程中还未运行的start
|
||||
this.Sync={O:9,C:9};//和Recorder.Sync一致，只不过这个是非全局的，仅用来简化代码逻辑，无实际作用
|
||||
};
|
||||
//同步锁，控制对Stream的竞争；用于close时中断异步的open；一个对象open如果变化了都要阻止close，Stream的控制权交个新的对象
|
||||
Recorder.Sync={/*open*/O:9,/*close*/C:9};
|
||||
|
||||
Recorder.prototype=initFn.prototype={
|
||||
//流相关的数据存储在哪个对象里面；如果提供了sourceStream，数据直接存储在当前对象中，否则存储在全局
|
||||
_streamStore:function(){
|
||||
if(this.set.sourceStream){
|
||||
return this;
|
||||
}else{
|
||||
return Recorder;
|
||||
}
|
||||
}
|
||||
|
||||
//打开录音资源True(),False(msg,isUserNotAllow)，需要调用close。注意：此方法是异步的；一般使用时打开，用完立即关闭；可重复调用，可用来测试是否能录音
|
||||
,open:function(True,False){
|
||||
var This=this,streamStore=This._streamStore();
|
||||
True=True||NOOP;
|
||||
var failCall=function(errMsg,isUserNotAllow){
|
||||
isUserNotAllow=!!isUserNotAllow;
|
||||
CLog("录音open失败："+errMsg+",isUserNotAllow:"+isUserNotAllow,1);
|
||||
False&&False(errMsg,isUserNotAllow);
|
||||
};
|
||||
|
||||
var ok=function(){
|
||||
CLog("open成功");
|
||||
True();
|
||||
|
||||
This._SO=0;//解除stop对open中的start调用的阻止
|
||||
};
|
||||
|
||||
|
||||
//同步锁
|
||||
var Lock=streamStore.Sync;
|
||||
var lockOpen=++Lock.O,lockClose=Lock.C;
|
||||
This._O=This._O_=lockOpen;//记住当前的open，如果变化了要阻止close，这里假定了新对象已取代当前对象并且不再使用
|
||||
This._SO=This._S;//记住open过程中的stop，中途任何stop调用后都不能继续open中的start
|
||||
var lockFail=function(){
|
||||
//允许多次open，但不允许任何一次close，或者自身已经调用了关闭
|
||||
if(lockClose!=Lock.C || !This._O){
|
||||
var err="open被取消";
|
||||
if(lockOpen==Lock.O){
|
||||
//无新的open，已经调用了close进行取消，此处应让上次的close明确生效
|
||||
This.close();
|
||||
}else{
|
||||
err="open被中断";
|
||||
};
|
||||
failCall(err);
|
||||
return true;
|
||||
};
|
||||
};
|
||||
|
||||
//环境配置检查
|
||||
var checkMsg=This.envCheck({envName:"H5",canProcess:true});
|
||||
if(checkMsg){
|
||||
failCall("不能录音："+checkMsg);
|
||||
return;
|
||||
};
|
||||
|
||||
|
||||
//***********已直接提供了音频流************
|
||||
if(This.set.sourceStream){
|
||||
if(!Recorder.Support()){
|
||||
failCall("不支持此浏览器从流中获取录音");
|
||||
return;
|
||||
};
|
||||
|
||||
Disconnect(streamStore);//可能已open过，直接先尝试断开
|
||||
This.Stream=This.set.sourceStream;
|
||||
This.Stream._call={};
|
||||
|
||||
try{
|
||||
Connect(streamStore);
|
||||
}catch(e){
|
||||
failCall("从流中打开录音失败："+e.message);
|
||||
return;
|
||||
}
|
||||
ok();
|
||||
return;
|
||||
};
|
||||
|
||||
|
||||
//***********打开麦克风得到全局的音频流************
|
||||
var codeFail=function(code,msg){
|
||||
try{//跨域的优先检测一下
|
||||
window.top.a;
|
||||
}catch(e){
|
||||
failCall('无权录音(跨域，请尝试给iframe添加麦克风访问策略，如allow="camera;microphone")');
|
||||
return;
|
||||
};
|
||||
|
||||
if(/Permission|Allow/i.test(code)){
|
||||
failCall("用户拒绝了录音权限",true);
|
||||
}else if(window.isSecureContext===false){
|
||||
failCall("无权录音(需https)");
|
||||
}else if(/Found/i.test(code)){//可能是非安全环境导致的没有设备
|
||||
failCall(msg+"，无可用麦克风");
|
||||
}else{
|
||||
failCall(msg);
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
//如果已打开并且有效就不要再打开了
|
||||
if(Recorder.IsOpen()){
|
||||
ok();
|
||||
return;
|
||||
};
|
||||
if(!Recorder.Support()){
|
||||
codeFail("","此浏览器不支持录音");
|
||||
return;
|
||||
};
|
||||
|
||||
//请求权限，如果从未授权，一般浏览器会弹出权限请求弹框
|
||||
var f1=function(stream){
|
||||
Recorder.Stream=stream;
|
||||
stream._call={};//此时is open，但并未connect，是允许绑定接收数据的
|
||||
if(lockFail())return;
|
||||
|
||||
//https://github.com/xiangyuecn/Recorder/issues/14 获取到的track.readyState!="live"，刚刚回调时可能是正常的，但过一下可能就被关掉了，原因不明。延迟一下保证真异步。对正常浏览器不影响
|
||||
setTimeout(function(){
|
||||
if(lockFail())return;
|
||||
|
||||
if(Recorder.IsOpen()){
|
||||
Connect();
|
||||
ok();
|
||||
}else{
|
||||
failCall("录音功能无效：无音频流");
|
||||
};
|
||||
},100);
|
||||
};
|
||||
var f2=function(e){
|
||||
var code=e.name||e.message||e.code+":"+e;
|
||||
CLog("请求录音权限错误",1,e);
|
||||
|
||||
codeFail(code,"无法录音："+code);
|
||||
};
|
||||
var pro=Recorder.Scope.getUserMedia({audio:This.set.audioTrackSet||true},f1,f2);
|
||||
if(pro&&pro.then){
|
||||
pro.then(f1)[True&&"catch"](f2); //fix 关键字，保证catch压缩时保持字符串形式
|
||||
};
|
||||
}
|
||||
//关闭释放录音资源
|
||||
,close:function(call){
|
||||
call=call||NOOP;
|
||||
|
||||
var This=this,streamStore=This._streamStore();
|
||||
This._stop();
|
||||
|
||||
var Lock=streamStore.Sync;
|
||||
This._O=0;
|
||||
if(This._O_!=Lock.O){
|
||||
//唯一资源Stream的控制权已交给新对象，这里不能关闭。此处在每次都弹权限的浏览器内可能存在泄漏，新对象被拒绝权限可能不会调用close，忽略这种不处理
|
||||
CLog("close被忽略",3);
|
||||
call();
|
||||
return;
|
||||
};
|
||||
Lock.C++;//获得控制权
|
||||
|
||||
Disconnect(streamStore);
|
||||
|
||||
CLog("close");
|
||||
call();
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
/*模拟一段录音数据，后面可以调用stop进行编码，需提供pcm数据[1,2,3...]，pcm的采样率*/
|
||||
,mock:function(pcmData,pcmSampleRate){
|
||||
var This=this;
|
||||
This._stop();//清理掉已有的资源
|
||||
|
||||
This.isMock=1;
|
||||
This.mockEnvInfo=null;
|
||||
This.buffers=[pcmData];
|
||||
This.recSize=pcmData.length;
|
||||
This.srcSampleRate=pcmSampleRate;
|
||||
return This;
|
||||
}
|
||||
,envCheck:function(envInfo){//平台环境下的可用性检查，任何时候都可以调用检查，返回errMsg:""正常，"失败原因"
|
||||
//envInfo={envName:"H5",canProcess:true}
|
||||
var errMsg,This=this,set=This.set;
|
||||
|
||||
//编码器检查环境下配置是否可用
|
||||
if(!errMsg){
|
||||
if(This[set.type+"_envCheck"]){//编码器已实现环境检查
|
||||
errMsg=This[set.type+"_envCheck"](envInfo,set);
|
||||
}else{//未实现检查的手动检查配置是否有效
|
||||
if(set.takeoffEncodeChunk){
|
||||
errMsg=set.type+"类型不支持设置takeoffEncodeChunk";
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
return errMsg||"";
|
||||
}
|
||||
,envStart:function(mockEnvInfo,sampleRate){//平台环境相关的start调用
|
||||
var This=this,set=This.set;
|
||||
This.isMock=mockEnvInfo?1:0;//非H5环境需要启用mock，并提供envCheck需要的环境信息
|
||||
This.mockEnvInfo=mockEnvInfo;
|
||||
This.buffers=[];//数据缓冲
|
||||
This.recSize=0;//数据大小
|
||||
|
||||
This.envInLast=0;//envIn接收到最后录音内容的时间
|
||||
This.envInFirst=0;//envIn接收到的首个录音内容的录制时间
|
||||
This.envInFix=0;//补偿的总时间
|
||||
This.envInFixTs=[];//补偿计数列表
|
||||
|
||||
set.sampleRate=Math.min(sampleRate,set.sampleRate);//engineCtx需要提前确定最终的采样率
|
||||
This.srcSampleRate=sampleRate;
|
||||
|
||||
This.engineCtx=0;
|
||||
//此类型有边录边转码(Worker)支持
|
||||
if(This[set.type+"_start"]){
|
||||
var engineCtx=This.engineCtx=This[set.type+"_start"](set);
|
||||
if(engineCtx){
|
||||
engineCtx.pcmDatas=[];
|
||||
engineCtx.pcmSize=0;
|
||||
};
|
||||
};
|
||||
}
|
||||
,envResume:function(){//和平台环境无关的恢复录音
|
||||
//重新开始计数
|
||||
this.envInFixTs=[];
|
||||
}
|
||||
,envIn:function(pcm,sum){//和平台环境无关的pcm[Int16]输入
|
||||
var This=this,set=This.set,engineCtx=This.engineCtx;
|
||||
var bufferSampleRate=This.srcSampleRate;
|
||||
var size=pcm.length;
|
||||
var powerLevel=Recorder.PowerLevel(sum,size);
|
||||
|
||||
var buffers=This.buffers;
|
||||
var bufferFirstIdx=buffers.length;//之前的buffer都是经过onProcess处理好的，不允许再修改
|
||||
buffers.push(pcm);
|
||||
|
||||
//有engineCtx时会被覆盖，这里保存一份
|
||||
var buffersThis=buffers;
|
||||
var bufferFirstIdxThis=bufferFirstIdx;
|
||||
|
||||
//卡顿丢失补偿：因为设备很卡的时候导致H5接收到的数据量不够造成播放时候变速，结果比实际的时长要短，此处保证了不会变短，但不能修复丢失的音频数据造成音质变差。当前算法采用输入时间侦测下一帧是否需要添加补偿帧，需要(6次输入||超过1秒)以上才会开始侦测，如果滑动窗口内丢失超过1/3就会进行补偿
|
||||
var now=Date.now();
|
||||
var pcmTime=Math.round(size/bufferSampleRate*1000);
|
||||
This.envInLast=now;
|
||||
if(This.buffers.length==1){//记下首个录音数据的录制时间
|
||||
This.envInFirst=now-pcmTime;
|
||||
};
|
||||
var envInFixTs=This.envInFixTs;
|
||||
envInFixTs.splice(0,0,{t:now,d:pcmTime});
|
||||
//保留3秒的计数滑动窗口，另外超过3秒的停顿不补偿
|
||||
var tsInStart=now,tsPcm=0;
|
||||
for(var i=0;i<envInFixTs.length;i++){
|
||||
var o=envInFixTs[i];
|
||||
if(now-o.t>3000){
|
||||
envInFixTs.length=i;
|
||||
break;
|
||||
};
|
||||
tsInStart=o.t;
|
||||
tsPcm+=o.d;
|
||||
};
|
||||
//达到需要的数据量，开始侦测是否需要补偿
|
||||
var tsInPrev=envInFixTs[1];
|
||||
var tsIn=now-tsInStart;
|
||||
var lost=tsIn-tsPcm;
|
||||
if( lost>tsIn/3 && (tsInPrev&&tsIn>1000 || envInFixTs.length>=6) ){
|
||||
//丢失过多，开始执行补偿
|
||||
var addTime=now-tsInPrev.t-pcmTime;//距离上次输入丢失这么多ms
|
||||
if(addTime>pcmTime/5){//丢失超过本帧的1/5
|
||||
var fixOpen=!set.disableEnvInFix;
|
||||
CLog("["+now+"]"+(fixOpen?"":"未")+"补偿"+addTime+"ms",3);
|
||||
This.envInFix+=addTime;
|
||||
|
||||
//用静默进行补偿
|
||||
if(fixOpen){
|
||||
var addPcm=new Int16Array(addTime*bufferSampleRate/1000);
|
||||
size+=addPcm.length;
|
||||
buffers.push(addPcm);
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
var sizeOld=This.recSize,addSize=size;
|
||||
var bufferSize=sizeOld+addSize;
|
||||
This.recSize=bufferSize;//此值在onProcess后需要修正，可能新数据被修改
|
||||
|
||||
|
||||
//此类型有边录边转码(Worker)支持，开启实时转码
|
||||
if(engineCtx){
|
||||
//转换成set的采样率
|
||||
var chunkInfo=Recorder.SampleData(buffers,bufferSampleRate,set.sampleRate,engineCtx.chunkInfo);
|
||||
engineCtx.chunkInfo=chunkInfo;
|
||||
|
||||
sizeOld=engineCtx.pcmSize;
|
||||
addSize=chunkInfo.data.length;
|
||||
bufferSize=sizeOld+addSize;
|
||||
engineCtx.pcmSize=bufferSize;//此值在onProcess后需要修正，可能新数据被修改
|
||||
|
||||
buffers=engineCtx.pcmDatas;
|
||||
bufferFirstIdx=buffers.length;
|
||||
buffers.push(chunkInfo.data);
|
||||
bufferSampleRate=chunkInfo.sampleRate;
|
||||
};
|
||||
|
||||
var duration=Math.round(bufferSize/bufferSampleRate*1000);
|
||||
var bufferNextIdx=buffers.length;
|
||||
var bufferNextIdxThis=buffersThis.length;
|
||||
|
||||
//允许异步处理buffer数据
|
||||
var asyncEnd=function(){
|
||||
//重新计算size，异步的早已减去添加的，同步的需去掉本次添加的然后重新计算
|
||||
var num=asyncBegin?0:-addSize;
|
||||
var hasClear=buffers[0]==null;
|
||||
for(var i=bufferFirstIdx;i<bufferNextIdx;i++){
|
||||
var buffer=buffers[i];
|
||||
if(buffer==null){//已被主动释放内存，比如长时间实时传输录音时
|
||||
hasClear=1;
|
||||
}else{
|
||||
num+=buffer.length;
|
||||
|
||||
//推入后台边录边转码
|
||||
if(engineCtx&&buffer.length){
|
||||
This[set.type+"_encode"](engineCtx,buffer);
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
//同步清理This.buffers，不管buffers到底清了多少个，buffersThis是使用不到的进行全清
|
||||
if(hasClear && engineCtx){
|
||||
var i=bufferFirstIdxThis;
|
||||
if(buffersThis[0]){
|
||||
i=0;
|
||||
};
|
||||
for(;i<bufferNextIdxThis;i++){
|
||||
buffersThis[i]=null;
|
||||
};
|
||||
};
|
||||
|
||||
//统计修改后的size，如果异步发生clear要原样加回来，同步的无需操作
|
||||
if(hasClear){
|
||||
num=asyncBegin?addSize:0;
|
||||
|
||||
buffers[0]=null;//彻底被清理
|
||||
};
|
||||
if(engineCtx){
|
||||
engineCtx.pcmSize+=num;
|
||||
}else{
|
||||
This.recSize+=num;
|
||||
};
|
||||
};
|
||||
//实时回调处理数据，允许修改或替换上次回调以来新增的数据 ，但是不允许修改已处理过的，不允许增删第一维数组 ，允许将第二维数组任意修改替换成空数组也可以
|
||||
var asyncBegin=set.onProcess(buffers,powerLevel,duration,bufferSampleRate,bufferFirstIdx,asyncEnd);
|
||||
|
||||
if(asyncBegin===true){
|
||||
//开启了异步模式，onProcess已接管buffers新数据，立即清空，避免出现未处理的数据
|
||||
var hasClear=0;
|
||||
for(var i=bufferFirstIdx;i<bufferNextIdx;i++){
|
||||
if(buffers[i]==null){//已被主动释放内存，比如长时间实时传输录音时 ，但又要开启异步模式，此种情况是非法的
|
||||
hasClear=1;
|
||||
}else{
|
||||
buffers[i]=new Int16Array(0);
|
||||
};
|
||||
};
|
||||
|
||||
if(hasClear){
|
||||
CLog("未进入异步前不能清除buffers",3);
|
||||
}else{
|
||||
//还原size，异步结束后再统计仅修改后的size，如果发生clear要原样加回来
|
||||
if(engineCtx){
|
||||
engineCtx.pcmSize-=addSize;
|
||||
}else{
|
||||
This.recSize-=addSize;
|
||||
};
|
||||
};
|
||||
}else{
|
||||
asyncEnd();
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
//开始录音，需先调用open；只要open成功时，调用此方法是安全的，如果未open强行调用导致的内部错误将不会有任何提示，stop时自然能得到错误
|
||||
,start:function(){
|
||||
var This=this,ctx=Recorder.Ctx;
|
||||
|
||||
var isOpen=1;
|
||||
if(This.set.sourceStream){//直接提供了流，仅判断是否调用了open
|
||||
if(!This.Stream){
|
||||
isOpen=0;
|
||||
}
|
||||
}else if(!Recorder.IsOpen()){//监测全局麦克风是否打开并且有效
|
||||
isOpen=0;
|
||||
};
|
||||
if(!isOpen){
|
||||
CLog("未open",1);
|
||||
return;
|
||||
};
|
||||
CLog("开始录音");
|
||||
|
||||
This._stop();
|
||||
This.state=0;
|
||||
This.envStart(null,ctx.sampleRate);
|
||||
|
||||
//检查open过程中stop是否已经调用过
|
||||
if(This._SO&&This._SO+1!=This._S){//上面调用过一次 _stop
|
||||
//open未完成就调用了stop，此种情况终止start。也应尽量避免出现此情况
|
||||
CLog("start被中断",3);
|
||||
return;
|
||||
};
|
||||
This._SO=0;
|
||||
|
||||
var end=function(){
|
||||
This.state=1;
|
||||
This.resume();
|
||||
};
|
||||
if(ctx.state=="suspended"){
|
||||
ctx.resume().then(function(){
|
||||
CLog("ctx resume");
|
||||
end();
|
||||
});
|
||||
}else{
|
||||
end();
|
||||
};
|
||||
}
|
||||
/*暂停录音*/
|
||||
,pause:function(){
|
||||
var This=this;
|
||||
if(This.state){
|
||||
This.state=2;
|
||||
CLog("pause");
|
||||
delete This._streamStore().Stream._call[This.id];
|
||||
};
|
||||
}
|
||||
/*恢复录音*/
|
||||
,resume:function(){
|
||||
var This=this;
|
||||
if(This.state){
|
||||
This.state=1;
|
||||
CLog("resume");
|
||||
This.envResume();
|
||||
|
||||
This._streamStore().Stream._call[This.id]=function(pcm,sum){
|
||||
if(This.state==1){
|
||||
This.envIn(pcm,sum);
|
||||
};
|
||||
};
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
|
||||
|
||||
,_stop:function(keepEngine){
|
||||
var This=this,set=This.set;
|
||||
if(!This.isMock){
|
||||
This._S++;
|
||||
};
|
||||
if(This.state){
|
||||
This.pause();
|
||||
This.state=0;
|
||||
};
|
||||
if(!keepEngine && This[set.type+"_stop"]){
|
||||
This[set.type+"_stop"](This.engineCtx);
|
||||
This.engineCtx=0;
|
||||
};
|
||||
}
|
||||
/*
|
||||
结束录音并返回录音数据blob对象
|
||||
True(blob,duration) blob：录音数据audio/mp3|wav格式
|
||||
duration：录音时长，单位毫秒
|
||||
False(msg)
|
||||
autoClose:false 可选，是否自动调用close，默认为false
|
||||
*/
|
||||
,stop:function(True,False,autoClose){
|
||||
var This=this,set=This.set,t1;
|
||||
CLog("Stop "+(This.envInLast?This.envInLast-This.envInFirst+"ms 补"+This.envInFix+"ms":"-"));
|
||||
|
||||
var end=function(){
|
||||
This._stop();//彻底关掉engineCtx
|
||||
if(autoClose){
|
||||
This.close();
|
||||
};
|
||||
};
|
||||
var err=function(msg){
|
||||
CLog("结束录音失败："+msg,1);
|
||||
False&&False(msg);
|
||||
end();
|
||||
};
|
||||
var ok=function(blob,duration){
|
||||
CLog("结束录音 编码"+(Date.now()-t1)+"ms 音频"+duration+"ms/"+blob.size+"b");
|
||||
if(set.takeoffEncodeChunk){//接管了输出，此时blob长度为0
|
||||
CLog("启用takeoffEncodeChunk后stop返回的blob长度为0不提供音频数据",3);
|
||||
}else if(blob.size<Math.max(100,duration/2)){//1秒小于0.5k？
|
||||
err("生成的"+set.type+"无效");
|
||||
return;
|
||||
};
|
||||
True&&True(blob,duration);
|
||||
end();
|
||||
};
|
||||
if(!This.isMock){
|
||||
if(!This.state){
|
||||
err("未开始录音");
|
||||
return;
|
||||
};
|
||||
This._stop(true);
|
||||
};
|
||||
var size=This.recSize;
|
||||
if(!size){
|
||||
err("未采集到录音");
|
||||
return;
|
||||
};
|
||||
if(!This.buffers[0]){
|
||||
err("音频被释放");
|
||||
return;
|
||||
};
|
||||
if(!This[set.type]){
|
||||
err("未加载"+set.type+"编码器");
|
||||
return;
|
||||
};
|
||||
|
||||
//环境配置检查，此处仅针对mock调用，因为open已经检查过了
|
||||
if(This.isMock){
|
||||
var checkMsg=This.envCheck(This.mockEnvInfo||{envName:"mock",canProcess:false});//没有提供环境信息的mock时没有onProcess回调
|
||||
if(checkMsg){
|
||||
err("录音错误："+checkMsg);
|
||||
return;
|
||||
};
|
||||
};
|
||||
|
||||
//此类型有边录边转码(Worker)支持
|
||||
var engineCtx=This.engineCtx;
|
||||
if(This[set.type+"_complete"]&&engineCtx){
|
||||
var duration=Math.round(engineCtx.pcmSize/set.sampleRate*1000);//采用后的数据长度和buffers的长度可能微小的不一致，是采样率连续转换的精度问题
|
||||
|
||||
t1=Date.now();
|
||||
This[set.type+"_complete"](engineCtx,function(blob){
|
||||
ok(blob,duration);
|
||||
},err);
|
||||
return;
|
||||
};
|
||||
|
||||
//标准UI线程转码，调整采样率
|
||||
t1=Date.now();
|
||||
var chunk=Recorder.SampleData(This.buffers,This.srcSampleRate,set.sampleRate);
|
||||
|
||||
set.sampleRate=chunk.sampleRate;
|
||||
var res=chunk.data;
|
||||
var duration=Math.round(res.length/set.sampleRate*1000);
|
||||
|
||||
CLog("采样"+size+"->"+res.length+" 花:"+(Date.now()-t1)+"ms");
|
||||
|
||||
setTimeout(function(){
|
||||
t1=Date.now();
|
||||
This[set.type](res,function(blob){
|
||||
ok(blob,duration);
|
||||
},function(msg){
|
||||
err(msg);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
};
|
||||
|
||||
if(window.Recorder){
|
||||
window.Recorder.Destroy();
|
||||
};
|
||||
window.Recorder=Recorder;
|
||||
|
||||
//end ****copy源码结束*****
|
||||
Recorder.LM=LM;
|
||||
|
||||
//流量统计用1像素图片地址，设置为空将不参与统计
|
||||
Recorder.TrafficImgUrl="//ia.51.la/go1?id=20469973&pvFlag=1";
|
||||
Recorder.Traffic=function(){
|
||||
var imgUrl=Recorder.TrafficImgUrl;
|
||||
if(imgUrl){
|
||||
var data=Recorder.Traffic;
|
||||
var idf=location.href.replace(/#.*/,"");
|
||||
|
||||
if(imgUrl.indexOf("//")==0){
|
||||
//给url加上http前缀，如果是file协议下，不加前缀没法用
|
||||
if(/^https:/i.test(idf)){
|
||||
imgUrl="https:"+imgUrl;
|
||||
}else{
|
||||
imgUrl="http:"+imgUrl;
|
||||
};
|
||||
};
|
||||
|
||||
if(!data[idf]){
|
||||
data[idf]=1;
|
||||
|
||||
var img=new Image();
|
||||
img.src=imgUrl;
|
||||
CLog("Traffic Analysis Image: Recorder.TrafficImgUrl="+Recorder.TrafficImgUrl);
|
||||
};
|
||||
};
|
||||
};
|
||||
|
||||
}));
|
||||
86
web/static/js/wav.js
Normal file
86
web/static/js/wav.js
Normal file
@@ -0,0 +1,86 @@
|
||||
/*
|
||||
wav编码器+编码引擎
|
||||
https://github.com/xiangyuecn/Recorder
|
||||
|
||||
当然最佳推荐使用mp3、wav格式，代码也是优先照顾这两种格式
|
||||
浏览器支持情况
|
||||
https://developer.mozilla.org/en-US/docs/Web/HTML/Supported_media_formats
|
||||
|
||||
编码原理：给pcm数据加上一个44直接的wav头即成wav文件；pcm数据就是Recorder中的buffers原始数据（重新采样），16位时为LE小端模式（Little Endian），实质上是未经过任何编码处理
|
||||
*/
|
||||
(function(){
|
||||
"use strict";
|
||||
|
||||
Recorder.prototype.enc_wav={
|
||||
stable:true
|
||||
,testmsg:"支持位数8位、16位（填在比特率里面），采样率取值无限制"
|
||||
};
|
||||
Recorder.prototype.wav=function(res,True,False){
|
||||
var This=this,set=This.set
|
||||
,size=res.length
|
||||
,sampleRate=set.sampleRate
|
||||
,bitRate=set.bitRate==8?8:16;
|
||||
|
||||
//编码数据 https://github.com/mattdiamond/Recorderjs https://www.cnblogs.com/blqw/p/3782420.html https://www.cnblogs.com/xiaoqi/p/6993912.html
|
||||
var dataLength=size*(bitRate/8);
|
||||
var buffer=new ArrayBuffer(44+dataLength);
|
||||
var data=new DataView(buffer);
|
||||
|
||||
var offset=0;
|
||||
var writeString=function(str){
|
||||
for (var i=0;i<str.length;i++,offset++) {
|
||||
data.setUint8(offset,str.charCodeAt(i));
|
||||
};
|
||||
};
|
||||
var write16=function(v){
|
||||
data.setUint16(offset,v,true);
|
||||
offset+=2;
|
||||
};
|
||||
var write32=function(v){
|
||||
data.setUint32(offset,v,true);
|
||||
offset+=4;
|
||||
};
|
||||
|
||||
/* RIFF identifier */
|
||||
writeString('RIFF');
|
||||
/* RIFF chunk length */
|
||||
write32(36+dataLength);
|
||||
/* RIFF type */
|
||||
writeString('WAVE');
|
||||
/* format chunk identifier */
|
||||
writeString('fmt ');
|
||||
/* format chunk length */
|
||||
write32(16);
|
||||
/* sample format (raw) */
|
||||
write16(1);
|
||||
/* channel count */
|
||||
write16(1);
|
||||
/* sample rate */
|
||||
write32(sampleRate);
|
||||
/* byte rate (sample rate * block align) */
|
||||
write32(sampleRate*(bitRate/8));
|
||||
/* block align (channel count * bytes per sample) */
|
||||
write16(bitRate/8);
|
||||
/* bits per sample */
|
||||
write16(bitRate);
|
||||
/* data chunk identifier */
|
||||
writeString('data');
|
||||
/* data chunk length */
|
||||
write32(dataLength);
|
||||
// 写入采样数据
|
||||
if(bitRate==8) {
|
||||
for(var i=0;i<size;i++,offset++) {
|
||||
//16转8据说是雷霄骅的 https://blog.csdn.net/sevennight1989/article/details/85376149 细节比blqw的按比例的算法清晰点，虽然都有明显杂音
|
||||
var val=(res[i]>>8)+128;
|
||||
data.setInt8(offset,val,true);
|
||||
};
|
||||
}else{
|
||||
for (var i=0;i<size;i++,offset+=2){
|
||||
data.setInt16(offset,res[i],true);
|
||||
};
|
||||
};
|
||||
|
||||
|
||||
True(new Blob([data.buffer],{type:"audio/wav"}));
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user