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
422f3103
Commit
422f3103
authored
Nov 18, 2024
by
liujiangnan
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
feat: 优化波形图
parent
cbc56f5e
Changes
3
Hide whitespace changes
Inline
Side-by-side
Showing
3 changed files
with
66 additions
and
3 deletions
+66
-3
form.component.css
src/app/form/form.component.css
+18
-0
form.component.html
src/app/form/form.component.html
+8
-0
form.component.ts
src/app/form/form.component.ts
+40
-3
No files found.
src/app/form/form.component.css
View file @
422f3103
...
...
@@ -120,3 +120,21 @@
color
:
#0beb40
;
user-select
:
text
;
/* 确保文本可以被选中 */
}
.zoom-controls
{
margin
:
10px
0
;
text-align
:
center
;
.zoom-button
{
margin
:
0
5px
;
padding
:
5px
15px
;
border
:
1px
solid
#ddd
;
border-radius
:
4px
;
background
:
#fff
;
cursor
:
pointer
;
&:hover
{
background
:
#f5f5f5
;
}
}
}
src/app/form/form.component.html
View file @
422f3103
...
...
@@ -16,6 +16,14 @@
</button>
</div>
<div
id=
"waveform"
></div>
<div
class=
"zoom-controls"
>
<button
(
click
)="
zoomWaveform
(
true
)"
class=
"zoom-button"
>
<i
nz-icon
nzType=
"zoom-in"
nzTheme=
"outline"
></i>
</button>
<button
(
click
)="
zoomWaveform
(
false
)"
class=
"zoom-button"
>
<i
nz-icon
nzType=
"zoom-out"
nzTheme=
"outline"
></i>
</button>
</div>
<div
*
ngIf=
"item.bg_audio_url"
>
<button
(
click
)="
togglePlayPause
()"
class=
"play-pause-button"
>
{{ isPlaying ? '暂停' : '播放' }}
...
...
src/app/form/form.component.ts
View file @
422f3103
...
...
@@ -53,7 +53,22 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
ngOnDestroy
()
{
}
// 添加缩放限制常量
private
readonly
MIN_PX_PER_SEC
=
50
;
// 最小缩放级别
private
readonly
MAX_PX_PER_SEC
=
8000
;
// 最大缩放级别
private
minPxPerSec
=
50
;
// 初始值,将在加载音频后动态计算
// 添加缩放控制方法
zoomWaveform
(
isZoomIn
:
boolean
)
{
const
currentPxPerSec
=
this
.
wavesurfer
.
params
.
minPxPerSec
;
let
newPxPerSec
=
isZoomIn
?
currentPxPerSec
*
1.2
:
currentPxPerSec
/
1.2
;
// 使用动态计算的 minPxPerSec
newPxPerSec
=
Math
.
max
(
this
.
minPxPerSec
,
Math
.
min
(
this
.
MAX_PX_PER_SEC
,
newPxPerSec
));
this
.
wavesurfer
.
zoom
(
newPxPerSec
);
}
init
()
{
this
.
hotZones
=
this
.
item
.
hotZones
||
[];
...
...
@@ -64,8 +79,30 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 使用 wavesurfer.js 绘制波形图
this
.
wavesurfer
=
WaveSurfer
.
create
({
container
:
'
#waveform
'
,
// 你需要在 HTML 中有一个对应的容器
waveColor
:
'
violet
'
,
progressColor
:
'
purple
'
waveColor
:
'
#4F4A85
'
,
progressColor
:
'
#383351
'
,
height
:
100
,
// 添加以下缩放相关配置
minPxPerSec
:
this
.
minPxPerSec
,
maxPxPerSec
:
this
.
MAX_PX_PER_SEC
,
scrollParent
:
true
// 允许水平滚动
});
// 添加鼠标滚轮缩放事件
document
.
querySelector
(
'
#waveform
'
).
addEventListener
(
'
wheel
'
,
(
e
)
=>
{
if
(
e
[
'
ctrlKey
'
]
||
e
[
'
metaKey
'
])
{
e
.
preventDefault
();
this
.
zoomWaveform
(
e
[
'
deltaY
'
]
<
0
);
}
});
// 监听音频加载完成事件
this
.
wavesurfer
.
on
(
'
ready
'
,
()
=>
{
const
duration
=
this
.
wavesurfer
.
getDuration
();
const
containerWidth
=
document
.
querySelector
(
'
#waveform
'
).
clientWidth
;
// 计算显示完整音频所需的最小缩放级别
this
.
minPxPerSec
=
Math
.
max
(
1
,
(
containerWidth
/
duration
)
*
0.9
);
// 0.9是为了留一些边距
// 初始显示完整波形
this
.
wavesurfer
.
zoom
(
this
.
minPxPerSec
);
});
// 监听播放完成事件
this
.
wavesurfer
.
on
(
'
finish
'
,
()
=>
{
...
...
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