音频流转波形图

package.json

@@ -39,7 +39,9 @@
     "vue3-scroll-seamless": "^1.0.6",
     "vue3-smooth-scroll": "^0.8.1",
     "vue3-virtual-scroll-list": "^0.2.1",
+    "waveform-data": "^4.5.0",
     "wavesurfer": "^1.3.4",
+    "wavesurfer.js": "^7.8.6",
     "xlsx": "^0.18.5",
     "xlsx-js-style": "^1.2.0"
   },

src/views/AIStation/RecyclePumpPage/RecyclePumpHistoryPage.vue

@@ -3,7 +3,7 @@ import {reactive, ref, onMounted, watch} from "vue";
 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';
 const RecyclePumpData = ref([]);
 const params = ref({})
 const options = ref([])
@@ -43,74 +43,44 @@ function selectRow(row) {
 }
 
 const audioPlayer = ref(null);
-
-const waveformCanvas = ref(null);
-let audioContext = null;
-let analyser = null;
-let source = null;
-let buffer = null;
+const waveform = ref(null);
+const wavesurfer = ref(null);
 function playAudio() {
-  getAudio().then(res => {
+  getAudio().then(async res => {
     const audioSrc = URL.createObjectURL(new Blob([res]));
     audioPlayer.value.src = audioSrc;
-    console.log('res',res)
-    fetchAndProcessAudio()
+    // 从接口获取音频流
+    const audioStream = await fetchAudioStream();
+    const audioBlob = new Blob([audioStream], { type: 'audio/mp3' });
+    const audioObjectUrl = URL.createObjectURL(audioBlob);
+
+    // 创建 WaveSurfer 实例
+    wavesurfer.value = WaveSurfer.create({
+      container: waveform.value,
+      // 未播放波形的颜色
+      waveColor: 'violet',
+      // 已播放波形的颜色
+      progressColor: 'purple',
+      // 波形图的高度，单位为px
+      height: 150,
+      // 波形条的宽度
+      barWidth: 2,
+      responsive: true,
+      normalize: true,
+    });
+    // 使用 WaveSurfer 加载音频流
+    wavesurfer.value.load(audioObjectUrl);
+
   })
 }
 
-const fetchAndProcessAudio = async () => {
-  try {
-    const response = await fetch('http://192.168.0.14:8099/busFireExtinguisher/test');
-    if (!response.ok) throw new Error('Network response was not ok');
-
-    const audioData = await response.arrayBuffer();
-    const audioContext = new (window.AudioContext || window.webkitAudioContext)();
-
-    // 解码音频数据
-    const buffer = await audioContext.decodeAudioData(audioData);
-    // 绘制波形图
-    drawWaveform(buffer);
-  } catch (error) {
-    console.error('Error fetching and processing audio:', error);
-  }
-};
-// 绘制波形图
-const drawWaveform = (buffer) => {
-  if (!waveformCanvas.value) return;
-
-  const canvas = waveformCanvas.value;
-  const ctx = canvas.getContext('2d');
-  const channelData = buffer.getChannelData(0); // 获取第一个声道的数据
-
-  // 设置 canvas
-  ctx.clearRect(0, 0, canvas.width, canvas.height);
-  ctx.fillStyle = '#000';
-  ctx.fillRect(0, 0, canvas.width, canvas.height);
-
-  const sliceWidth = canvas.width * 1.0 / channelData.length;
-  let x = 0;
-
-  ctx.lineWidth = 2;
-  ctx.strokeStyle = '#00f';
-  ctx.beginPath();
-  console.log('channelData',channelData)
-  console.log('channelData',channelData.length)
-  for (let i = 0; i < channelData.length; i++) {
-    const v = (channelData[i] + 1) / 2; // Normalize to [0, 1]
-    const y = v * canvas.height; // Map to [0, height]
-    if (i === 0) {
-      ctx.moveTo(x, y);
-    } else {
-      ctx.lineTo(x, y);
-    }
-    x += sliceWidth;
+async function fetchAudioStream() {
+  const response = await fetch('http://192.168.0.14:8099/busFireExtinguisher/test');
+  if (!response.ok) {
+    throw new Error('Network response was not ok');
   }
-
-  ctx.stroke();
-};
-
-
-
+  return response.arrayBuffer(); // 或 response.blob() 取决于返回的流类型
+}
 // 初始化时选中第一行
 onMounted(() => {
   if (RecyclePumpData.value.length > 0) {
@@ -304,7 +274,7 @@ getSupplys()
           <span>{{ selectedRow.audioUrl }}</span>
         </div>
 
-        <canvas ref="waveformCanvas" width="800" height="200"></canvas>
+        <div ref="waveform" style="width: 800px; height: 150px;"></div>
         <div class="details-item">
           <span>音频:</span>
           <audio ref="audioPlayer" controls></audio>
@@ -317,6 +287,9 @@ getSupplys()
 </template>
 
 <style scoped>
+#waveform {
+  border: 1px solid #ccc;
+}
 .RecyclePumpPage-container {
   width: 100%;
   background-color: white;