github/dootask
1
0
Fork 0
mirror of https://github.com/kuaifan/dootask.git synced 2026-01-10 07:48:12 +00:00
Code Issues Packages Projects Releases Wiki Activity

perf: 更新语音消息插件

Browse Source
This commit is contained in:
kuaifan 2024-05-09 16:09:14 +09:00
parent 0fce0c2386
commit bf46a00937
3 changed files with 127 additions and 97 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

85
resources/assets/sass/pages/page-apply.scss vendored
View File

@ -24,7 +24,7 @@
display: flex;
align-items: center;
>h1 {
> h1 {
color: $primary-title-color;
font-size: 28px;
font-weight: 600;
@ -37,19 +37,19 @@
padding: 16px 30px;
overflow: auto;
.apply-row-title{
.apply-row-title {
margin-bottom: 16px;
}
>div.apply-row-title:nth-last-child(2){
> div.apply-row-title:nth-last-child(2) {
margin-top: 22px !important;
}
.apply-col {
margin-bottom: 16px;
>div {
> div {
font-size: 14px;
font-weight: normal;
background: #FFFFFF;
@ -63,13 +63,13 @@
position: relative;
border: 1px solid #f1f1f1;
>.logo {
> .logo {
width: 40px;
height: 40px;
display: inline-block;
}
>p{
> p {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
@ -90,13 +90,13 @@
@media (max-width: 510px) {
background-color: #FFFFFF;
.apply-row-title{
.apply-row-title {
margin-bottom: 8px !important;
}
.apply-content{
.apply-content {
.ivu-row{
.ivu-row {
margin-left: -12px !important;
margin-right: -12px !important;
}
@ -104,10 +104,10 @@
.apply-col {
margin-bottom: 6px;
>div {
> div {
display: block;
text-align: center;
padding:12px 0;
padding: 12px 0;
background: none;
border-color: #ffffff;
@ -116,7 +116,7 @@
position: relative;
}
>p{
> p {
-webkit-line-clamp: 1;
}
@ -138,72 +138,95 @@
background-repeat: no-repeat;
background-size: contain;
background-position: center center;
&.approve {
background-image: url("../images/application/approve.svg");
}
&.add-project {
background-image: url("../images/application/add-project.svg");
}
&.add-task {
background-image: url("../images/application/add-task.svg");
}
&.all-user {
background-image: url("../images/application/all-user.svg");
}
&.complaint {
background-image: url("../images/application/complaint.svg");
}
&.app-push {
background-image: url("../images/application/app-push.svg");
}
&.approve {
background-image: url("../images/application/approve.svg");
}
&.calendar {
background-image: url("../images/application/calendar.svg");
}
&.file {
background-image: url("../images/application/file.svg");
}
&.ldap {
background-image: url("../images/application/ldap.svg");
}
&.mail {
background-image: url("../images/application/mail.svg");
}
&.meeting {
background-image: url("../images/application/meeting.svg");
}
&.meeting-create {
background-image: url("../images/application/meeting-create.svg");
}
&.meeting-join {
background-image: url("../images/application/meeting-join.svg");
}
&.okr {
background-image: url("../images/application/okr.svg");
}
&.okr-analyze {
background-image: url("../images/application/okr-analyze.svg");
}
&.report {
background-image: url("../images/application/report.svg");
}
&.robot {
background-image: url("../images/application/robot.svg");
}
&.scan {
background-image: url("../images/application/scan.svg");
}
&.setting {
background-image: url("../images/application/setting.svg");
}
&.signin {
background-image: url("../images/application/signin.svg");
}
&.vote {
background-image: url("../images/application/vote.svg");
}
&.word-chain {
background-image: url("../images/application/word-chain.svg");
}
@ -225,7 +248,7 @@
padding: 12px 30px;
color: #303133;
>p {
> p {
float: right;
cursor: pointer;
color: #2b85e4;
@ -254,32 +277,21 @@
display: flex;
flex-direction: column;
>.ivu-form {
.ivu-form {
padding: 8px 30px;
overflow: auto;
flex: 1;
.ivu-form-item {
.ivu-form-item .ivu-form-item-content {
display: flex;
>.ivu-form {
margin-bottom: 8px;
}
}
}
}
.setting-template {
margin-bottom: 12px;
>div {
> div {
padding-right: 12px;
}
}
.export-data>p {
.export-data > p {
cursor: pointer;
color: #2b85e4;
}
@ -292,7 +304,8 @@
display: flex;
align-items: center;
gap: 8px;
.ivu-btn{
.ivu-btn {
min-width: 120px;
height: 38px;
line-height: 36px;
@ -309,9 +322,11 @@
flex-direction: column;
height: 100%;
margin: 0 -30px;
.ivu-tabs-bar{
.ivu-tabs-bar {
padding: 0 10px;
}
.ivu-tabs-content {
height: 100%;
flex: 1;
@ -372,7 +387,7 @@
}
}
.desc{
.desc {
cursor: pointer;
height: 84px;
@media (max-width: 510px) {
@ -409,9 +424,11 @@
.mobile-scan-login-box {
margin: 2px 0 12px;
.mobile-scan-login-title {
font-size: 20px;
}
.mobile-scan-login-subtitle {
padding-top: 8px;
}
@ -419,13 +436,15 @@
body.window-portrait {
.page-apply {
.apply-head{
.apply-head {
margin: 24px 24px 0 24px;
}
.apply-content{
.apply-content {
padding: 16px 20px;
.apply-col {
>div {
> div {
font-size: 12px;
font-weight: 500;
}

137
resources/assets/statics/public/js/recorder/frequency.histogram.view.js vendored
View File

@ -1,6 +1,6 @@
/*
录音 Recorder扩展，频率直方图显示
使用本扩展需要引入src/extensions/lib.fft.js支持，直方图特意优化主要显示0-5khz语音部分（线性），其他高频显示区域较小，不适合用来展示音乐频谱，可自行修改源码恢复成完整的线性频谱，或修改成倍频程频谱（伯德图、对数频谱）；本可视化插件可以移植到其他语言环境，如需定制可联系作者
使用本扩展需要引入src/extensions/lib.fft.js支持，直方图特意优化主要显示0-5khz语音部分（线性），其他高频显示区域较小，不适合用来展示音乐频谱，可通过配置fullFreq来恢复成完整的线性频谱，或自行修改源码修改成倍频程频谱（伯德图、对数频谱）；本可视化插件可以移植到其他语言环境，如需定制可联系作者
https://github.com/xiangyuecn/Recorder
@ -65,6 +65,7 @@ H5环境以上配置二选一
,stripeShadowBlur:-1 //峰值小横条阴影基础大小，设为0不显示阴影，-1为柱子的大小，如果柱子数量太多时请勿开启，非常影响性能
,stripeShadowColor:"" //峰值小横条阴影颜色，留空为柱子的阴影颜色
,fullFreq:false //是否要绘制所有频率；默认false主要绘制5khz以下的频率，高频部分占比很少，此时不同的采样率对频谱显示几乎没有影响；设为true后不同采样率下显示的频谱是不一样的，因为 最大频率=采样率/2 会有差异
//当发生绘制时会回调此方法，参数为当前绘制的频率数据和采样率，可实现多个直方图同时绘制，只消耗一个input输入和计算时间
,onDraw:function(frequencyData,sampleRate){}
};
@ -214,15 +215,17 @@ fn.prototype=FrequencyHistogramView.prototype={
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 fftSize=bufferSize/2,fftSize5k=fftSize;
if(!set.fullFreq){//非绘制所有频率时，计算5khz所在位置，8000采样率及以下最高只有4khz
fftSize5k=Math.min(fftSize,Math.floor(fftSize*5000/(sampleRate/2)));
}
var isFullFreq=fftSize5k==fftSize;
var line80=isFullFreq?lineCount:Math.round(lineCount*0.8);//80%的柱子位置
var fftSizeStep1=fftSize5k/line80;
var fftSizeStep2=fftSize5kIsAll?0:(fftSize-fftSize5k)/(lineCount-line80);
var fftSizeStep2=isFullFreq?0:(fftSize-fftSize5k)/(lineCount-line80);
var fftIdx=0;
for(var i=0;i<lineCount;i++){
//不采用jmp123的非线性划分频段，录音语音并不适用于音乐的频率，应当弱化高频部分
// !fullFreq 时不采用jmp123的非线性划分频段，录音语音并不适用于音乐的频率，应当弱化高频部分
//80%关注0-5khz主要人声部分 20%关注剩下的高频，这样不管什么采样率都能做到大部分频率显示一致。
var start=Math.ceil(fftIdx);
if(i<line80){
@ -232,7 +235,8 @@ fn.prototype=FrequencyHistogramView.prototype={
//5khz以上
fftIdx+=fftSizeStep2;
};
var end=Math.min(Math.ceil(fftIdx),fftSize);
var end=Math.ceil(fftIdx); if(end==start)end++;
end=Math.min(end,fftSize);
//参考AudioGUI.java .drawHistogram方法
@ -276,8 +280,6 @@ fn.prototype=FrequencyHistogramView.prototype={
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根
@ -287,72 +289,81 @@ fn.prototype=FrequencyHistogramView.prototype={
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;
for(var i=0;i<2;i++){
var lineFloat=Math.max(1*scale,(width*widthRatio)/mirrorCount);//柱子宽度至少1个单位
var lineWN=Math.floor(lineFloat),lineWF=lineFloat-lineWN;//提取出小数部分
var spaceFloat=(width-mirrorCount*lineFloat)/(mirrorCount+1);//均匀间隔，首尾都留空，可能为负数，柱子将发生重叠
if(spaceFloat>0 && spaceFloat<1){
widthRatio=1; spaceFloat=0; //不够一个像素，丢弃不绘制间隔，重新计算
}else break;
};
//绘制柱子顶上峰值小横条
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++){
//绘制
var minHeight=set.minHeight*scale;
var XFloat=mirrorEnable?(width-lineWN)/2-spaceFloat:0;//镜像时，中间柱子位于正中心
for(var iMirror=0;iMirror<2;iMirror++){
if(iMirror){ ctx.save(); ctx.scale(-1,1); }
var xMirror=iMirror?width:0; //绘制镜像部分，不用drawImage(canvas)进行镜像绘制，提升兼容性（iOS微信小程序bug https://developers.weixin.qq.com/community/develop/doc/000aaca2148dc8a235a0fb8c66b000）
//绘制柱子
ctx.shadowBlur=set.shadowBlur*scale;
ctx.shadowColor=set.shadowColor;
for(var i=0,xFloat=XFloat,wFloat=0,x,y,w,h;i<lineCount;i++){
xFloat+=spaceFloat;
x=Math.floor(xFloat);
h=stripesH[i];
x=Math.floor(xFloat)-xMirror;
w=lineWN; wFloat+=lineWF; if(wFloat>=1){ w++; wFloat--; } //小数凑够1像素
h=Math.max(lastH[i],minHeight);
//绘制上半部分
if(originY!=0){
y=originY-h-stripeHeight;
if(y<0){y=0;};
ctx.fillStyle=stripeLinear1;
ctx.fillRect(x, y, lineWidth, stripeHeight);
y=originY-h;
ctx.fillStyle=linear1;
ctx.fillRect(x, y, w, h);
};
//绘制下半部分
if(originY!=height){
y=originY+h;
if(y+stripeHeight>height){
y=height-stripeHeight;
};
ctx.fillStyle=stripeLinear2;
ctx.fillRect(x, y, lineWidth, stripeHeight);
ctx.fillStyle=linear2;
ctx.fillRect(x, originY, w, h);
};
xFloat+=lineWidth;
xFloat+=w;
};
//绘制柱子顶上峰值小横条
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,wFloat=0,x,y,w,h;i<lineCount;i++){
xFloat+=spaceFloat;
x=Math.floor(xFloat)-xMirror;
w=lineWN; wFloat+=lineWF; if(wFloat>=1){ w++; wFloat--; } //小数凑够1像素
h=stripesH[i];
//绘制上半部分
if(originY!=0){
y=originY-h-stripeHeight;
if(y<0){y=0;};
ctx.fillStyle=stripeLinear1;
ctx.fillRect(x, y, w, stripeHeight);
};
//绘制下半部分
if(originY!=height){
y=originY+h;
if(y+stripeHeight>height){
y=height-stripeHeight;
};
ctx.fillStyle=stripeLinear2;
ctx.fillRect(x, y, w, stripeHeight);
};
xFloat+=w;
};
};
};
//镜像，从中间直接镜像即可
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();
if(iMirror){ ctx.restore(); }
if(!mirrorEnable) break;
};
if(frequencyData){

2
resources/assets/statics/public/js/recorder/recorder.mp3.min.js vendored
View File

File diff suppressed because one or more lines are too long