Commit 422f3103 authored by liujiangnan's avatar liujiangnan

feat: 优化波形图

parent cbc56f5e
...@@ -120,3 +120,21 @@ ...@@ -120,3 +120,21 @@
color: #0beb40; color: #0beb40;
user-select: text; /* 确保文本可以被选中 */ user-select: text; /* 确保文本可以被选中 */
} }
.zoom-controls {
margin: 10px 0;
text-align: center;
.zoom-button {
margin: 0 5px;
padding: 5px 15px;
border: 1px solid #ddd;
border-radius: 4px;
background: #fff;
cursor: pointer;
&:hover {
background: #f5f5f5;
}
}
}
...@@ -16,6 +16,14 @@ ...@@ -16,6 +16,14 @@
</button> </button>
</div> </div>
<div id="waveform"></div> <div id="waveform"></div>
<div class="zoom-controls">
<button (click)="zoomWaveform(true)" class="zoom-button">
<i nz-icon nzType="zoom-in" nzTheme="outline"></i>
</button>
<button (click)="zoomWaveform(false)" class="zoom-button">
<i nz-icon nzType="zoom-out" nzTheme="outline"></i>
</button>
</div>
<div *ngIf="item.bg_audio_url"> <div *ngIf="item.bg_audio_url">
<button (click)="togglePlayPause()" class="play-pause-button"> <button (click)="togglePlayPause()" class="play-pause-button">
{{ isPlaying ? '暂停' : '播放' }} {{ isPlaying ? '暂停' : '播放' }}
......
...@@ -53,7 +53,22 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -53,7 +53,22 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
ngOnDestroy() { ngOnDestroy() {
} }
// 添加缩放限制常量
private readonly MIN_PX_PER_SEC = 50; // 最小缩放级别
private readonly MAX_PX_PER_SEC = 8000; // 最大缩放级别
private minPxPerSec = 50; // 初始值,将在加载音频后动态计算
// 添加缩放控制方法
zoomWaveform(isZoomIn: boolean) {
const currentPxPerSec = this.wavesurfer.params.minPxPerSec;
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);
}
init() { init() {
this.hotZones = this.item.hotZones || []; this.hotZones = this.item.hotZones || [];
...@@ -64,8 +79,30 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy { ...@@ -64,8 +79,30 @@ export class FormComponent implements OnInit, OnChanges, OnDestroy {
// 使用 wavesurfer.js 绘制波形图 // 使用 wavesurfer.js 绘制波形图
this.wavesurfer = WaveSurfer.create({ this.wavesurfer = WaveSurfer.create({
container: '#waveform', // 你需要在 HTML 中有一个对应的容器 container: '#waveform', // 你需要在 HTML 中有一个对应的容器
waveColor: 'violet', waveColor: '#4F4A85',
progressColor: 'purple' progressColor: '#383351',
height: 100,
// 添加以下缩放相关配置
minPxPerSec: this.minPxPerSec,
maxPxPerSec: this.MAX_PX_PER_SEC,
scrollParent: true // 允许水平滚动
});
// 添加鼠标滚轮缩放事件
document.querySelector('#waveform').addEventListener('wheel', (e) => {
if (e['ctrlKey'] || e['metaKey']) {
e.preventDefault();
this.zoomWaveform(e['deltaY'] < 0);
}
});
// 监听音频加载完成事件
this.wavesurfer.on('ready', () => {
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.wavesurfer.on('finish', () => { this.wavesurfer.on('finish', () => {
......
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