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 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>
......
...@@ -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
......
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