Commit cd5503d8 authored by liujiangnan's avatar liujiangnan

feat: 暂存

parent 3d6d7515
...@@ -13470,6 +13470,11 @@ ...@@ -13470,6 +13470,11 @@
} }
} }
}, },
"wavesurfer.js": {
"version": "4.0.0",
"resolved": "https://registry.npmmirror.com/wavesurfer.js/-/wavesurfer.js-4.0.0.tgz",
"integrity": "sha512-7xJhFRnHotB4VqnAI2tmkXFoj/9FydqOvtJHXOuUP1UXQfc7NMBSAfql0hiaywgu4DT1iUfRK74m1lMGdKfznw=="
},
"wbuf": { "wbuf": {
"version": "1.7.3", "version": "1.7.3",
"resolved": "https://registry.npmmirror.com/wbuf/-/wbuf-1.7.3.tgz", "resolved": "https://registry.npmmirror.com/wbuf/-/wbuf-1.7.3.tgz",
......
...@@ -28,12 +28,13 @@ ...@@ -28,12 +28,13 @@
"ali-oss": "^6.5.1", "ali-oss": "^6.5.1",
"compressing": "^1.5.0", "compressing": "^1.5.0",
"ng-zorro-antd": "^8.5.2", "ng-zorro-antd": "^8.5.2",
"node-sass": "4.0.0",
"querystring-es3": "^0.2.1",
"rxjs": "~6.5.4", "rxjs": "~6.5.4",
"spark-md5": "^3.0.0", "spark-md5": "^3.0.0",
"tslib": "^1.10.0", "tslib": "^1.10.0",
"zone.js": "~0.10.2", "wavesurfer.js": "^4.0.0",
"node-sass": "4.0.0", "zone.js": "~0.10.2"
"querystring-es3": "^0.2.1"
}, },
"devDependencies": { "devDependencies": {
"@angular-devkit/build-angular": "~0.900.3", "@angular-devkit/build-angular": "~0.900.3",
......
...@@ -45,10 +45,6 @@ ...@@ -45,10 +45,6 @@
<fa-icon icon="cog"></fa-icon> <fa-icon icon="cog"></fa-icon>
</div> </div>
</ng-template> </ng-template>
</div> </div>
<div class="p-progress ml-2" (click)="onBtnPlay()" *ngIf="audioUrl || audioBlob"> <div class="p-progress ml-2" (click)="onBtnPlay()" *ngIf="audioUrl || audioBlob">
......
...@@ -6,3 +6,65 @@ ...@@ -6,3 +6,65 @@
height: 100%; height: 100%;
} }
.play-pause-button {
background-color: #4CAF50; /* 绿色背景 */
border: none;
color: white; /* 白色文字 */
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 10px 20px;
cursor: pointer;
border-radius: 5px; /* 圆角 */
transition: background-color 0.3s ease; /* 背景色过渡效果 */
}
.play-pause-button:hover {
background-color: #45a049; /* 悬停时的背景色 */
}
.current-time-display {
font-size: 14px;
color: #333; /* 深灰色文字 */
margin-top: 10px;
padding: 5px;
background-color: #f9f9f9; /* 浅灰色背景 */
border: 1px solid #ddd; /* 边框 */
border-radius: 5px; /* 圆角 */
display: inline-block;
}
.add-hot-zone-button {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-bottom: 10px;
}
.hot-zone-container {
margin-bottom: 15px;
border: 1px solid #ddd;
border-radius: 5px;
padding: 10px;
}
.toggle-button {
background-color: #6c757d;
color: white;
padding: 5px 10px;
border: none;
border-radius: 5px;
cursor: pointer;
margin-bottom: 5px;
}
.hot-zone-content {
padding: 10px;
background-color: #f8f9fa;
border-radius: 5px;
}
<div class="model-content"> <div class="model-content">
<div style="display: flex; align-items: center; margin-top: 20px;">
<h4> 音频添加: </h4>
<app-audio-recorder
style="margin-left: 20px"
[audioUrl]="item.bg_audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'bg_audio_url', item)">
</app-audio-recorder>
</div>
<div id="waveform"></div>
<div *ngIf="item.bg_audio_url">
<button (click)="togglePlayPause()" class="play-pause-button">
{{ isPlaying ? '暂停' : '播放' }}
</button>
<div class="current-time-display">当前播放时间: {{ currentTime }} 毫秒</div>
</div>
<button (click)="addHotZone()" class="add-hot-zone-button">添加热区</button>
<div *ngFor="let hotZone of hotZones; let i = index" class="hot-zone-container">
<button (click)="toggleCollapse(i)" class="toggle-button">
{{ isCollapsed[i] ? '展开' : '折叠' }}
</button>
<div *ngIf="!isCollapsed[i]" class="hot-zone-content">
<app-custom-hot-zone
[bgItem]="bgItem"
[hotZoneItemArr]="hotZoneItemArr"
[hotZoneFontObj]="null"
(save)="saveHotZone($event)"
>
</app-custom-hot-zone>
</div>
</div>
<div style="padding: 20px"> <div style="padding: 20px">
<app-custom-hot-zone <app-custom-hot-zone
[bgItem]="bgItem" [bgItem]="bgItem"
...@@ -10,14 +42,7 @@ ...@@ -10,14 +42,7 @@
(save)="saveHotZone($event)" (save)="saveHotZone($event)"
> >
</app-custom-hot-zone> </app-custom-hot-zone>
<div style="display: flex; align-items: center; margin-top: 20px;"> </div>
<h4> 音频添加: </h4>
<app-audio-recorder
style="margin-left: 20px"
[audioUrl]="item.bg_audio_url"
(audioUploaded)="onAudioUploadSuccess($event, 'bg_audio_url', item)">
</app-audio-recorder>
</div>
</div> </div>
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef} from '@angular/core'; import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core';
import {NzMessageService} from "ng-zorro-antd"; import { NzMessageService } from "ng-zorro-antd";
import WaveSurfer from 'wavesurfer.js';
@Component({ @Component({
selector: 'app-form', selector: 'app-form',
...@@ -16,9 +17,15 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -16,9 +17,15 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
hotZoneItemArr = []; hotZoneItemArr = [];
animaArr = []; animaArr = [];
picArr; picArr;
wavesurfer;
isPlaying: boolean = false; // 用于跟踪播放状态
currentTime: number = 0;
hotZones: any[] = []; // 存储热区数据
isCollapsed: boolean[] = []; // 存储每个热区的折叠状态
constructor(private appRef: ApplicationRef,private changeDetectorRef: ChangeDetectorRef, private message: NzMessageService) {
constructor(private appRef: ApplicationRef, private changeDetectorRef: ChangeDetectorRef, private message: NzMessageService) {
} }
...@@ -59,9 +66,42 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -59,9 +66,42 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
this.animaArr = this.item.animaArr || []; this.animaArr = this.item.animaArr || [];
this.picArr = this.item.picArr || []; this.picArr = this.item.picArr || [];
// 使用 wavesurfer.js 绘制波形图
this.wavesurfer = WaveSurfer.create({
container: '#waveform', // 你需要在 HTML 中有一个对应的容器
waveColor: 'violet',
progressColor: 'purple'
});
// 监听播放完成事件
this.wavesurfer.on('finish', () => {
this.isPlaying = false; // 重置播放状态
});
this.wavesurfer.on('audioprocess', () => {
this.updateCurrentTime();
});
this.wavesurfer.on('seek', () => {
this.updateCurrentTime();
});
if (this.item.bg_audio_url) {
this.wavesurfer.load(this.item.bg_audio_url);
}
this.refreshAnimaArr(); this.refreshAnimaArr();
} }
updateCurrentTime() {
this.currentTime = Math.floor(this.wavesurfer.getCurrentTime() * 1000); // 转换为毫秒
}
addHotZone() {
this.hotZones.push({}); // 添加一个新的热区
this.isCollapsed.push(false); // 初始化为展开状态
}
toggleCollapse(index: number) {
this.isCollapsed[index] = !this.isCollapsed[index]; // 切换折叠状态
}
/** /**
* 储存图片数据 * 储存图片数据
* @param e * @param e
...@@ -79,6 +119,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -79,6 +119,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
onAudioUploadSuccess(e, key, it) { onAudioUploadSuccess(e, key, it) {
console.log('e: ', e); console.log('e: ', e);
it[key] = e.url; it[key] = e.url;
if (key === 'bg_audio_url') {
this.wavesurfer.load(e.url);
}
this.save(); this.save();
} }
...@@ -101,6 +144,15 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -101,6 +144,15 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
); );
} }
togglePlayPause() {
if (this.isPlaying) {
this.wavesurfer.pause();
} else {
this.wavesurfer.play();
}
this.isPlaying = !this.isPlaying; // 切换播放状态
}
refreshAnimaArr() { refreshAnimaArr() {
const tmpArr = []; const tmpArr = [];
this.hotZoneItemArr.forEach((item: any) => { this.hotZoneItemArr.forEach((item: any) => {
......
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