Commit 40fbdd7d authored by liujiangnan's avatar liujiangnan

feat: 音频加载

parent 0cefed3a
......@@ -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
......@@ -20,7 +20,15 @@
添加页面
</button>
</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">
<button (click)="zoomWaveform(true)" class="zoom-button">
<i nz-icon nzType="zoom-in" nzTheme="outline"></i>
......
......@@ -20,6 +20,8 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
hotZones: any[] = []; // 存储热区数据
isCollapsed: boolean[] = []; // 存储每个热区的折叠状态
isLoading: boolean = false; // 添加加载状态标志
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef, private message: NzMessageService) {
......@@ -61,10 +63,10 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 添加缩放控制方法
zoomWaveform(isZoomIn: boolean) {
const currentPxPerSec = this.wavesurfer.params.minPxPerSec;
let newPxPerSec = isZoomIn
? currentPxPerSec * 1.2
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);
......@@ -94,15 +96,23 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.zoomWaveform(e['deltaY'] < 0);
}
});
// 添加加载开始事件监听
this.wavesurfer.on('loading', (progress) => {
this.isLoading = true;
this.changeDetectorRef.detectChanges();
});
// 监听音频加载完成事件
this.wavesurfer.on('ready', () => {
this.isLoading = false;
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.changeDetectorRef.detectChanges();
});
// 监听播放完成事件
this.wavesurfer.on('finish', () => {
......@@ -111,11 +121,12 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.wavesurfer.on('audioprocess', () => {
this.updateCurrentTime();
});
// this.wavesurfer.on('seek', () => {
// this.updateCurrentTime();
// });
this.wavesurfer.on('seek', () => {
this.updateCurrentTime();
});
if (this.item.bg_audio_url) {
this.isLoading = true; // 开始加载时设置状态
this.wavesurfer.load(this.item.bg_audio_url);
}
......@@ -146,7 +157,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.hotZones.splice(index, 1);
this.isCollapsed.splice(index, 1);
}
/**
* 储存图片数据
* @param e
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment