波形图显示时间轴

src/views/AIStation/RecyclePumpPage/RecyclePumpHistoryPage.vue

@@ -4,6 +4,8 @@ import {getPipListHistoryData} from "../../../api/AIStation/PipelineTemp.js";
 import {getAudio,getRecycleListAlarmData, getRecycleListHistoryData} from "../../../api/AIStation/RecyclePump.js";
 import store from "../../../store/index.js";
 import WaveSurfer from 'wavesurfer.js';
+import TimelinePlugin from 'wavesurfer.js/dist/plugins/timeline';
+import RegionsPlugin from 'wavesurfer.js/dist/plugins/regions';
 const RecyclePumpData = ref([]);
 const params = ref({})
 const options = ref([])
@@ -44,8 +46,12 @@ function selectRow(row) {
 
 const audioPlayer = ref(null);
 const waveform = ref(null);
+const timeline = ref(null);
 const wavesurfer = ref(null);
 function playAudio() {
+  if (wavesurfer.value) {
+    wavesurfer.value.destroy();
+  }
   getAudio().then(async res => {
     const audioSrc = URL.createObjectURL(new Blob([res]));
     audioPlayer.value.src = audioSrc;
@@ -67,6 +73,21 @@ function playAudio() {
       barWidth: 2,
       responsive: true,
       normalize: true,
+      plugins: [
+        RegionsPlugin.create(),
+        TimelinePlugin.create({
+          container: timeline.value,
+          fontSize: 14,
+          //主要时间标签颜色
+          primaryColor: "#9191a5",
+          //主要时间文字颜色
+          primaryFontColor: "#9191a5",
+          //次要时间标签颜色
+          secondaryColor: "#9191a5",
+          //次要时间文字颜色
+          secondaryFontColor: "#9191a5",
+        })
+      ]
     });
     // 使用 WaveSurfer 加载音频流
     wavesurfer.value.load(audioObjectUrl);
@@ -231,6 +252,8 @@ defineExpose({
         </div>
 
         <div ref="waveform" 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>