音频流转成波形图（初步，40s的音频就绘制不了了）

public/config.js

@@ -3,6 +3,12 @@
 //  export const WithinSERVEICE='http://192.168.1.252:8001'
 // export const ExternalSERVEICE='http://192.168.10.241:5013'
 // export const WithinSERVEICE='http://192.168.10.241:5013'
+
+
+// 打包地址
+// export const ExternalSERVEICE='http://106.3.97.198:20052'
+// export const WithinSERVEICE='http://106.3.97.198:20052'
+
 export const ExternalSERVEICE='http://localhost:5013'
 export const WithinSERVEICE='http://localhost:5013'
 export const CURRLOGO="LOGO_gangyi.png"

src/api/AIStation/RecyclePump.js

@@ -26,3 +26,7 @@ export const exportRecyclePumpHistoryData = (item) => {
 export const exportRecyclePumpAlarmData = (item) => {
     return httpTwo.get(`/buscirculatingpumpalarm/export?stationId=${item.stationId}&alarmStatus=${item.alarmStatus}&alarmType=${item.alarmType}&beginTime=${item.beginTime}&endTime=${item.endTime}`,'','',{responseType:'blob'})
 }
+
+export const getAudio = () => {
+    return httpTwo.get(`/busFireExtinguisher/test`,'','',{responseType:'blob'})
+}

src/views/AIStation/RecyclePumpPage/RecyclePumpHistoryPage.vue

 <script setup>
 import {reactive, ref, onMounted, watch} from "vue";
 import {getPipListHistoryData} from "../../../api/AIStation/PipelineTemp.js";
-import {getRecycleListAlarmData, getRecycleListHistoryData} from "../../../api/AIStation/RecyclePump.js";
+import {getAudio,getRecycleListAlarmData, getRecycleListHistoryData} from "../../../api/AIStation/RecyclePump.js";
 import store from "../../../store/index.js";
 
 const RecyclePumpData = ref([]);
@@ -42,6 +42,75 @@ function selectRow(row) {
   selectedRowIndex.value = index;
 }
 
+const audioPlayer = ref(null);
+
+const waveformCanvas = ref(null);
+let audioContext = null;
+let analyser = null;
+let source = null;
+let buffer = null;
+function playAudio() {
+  getAudio().then(res => {
+    const audioSrc = URL.createObjectURL(new Blob([res]));
+    audioPlayer.value.src = audioSrc;
+    console.log('res',res)
+    fetchAndProcessAudio()
+  })
+}
+
+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;
+  }
+
+  ctx.stroke();
+};
+
+
+
 // 初始化时选中第一行
 onMounted(() => {
   if (RecyclePumpData.value.length > 0) {
@@ -234,8 +303,12 @@ getSupplys()
           <span>波形图:</span>
           <span>{{ selectedRow.audioUrl }}</span>
         </div>
+
+        <canvas ref="waveformCanvas" width="800" height="200"></canvas>
         <div class="details-item">
           <span>音频:</span>
+          <audio ref="audioPlayer" controls></audio>
+          <button @click="playAudio">获取音频</button>
           <span>{{ selectedRow.audioUrl }}</span>
         </div>
       </div>