波形图放大问题

src/views/AIStation/RecyclePumpPage/RecyclePumpHistoryPage.vue

@@ -46,6 +46,9 @@ function selectRow(row) {
 
 const audioPlayer = ref(null);
 const waveform = ref(null);
+const isSelecting = ref(false);
+const selectionStart = ref(0);
+const selectionEnd = ref(0);
 const timeline = ref(null);
 const wavesurfer = ref(null);
 function playAudio() {
@@ -77,6 +80,9 @@ function playAudio() {
         RegionsPlugin.create(),
         TimelinePlugin.create({
           container: timeline.value,
+          formatTime: (seconds) => {
+            return `${Math.floor(seconds)}s`;
+          },
           fontSize: 14,
           //主要时间标签颜色
           primaryColor: "#9191a5",
@@ -91,10 +97,60 @@ function playAudio() {
     });
     // 使用 WaveSurfer 加载音频流
     wavesurfer.value.load(audioObjectUrl);
-
+    wavesurfer.value.on('region-created', (region) => {
+      console.log('区域创建:', region);
+    });
   })
 }
+const startSelection = (event) => {
+  isSelecting.value = true;
+  selectionStart.value = wavesurfer.value.getCurrentTime();
+};
+const endSelection = (event) => {
+  if (isSelecting.value) {
+    isSelecting.value = false;
+    selectionEnd.value = wavesurfer.value.getCurrentTime();
+    createRegion(selectionStart.value, selectionEnd.value);
+    zoomIn(); // 选中后自动放大
+  }
+};
+
 
+const createRegion = (start, end) => {
+  if (end > start) {
+    wavesurfer.value.addRegion({
+      start: start,
+      end: end,
+      color: 'rgba(255, 0, 0, 0.5)',
+      drag: false // 禁止拖动区域
+    });
+  }
+};
+const zoomIn = () => {
+  if (selectionStart.value >= 0 && selectionEnd.value > selectionStart.value) {
+    const duration = selectionEnd.value - selectionStart.value;
+    wavesurfer.value.zoom(10); // 放大波形图
+
+    // 调整时间轴为1秒间隔
+    wavesurfer.value.getCurrentTime();
+    const timeline = document.querySelector('#timeline');
+    timeline.innerHTML = ''; // 清空原时间轴
+
+    for (let i = Math.floor(selectionStart.value); i <= Math.ceil(selectionEnd.value); i++) {
+      const timeMarker = document.createElement('div');
+      timeMarker.innerText = `${i}s`;
+      timeMarker.style.position = 'absolute';
+      timeMarker.style.left = `${(i - selectionStart.value) / duration * 100}%`;
+      timeline.appendChild(timeMarker);
+    }
+  }
+};
+const zoomOut = () => {
+  wavesurfer.value.zoom(1); // 还原波形图
+  // 还原时间轴显示
+  const timeline = document.querySelector('#timeline');
+  timeline.innerHTML = ''; // 清空原时间轴
+};
 async function fetchAudioStream() {
   const response = await fetch('http://192.168.0.14:8099/busFireExtinguisher/test');
   if (!response.ok) {
@@ -251,13 +307,15 @@ defineExpose({
 <!--          <span>{{ selectedRow.audioUrl }}</span>-->
         </div>
 
-        <div ref="waveform" style="width: 800px; height: 150px;"></div>
+        <div ref="waveform" @mousedown="startSelection" @mouseup="endSelection" style="width: 800px; height: 150px;"></div>
         <!-- 时间轴容器 -->
         <div ref="timeline" style="width: 100%; height: 30px;"></div>
         <div class="details-item">
           <span>音频:</span>
           <audio ref="audioPlayer" controls></audio>
           <button @click="playAudio">获取音频</button>
+          <button @click="zoomIn">放大区域</button>
+          <button @click="zoomOut">缩小区域</button>
 <!--          <span>{{ selectedRow.audioUrl }}</span>-->
         </div>
       </div>