Commit 40fbdd7d authored by liujiangnan's avatar liujiangnan

feat: 音频加载

parent 0cefed3a
...@@ -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
...@@ -20,7 +20,15 @@ ...@@ -20,7 +20,15 @@
添加页面 添加页面
</button> </button>
</div> </div>
<div class="waveform-container">
<div id="waveform"></div> <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>
......
...@@ -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) {
...@@ -94,8 +96,15 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -94,8 +96,15 @@ 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;
// 计算显示完整音频所需的最小缩放级别 // 计算显示完整音频所需的最小缩放级别
...@@ -103,6 +112,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -103,6 +112,7 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 初始显示完整波形 // 初始显示完整波形
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);
} }
......
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