Commit cd5503d8 authored by liujiangnan's avatar liujiangnan

feat: 暂存

parent 3d6d7515
......@@ -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": {
"version": "1.7.3",
"resolved": "https://registry.npmmirror.com/wbuf/-/wbuf-1.7.3.tgz",
......
......@@ -45,10 +45,6 @@
<fa-icon icon="cog"></fa-icon>
</div>
</ng-template>
</div>
<div class="p-progress ml-2" (click)="onBtnPlay()" *ngIf="audioUrl || audioBlob">
......
......@@ -6,3 +6,65 @@
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 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">
<app-custom-hot-zone
[bgItem]="bgItem"
......@@ -10,14 +42,7 @@
(save)="saveHotZone($event)"
>
</app-custom-hot-zone>
<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>
</div>
import {Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef} from '@angular/core';
import {NzMessageService} from "ng-zorro-antd";
import { Component, EventEmitter, Input, OnDestroy, OnChanges, OnInit, Output, ApplicationRef, ChangeDetectorRef } from '@angular/core';
import { NzMessageService } from "ng-zorro-antd";
import WaveSurfer from 'wavesurfer.js';
@Component({
selector: 'app-form',
......@@ -16,9 +17,15 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
hotZoneItemArr = [];
animaArr = [];
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 {
this.animaArr = this.item.animaArr || [];
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();
}
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
......@@ -79,6 +119,9 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
onAudioUploadSuccess(e, key, it) {
console.log('e: ', e);
it[key] = e.url;
if (key === 'bg_audio_url') {
this.wavesurfer.load(e.url);
}
this.save();
}
......@@ -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() {
const tmpArr = [];
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