Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in / Register
Toggle navigation
G
gs_carton
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Boards
Labels
Milestones
Merge Requests
0
Merge Requests
0
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
template admin
gs_carton
Commits
40fbdd7d
Commit
40fbdd7d
authored
Nov 18, 2024
by
liujiangnan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 音频加载
parent
0cefed3a
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
53 additions
and
9 deletions
+53
-9
form.component.css
src/app/form/form.component.css
+25
-0
form.component.html
src/app/form/form.component.html
+9
-1
form.component.ts
src/app/form/form.component.ts
+19
-8
No files found.
src/app/form/form.component.css
View file @
40fbdd7d
...
@@ -138,3 +138,28 @@
...
@@ -138,3 +138,28 @@
}
}
}
}
}
}
.waveform-container
{
position
:
relative
;
min-height
:
100px
;
nz-spin
{
position
:
absolute
;
top
:
50%
;
left
:
50%
;
transform
:
translate
(
-50%
,
-50%
);
.loading-text
{
display
:
flex
;
align-items
:
center
;
gap
:
8px
;
i
{
font-size
:
16px
;
}
span
{
font-size
:
14px
;
}
}
}
}
\ No newline at end of file
src/app/form/form.component.html
View file @
40fbdd7d
...
@@ -20,7 +20,15 @@
...
@@ -20,7 +20,15 @@
添加页面
添加页面
</button>
</button>
</div>
</div>
<div
id=
"waveform"
></div>
<div
class=
"waveform-container"
>
<div
id=
"waveform"
></div>
<nz-spin
*
ngIf=
"isLoading"
>
<div
class=
"loading-text"
>
<i
nz-icon
nzType=
"loading"
></i>
<span>
音频加载中...
</span>
</div>
</nz-spin>
</div>
<div
class=
"zoom-controls"
>
<div
class=
"zoom-controls"
>
<button
(
click
)="
zoomWaveform
(
true
)"
class=
"zoom-button"
>
<button
(
click
)="
zoomWaveform
(
true
)"
class=
"zoom-button"
>
<i
nz-icon
nzType=
"zoom-in"
nzTheme=
"outline"
></i>
<i
nz-icon
nzType=
"zoom-in"
nzTheme=
"outline"
></i>
...
...
src/app/form/form.component.ts
View file @
40fbdd7d
...
@@ -20,6 +20,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
...
@@ -20,6 +20,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
hotZones
:
any
[]
=
[];
// 存储热区数据
hotZones
:
any
[]
=
[];
// 存储热区数据
isCollapsed
:
boolean
[]
=
[];
// 存储每个热区的折叠状态
isCollapsed
:
boolean
[]
=
[];
// 存储每个热区的折叠状态
isLoading
:
boolean
=
false
;
// 添加加载状态标志
constructor
(
private
appRef
:
ApplicationRef
,
private
changeDetectorRef
:
ChangeDetectorRef
,
private
message
:
NzMessageService
)
{
constructor
(
private
appRef
:
ApplicationRef
,
private
changeDetectorRef
:
ChangeDetectorRef
,
private
message
:
NzMessageService
)
{
...
@@ -61,10 +63,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
...
@@ -61,10 +63,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 添加缩放控制方法
// 添加缩放控制方法
zoomWaveform
(
isZoomIn
:
boolean
)
{
zoomWaveform
(
isZoomIn
:
boolean
)
{
const
currentPxPerSec
=
this
.
wavesurfer
.
params
.
minPxPerSec
;
const
currentPxPerSec
=
this
.
wavesurfer
.
params
.
minPxPerSec
;
let
newPxPerSec
=
isZoomIn
let
newPxPerSec
=
isZoomIn
?
currentPxPerSec
*
1.2
?
currentPxPerSec
*
1.2
:
currentPxPerSec
/
1.2
;
:
currentPxPerSec
/
1.2
;
// 使用动态计算的 minPxPerSec
// 使用动态计算的 minPxPerSec
newPxPerSec
=
Math
.
max
(
this
.
minPxPerSec
,
Math
.
min
(
this
.
MAX_PX_PER_SEC
,
newPxPerSec
));
newPxPerSec
=
Math
.
max
(
this
.
minPxPerSec
,
Math
.
min
(
this
.
MAX_PX_PER_SEC
,
newPxPerSec
));
this
.
wavesurfer
.
zoom
(
newPxPerSec
);
this
.
wavesurfer
.
zoom
(
newPxPerSec
);
...
@@ -94,15 +96,23 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
...
@@ -94,15 +96,23 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this
.
zoomWaveform
(
e
[
'
deltaY
'
]
<
0
);
this
.
zoomWaveform
(
e
[
'
deltaY
'
]
<
0
);
}
}
});
});
// 添加加载开始事件监听
this
.
wavesurfer
.
on
(
'
loading
'
,
(
progress
)
=>
{
this
.
isLoading
=
true
;
this
.
changeDetectorRef
.
detectChanges
();
});
// 监听音频加载完成事件
// 监听音频加载完成事件
this
.
wavesurfer
.
on
(
'
ready
'
,
()
=>
{
this
.
wavesurfer
.
on
(
'
ready
'
,
()
=>
{
this
.
isLoading
=
false
;
const
duration
=
this
.
wavesurfer
.
getDuration
();
const
duration
=
this
.
wavesurfer
.
getDuration
();
const
containerWidth
=
document
.
querySelector
(
'
#waveform
'
).
clientWidth
;
const
containerWidth
=
document
.
querySelector
(
'
#waveform
'
).
clientWidth
;
// 计算显示完整音频所需的最小缩放级别
// 计算显示完整音频所需的最小缩放级别
this
.
minPxPerSec
=
Math
.
max
(
1
,
(
containerWidth
/
duration
)
*
0.9
);
// 0.9是为了留一些边距
this
.
minPxPerSec
=
Math
.
max
(
1
,
(
containerWidth
/
duration
)
*
0.9
);
// 0.9是为了留一些边距
// 初始显示完整波形
// 初始显示完整波形
this
.
wavesurfer
.
zoom
(
this
.
minPxPerSec
);
this
.
wavesurfer
.
zoom
(
this
.
minPxPerSec
);
this
.
changeDetectorRef
.
detectChanges
();
});
});
// 监听播放完成事件
// 监听播放完成事件
this
.
wavesurfer
.
on
(
'
finish
'
,
()
=>
{
this
.
wavesurfer
.
on
(
'
finish
'
,
()
=>
{
...
@@ -111,11 +121,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
...
@@ -111,11 +121,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this
.
wavesurfer
.
on
(
'
audioprocess
'
,
()
=>
{
this
.
wavesurfer
.
on
(
'
audioprocess
'
,
()
=>
{
this
.
updateCurrentTime
();
this
.
updateCurrentTime
();
});
});
//
this.wavesurfer.on('seek', () => {
this
.
wavesurfer
.
on
(
'
seek
'
,
()
=>
{
//
this.updateCurrentTime();
this
.
updateCurrentTime
();
//
});
});
if
(
this
.
item
.
bg_audio_url
)
{
if
(
this
.
item
.
bg_audio_url
)
{
this
.
isLoading
=
true
;
// 开始加载时设置状态
this
.
wavesurfer
.
load
(
this
.
item
.
bg_audio_url
);
this
.
wavesurfer
.
load
(
this
.
item
.
bg_audio_url
);
}
}
...
@@ -146,7 +157,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
...
@@ -146,7 +157,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this
.
hotZones
.
splice
(
index
,
1
);
this
.
hotZones
.
splice
(
index
,
1
);
this
.
isCollapsed
.
splice
(
index
,
1
);
this
.
isCollapsed
.
splice
(
index
,
1
);
}
}
/**
/**
* 储存图片数据
* 储存图片数据
* @param e
* @param e
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment