循环泵的音频波形图

src/api/AIStation/RecyclePump.js

@@ -28,5 +28,5 @@ export const exportRecyclePumpAlarmData = (item) => {
 }
 
 export const getAudio = () => {
-    return httpTwo.get(`/busFireExtinguisher/test`,'','',{responseType:'blob'})
+    return httpTwo.get(`/busFireExtinguisher/test3`,'','',{responseType:'blob'})
 }

src/views/AIStation/RecyclePumpPage/RecyclePumpHistoryPage.vue

@@ -8,7 +8,7 @@ const RecyclePumpData = ref([]);
 const params = ref({})
 const options = ref([])
 const enterpriseId = ref();
-const loading = ref(true);
+const loading = ref(false);
 // 分页
 const Page = reactive({ total: 0, rows: 20, page: 1 });
 
@@ -72,6 +72,7 @@ function zoom(zoomLevel) {
 }
 /** 获取音频*/
 function playAudio() {
+  loading.value = true
   // 如果有波形图，则摧毁现有波形图，渲染新的波形图
   if (wavesurfer.value) {
     wavesurfer.value.destroy();
@@ -131,9 +132,10 @@ function playAudio() {
     });
     // 使用 WaveSurfer 加载音频流
     wavesurfer.value.load(audioSrc);
+    loading.value = false
   })
 }
-// 初始化时选中第一行
+playAudio()
 // 初始化时选中第一行
 watch(
     ()=>RecyclePumpData.value,
@@ -334,6 +336,7 @@ defineExpose({
             </div>
           </el-col>
         </el-row>
+        <div v-loading="loading">
         <div class="details-item">
           <span>波形图:</span>
 <!--          <span>{{ selectedRow.audioUrl }}</span>-->
@@ -342,10 +345,11 @@ defineExpose({
         <div ref="waveform" style="width: 800px; height: 150px;"></div>
         <!-- 时间轴容器 -->
         <div ref="timeline" style="width: 100%; height: 30px;"></div>
+        </div>
         <div class="details-item">
           <span>音频:</span>
           <audio ref="audioPlayer" controls></audio>
-          <button @click="playAudio">获取音频</button>
+<!--          <button @click="playAudio">获取音频</button>-->
           <button @click="playAudioRegion">播放区域</button>
           <button @click="stopPlayAudioRegion">暂停播放区域</button>
           <button @click="zoom(400)">放大</button>

src/views/AIStation/RecyclePumpPage/RecyclePumpNewDataPage.vue

 <script setup>
 import {reactive, ref, onMounted, watch} from "vue";
 import {getPipListNewData} from "../../../api/AIStation/PipelineTemp.js";
-import {getRecycleListHistoryData, getRecycleListNewData} from "../../../api/AIStation/RecyclePump.js";
+import {getAudio, getRecycleListHistoryData, getRecycleListNewData} from "../../../api/AIStation/RecyclePump.js";
 import store from "../../../store/index.js";
+import WaveSurfer from "wavesurfer.js";
+import RegionsPlugin from "wavesurfer.js/dist/plugin/wavesurfer.regions.js";
+import TimelinePlugin from "wavesurfer.js/dist/plugin/wavesurfer.timeline.js";
 
 const RecyclePumpData = ref([]);
 const params = ref({})
 const options = ref([])
 const enterpriseId = ref();
-const loading = ref(true);
+const loading = ref(false);
 // 分页
 const Page = reactive({ total: 0, rows: 20, page: 1 });
 
@@ -43,6 +46,103 @@ function selectRow(row) {
   selectedRowIndex.value = index;
 }
 
+const audioPlayer = ref(null);
+const waveform = ref(null);
+const timeline = ref(null);
+const wavesurfer = ref(null);
+/** 播放区域*/
+function playAudioRegion() {
+  let region = Object.values(wavesurfer.value.regions.list)[0];
+  region.play();
+}
+/** 停止播放区域*/
+function stopPlayAudioRegion() {
+  wavesurfer.value.pause();
+}
+/** 放大*/
+function zoom(zoomLevel) {
+  let region = Object.values(wavesurfer.value.regions.list)[0];
+  if (region) {
+    const start = region.start; // 区域开始时间
+    const end = region.end;     // 区域结束时间
+
+    // const zoomLevel = 400; // 设置放大级别（可以根据需求调整）
+
+    // 加载后进行缩放
+    wavesurfer.value.seekTo(start / wavesurfer.value.getDuration()); // 移动到开始时间
+    wavesurfer.value.zoom(zoomLevel); // 设置缩放级别
+    // wavesurfer.value.play(); // 播放新的音频段
+  }
+}
+/** 获取音频*/
+function playAudio() {
+  loading.value = true
+  // 如果有波形图，则摧毁现有波形图，渲染新的波形图
+  if (wavesurfer.value) {
+    wavesurfer.value.destroy();
+  }
+  getAudio().then(async res => {
+    const audioSrc = URL.createObjectURL(new Blob([res]));
+    // 播放器和波形图赋值
+    audioPlayer.value.src = audioSrc;
+    // 创建 WaveSurfer 实例
+    wavesurfer.value = WaveSurfer.create({
+      container: waveform.value,
+      // 未播放波形的颜色
+      waveColor: 'violet',
+      // 已播放波形的颜色
+      progressColor: 'purple',
+      // 波形图的高度，单位为px
+      height: 150,
+      // 波形条的宽度
+      barWidth: 2,
+      responsive: true,
+      normalize: true,
+      plugins: [
+        // 区域选择插件
+        RegionsPlugin.create(
+            {
+              regionsMinLength: 2,
+              regions: [
+                {
+                  start: 5,
+                  end: 15,
+                  loop: false,
+                  color: 'hsla(200, 50%, 70%, 0.4)',
+                  minLength: 1,
+
+                }
+              ],
+              // 拖动选择
+              dragSelection: {
+                slop: 5
+              }
+            }
+        ),
+        // 时间轴插件
+        TimelinePlugin.create({
+          container: timeline.value,
+          fontSize: 14,
+          //主要时间标签颜色
+          primaryColor: "#9191a5",
+          //主要时间文字颜色
+          primaryFontColor: "#9191a5",
+          //次要时间标签颜色
+          secondaryColor: "#9191a5",
+          //次要时间文字颜色
+          secondaryFontColor: "#9191a5",
+        })
+      ]
+    });
+    // 使用 WaveSurfer 加载音频流
+    wavesurfer.value.load(audioSrc);
+    loading.value = false
+  })
+}
+
+playAudio()
+
+
 // 初始化时选中第一行
 watch(
     ()=>RecyclePumpData.value,
@@ -247,13 +347,25 @@ defineExpose({
             </div>
           </el-col>
         </el-row>
-        <div class="details-item">
+        <div v-loading="loading">
+        <div class="details-item" >
           <span>波形图:</span>
 <!--          <span>{{ selectedRow.audioUrl }}</span>-->
         </div>
+
+        <div ref="waveform" style="width: 800px; height: 150px;"></div>
+        <!-- 时间轴容器 -->
+        <div ref="timeline" style="width: 100%; height: 30px;"></div>
+        </div>
         <div class="details-item">
           <span>音频:</span>
-<!--          <span>{{ selectedRow.audioUrl }}</span>-->
+          <audio ref="audioPlayer" controls></audio>
+<!--          <button @click="playAudio">获取音频</button>-->
+          <button @click="playAudioRegion">播放区域</button>
+          <button @click="stopPlayAudioRegion">暂停播放区域</button>
+          <button @click="zoom(400)">放大</button>
+          <button @click="zoom(1)">还原</button>
+          <!--          <span>{{ selectedRow.audioUrl }}</span>-->
         </div>
       </div>
     </div>