sur-voice 1.0.0 → 1.0.1

package/.history/src/components/surVoice_20260121141340.vue

@@ -0,0 +1,414 @@
+<template>
+  <div class="surVoice" v-if="!isSpeaking">
+    <input
+      style="width: 800px; height: 40px; padding: 0 10px"
+      v-model="inputText"
+      placeholder="请输入内容…"
+    />
+
+    <!-- 录音开始按钮（父组件可用插槽自定义） -->
+    <slot
+      v-if="!setRecording"
+      name="start-record"
+      :start="startRecordAudio"
+      :recording="setRecording"
+      :textLoading="textLoading"
+      :inputText="inputText"
+    >
+      <img
+        style="width: 40px; height: 40px"
+        src="https://qiniu2.xuandou.vip/voice2.png"
+        class="voice"
+        @click="startRecordAudio()"
+      />
+    </slot>
+
+    <!-- 录音结束按钮（父组件可用插槽自定义） -->
+    <slot
+      v-if="setRecording"
+      name="stop-record"
+      :stop="stopRecordAudio"
+      :recording="setRecording"
+      :textLoading="textLoading"
+      :inputText="inputText"
+    >
+      <img
+        style="width: 40px; height: 40px"
+        src="https://qiniu2.xuandou.vip/searchforSound.png"
+        class="voice"
+        @click="stopRecordAudio()"
+      />
+    </slot>
+
+    <div>{{ !textLoading ? "点击开始录音" : "" }}</div>
+    <div>{{ textLoading == "start" ? "正在录音" : "" }}</div>
+    <div>{{ textLoading == "loading" ? "文字转化中..." : "" }}</div>
+    <div>{{ textLoading == "finish" ? "文字转换完成" : "" }}</div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch } from "vue";
+import { sha256 } from "js-sha256";
+import Recorder from "@/utils/Recorder";
+
+const props = withDefaults(
+  defineProps<{
+    appKey?: string;
+    secret?: string;
+  }>(),
+  {
+    appKey: "", // 3k5jkbo5jsngmjmij7fy77xyrcoud5xkinbaqnik
+    secret: "", // 01a1fe93e03bbfb775ad1a6482a130c2 
+  }
+);
+
+const emit = defineEmits<{
+  (e: "update:inputText", v: string): void;
+}>();
+
+
+//!!!!!!!!!!!!!!!!!!!!! 录音（ASR）
+
+// 目标：减少从说话到首包文字返回的延迟
+// - 去掉每帧 console.log（会严重阻塞主线程，导致 onmessage 延迟）
+// - 聚合/节流发送（降低 ws.send 频率，让服务端更快开始解码）
+// - 背压控制（bufferedAmount 太大时不再堆积，避免“越发越慢”）
+const inputText = ref("");
+const isSpeaking = ref(false); // 是否正在说话
+const textLoading: any = ref(null);
+const DEBUG_ASR = false;
+
+// 将 inputText 实时回传给父组件（作为回调）
+watch(
+  inputText,
+  (v) => {
+    if(v){
+      emit("update:inputText", v);
+    }
+  },
+  { immediate: true }
+);
+
+
+let ctime = ref(0);
+let intervalHandler: any;
+let recorder: any; // 录音实例
+const setRecording = ref(false); // 是否正在录音
+const messageContent = ref("");
+const result = ref<any[]>([]); // 语音识别结果
+let voiceWs: WebSocket | null = null;
+
+// 发送统计
+let count = 0;
+let lastStatsAt = 0;
+
+// 音频分块聚合队列（ArrayBufferView -> Blob）
+const voiceSendQueue: ArrayBufferView[] = [];
+let voiceSendQueueBytes = 0; // 已入队音频字节数
+let voiceFlushTimer: number | null = null; // VoiceWS 发送循环定时器
+
+// 经验值：40ms flush 一次；每次包大约 40-120ms 音频，服务端更容易快速出首包
+const VOICE_FLUSH_INTERVAL_MS = 40;
+// 队列上限：超过就丢弃旧数据，避免出现 10s+ 的排队延迟
+const VOICE_MAX_QUEUE_BYTES = 1024 * 1024;
+// ws 背压：浏览器内部缓冲超过该值，暂停 flush
+const VOICE_MAX_BUFFERED_AMOUNT = 512 * 1024;
+
+let msgArr: any[] = []; // 实时识别片段
+
+// STEP 1: 开始录音
+const startRecordAudio = () => {
+  // 防止重复点击导致多路并发
+  textLoading.value = "start";
+  if (setRecording.value) return;
+
+  resetAsrState();
+
+  setRecording.value = true;
+  intervalHandler = setInterval(() => {
+    ctime.value = ctime.value + 1;
+    if (ctime.value > 60) {
+      endRecording();
+    }
+  }, 1000);
+
+  doRecording();
+};
+
+// STEP 2: 重置 ASR 状态
+function resetAsrState() {
+  count = 0;
+  lastStatsAt = 0;
+  msgArr = [];
+  result.value = [];
+  messageContent.value = "";
+  voiceSendQueue.length = 0;
+  voiceSendQueueBytes = 0;
+}
+
+// STEP 3: 录音处理
+function doRecording() {
+  createVoiceWS();
+
+  recorder = new Recorder(onaudioprocess);
+
+  recorder.ready().then(
+    () => {
+      recorder.start();
+    },
+    () => {
+      voiceWs?.close();
+    }
+  );
+}
+
+// STEP 3.1: 音频采集回调：这里要尽量轻量，否则会拖慢主线程，影响 onmessage
+function onaudioprocess(chunk: any) {
+  if (DEBUG_ASR) console.log("onaudioprocess chunk");
+  if (!setRecording.value) return;
+
+
+  if (voiceWs && voiceWs.readyState === WebSocket.OPEN) {
+    count++;
+    enqueueVoiceChunk(chunk);
+
+    // 降低发送频率：靠定时器 flush
+    const now = Date.now();
+    if (DEBUG_ASR && now - lastStatsAt > 1000) {
+      lastStatsAt = now;
+      console.log("ASR stats", {
+        count,
+        bufferedAmount: voiceWs.bufferedAmount,
+        queueBytes: voiceSendQueueBytes,
+      });
+    }
+  }
+}
+
+// STEP 3.2: 音频分块聚合队列
+function enqueueVoiceChunk(chunk: any) {
+  if (!chunk) return;
+
+  // Recorder.encodePCMFragment 返回 DataView（ArrayBufferView），这里统一转成 ArrayBufferView
+  const view: ArrayBufferView | null =
+    chunk instanceof DataView
+      ? chunk
+      : ArrayBuffer.isView(chunk)
+      ? (chunk as ArrayBufferView)
+      : chunk instanceof ArrayBuffer
+      ? new Uint8Array(chunk)
+      : null;
+
+  if (!view) return;
+
+  // 如果 ws 还没 open，就先丢到队列里，等 open 后 flush
+  voiceSendQueue.push(view);
+  voiceSendQueueBytes += view.byteLength;
+
+  // 防止队列无限增长：丢弃旧数据，优先保证“实时性”而不是“追赶历史”
+  if (voiceSendQueueBytes > VOICE_MAX_QUEUE_BYTES) {
+    const drop = Math.floor(voiceSendQueue.length / 2);
+    let droppedBytes = 0;
+    for (let i = 0; i < drop; i++) {
+      droppedBytes += voiceSendQueue[i]?.byteLength || 0;
+    }
+    voiceSendQueue.splice(0, drop);
+    voiceSendQueueBytes -= droppedBytes;
+
+    if (DEBUG_ASR) {
+      console.warn("ASR 队列过大，已丢弃部分旧音频以恢复实时性");
+    }
+  }
+}
+
+// STEP 4: 创建 VoiceWS 连接
+const createVoiceWS = () => {
+  const tm = +new Date();
+  const appKey = props.appKey;
+  const secret = props.secret;
+  
+  console.log('createVoiceWS',appKey,secret) //3k5jkbo5jsngmjmij7fy77xyrcoud5xkinbaqnik 01a1fe93e03bbfb775ad1a6482a130c2
+
+  if (!appKey || !secret) {
+    console.error("缺少 ASR 配置：appKey/secret");
+    return;
+  }
+
+  const sign = sha256(`${appKey}${tm}${secret}`).toUpperCase();
+
+
+  // 关闭旧连接
+  try {
+    voiceWs?.close();
+  } catch (_) {}
+
+  voiceWs = new WebSocket(
+    `wss://ws-osasr.hivoice.cn/v1/asr?appkey=${appKey}&time=${tm}&sign=${sign}`
+  );
+
+  voiceWs.onopen = () => {
+    if (!voiceWs) return;
+
+    startVoiceFlushLoop();
+
+    // 发送 start
+    voiceWs.send(
+      JSON.stringify({
+        type: "start",
+        sha: "256",
+        data: {
+          lang: "cn",
+          appkey: appKey,
+          userId: "demoUser",
+          udid: "demoWebDevice",
+        },
+      })
+    );
+
+    // open 后尽快把队列里的音频 flush 出去
+    flushVoiceQueue(true);
+  };
+
+  voiceWs.onmessage = (evt: MessageEvent) => {
+    let res: any;
+    try {
+      res = typeof evt.data === "string" ? JSON.parse(evt.data) : evt.data;
+    } catch (e) {
+      if (DEBUG_ASR) console.warn("ASR 返回非 JSON:", evt.data);
+      return;
+    }
+
+    if (DEBUG_ASR) {
+      console.log("ASR onmessage", res);
+    }
+
+    // 服务端错误码
+    if (typeof res?.code === "number" && res.code !== 0) {
+      console.warn("ASR 错误:", res);
+      return;
+    }
+
+    // 实时文本：有些返回只有 showText（中间态），最终态可能在 text 字段
+    const chunkText = (res?.showText ?? res?.text ?? "") as string;
+    if (chunkText) {
+      messageContent.value = chunkText;
+
+      if (msgArr.length > 0 && msgArr[msgArr.length - 1]?.type !== "fixed") {
+        msgArr[msgArr.length - 1] = res;
+      } else {
+        msgArr.push(res);
+      }
+
+      result.value = [...msgArr];
+
+      // UI：优先展示 showText（更像实时流），没有则回退 text
+      inputText.value = result.value
+        .map((v: any) => v?.showText ?? v?.text ?? "")
+        .join("");
+    }
+
+    // 结束判断：只 parse 一次，直接读 res.end
+    if (res?.end === true) {
+      textLoading.value = "finish";
+
+      const finalText = result.value
+        .map((v: any) => v?.text ?? v?.showText ?? "")
+        .join("");
+
+      setTimeout(() => {
+        inputText.value = finalText;
+        messageContent.value = finalText;
+        // 收到 end 后可以主动关闭 ASR ws（避免继续占用资源）
+        stopVoiceFlushLoop();
+      }, 500);
+
+      try {
+        voiceWs?.close();
+      } catch (_) {}
+    }
+  };
+
+  voiceWs.onerror = (e) => {
+    if (DEBUG_ASR) console.warn("ASR ws error", e);
+  };
+
+  voiceWs.onclose = () => {
+    stopVoiceFlushLoop();
+    voiceSendQueue.length = 0;
+    voiceSendQueueBytes = 0;
+    voiceWs = null;
+  };
+};
+
+// STEP 5: 启动 VoiceWS 发送循环
+function startVoiceFlushLoop() {
+  if (voiceFlushTimer) return;
+  voiceFlushTimer = window.setInterval(() => {
+    flushVoiceQueue(false);
+  }, VOICE_FLUSH_INTERVAL_MS);
+}
+
+// STEP 6: 刷新 VoiceWS 发送队列
+function flushVoiceQueue(force: boolean) {
+  if (!voiceWs || voiceWs.readyState !== WebSocket.OPEN) return; // 确保 ws 已打开
+
+  if (voiceSendQueueBytes <= 0) return;
+
+  // 背压：如果浏览器 ws 缓冲堆积，就先不 flush（否则延迟会越积越大）
+  if (!force && voiceWs.bufferedAmount > VOICE_MAX_BUFFERED_AMOUNT) return;
+
+  try {
+    // 直接发 Blob，避免手动拼接拷贝
+    const blob = new Blob(voiceSendQueue as any);
+    voiceWs.send(blob);
+
+    voiceSendQueue.length = 0;
+    voiceSendQueueBytes = 0;
+  } catch (e) {
+    console.error("flushVoiceQueue 发送失败:", e);
+  }
+}
+
+//! 停止录音按钮
+const stopRecordAudio = () => {
+  if (!setRecording.value) return;
+  endRecording();
+};
+function endRecording() {
+  clearInterval(intervalHandler);
+  setRecording.value = false;
+  ctime.value = 0;
+
+  // 先停采集，再 flush + end
+  try {
+    recorder?.stop();
+  } catch (_) {}
+
+  textLoading.value = "loading";
+
+  try {
+    sendAsrEnd();
+  } catch (e) {
+    console.error("发送 ASR end 失败:", e);
+  }
+}
+// 发送 ASR end 标记
+function sendAsrEnd() {
+  if (!voiceWs || voiceWs.readyState !== WebSocket.OPEN) return;
+
+  // 确保把最后一点队列 flush 出去再发 end
+  flushVoiceQueue(true);
+
+  voiceWs.send(
+    JSON.stringify({
+      type: "end",
+    })
+  );
+}
+function stopVoiceFlushLoop() {
+  if (!voiceFlushTimer) return;
+  clearInterval(voiceFlushTimer);
+  voiceFlushTimer = null;
+}
+</script>

package/.history/sur-voice/package_20260121113239.json

@@ -0,0 +1,27 @@
+{
+  "name": "sur-voice",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.24"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
+    "typescript": "~5.9.3",
+    "vite": "npm:rolldown-vite@7.2.5",
+    "vue-tsc": "^3.1.4"
+  },
+  "pnpm": {
+    "overrides": {
+      "vite": "npm:rolldown-vite@7.2.5"
+    }
+  }
+}

package/.history/sur-voice/package_20260121113252.json

@@ -0,0 +1,27 @@
+{
+  "name": "sur-voice",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.24"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
+    "typescript": "~5.9.3",
+    "vite": "npm:rolldown-vite@7.2.5",
+    "vue-tsc": "^3.1.4"
+  },
+  "pnpm": {
+    "overrides": {
+      "vite": "npm:rolldown-vite@7.2.5"
+    }
+  }
+}

package/.history/sur-voice/package_20260121113253.json

@@ -0,0 +1,27 @@
+{
+  "name": "sur-voice",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "vue": "^3.5.24"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
+    "typescript": "~5.9.3",
+    "vite": "npm:rolldown-vite@7.2.5",
+    "vue-tsc": "^3.1.4"
+  },
+  "pnpm": {
+    "overrides": {
+      "vite": "npm:rolldown-vite@7.2.5"
+    }
+  }
+}

package/.history/sur-voice/package_20260121113812.json

@@ -0,0 +1,30 @@
+{
+  "name": "sur-voice",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "description": "流式语音转文字",
+  "main": "index.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "js-sha256": "^0.11.1",
+    "vue": "^3.5.24"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
+    "typescript": "~5.9.3",
+    "vite": "npm:rolldown-vite@7.2.5",
+    "vue-tsc": "^3.1.4"
+  },
+  "pnpm": {
+    "overrides": {
+      "vite": "npm:rolldown-vite@7.2.5"
+    }
+  }
+}

package/.history/sur-voice/package_20260121113813.json

@@ -0,0 +1,30 @@
+{
+  "name": "sur-voice",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "description": "流式语音转文字",
+  "main": "index.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vue-tsc -b && vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "js-sha256": "^0.11.1",
+    "vue": "^3.5.24"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
+    "typescript": "~5.9.3",
+    "vite": "npm:rolldown-vite@7.2.5",
+    "vue-tsc": "^3.1.4"
+  },
+  "pnpm": {
+    "overrides": {
+      "vite": "npm:rolldown-vite@7.2.5"
+    }
+  }
+}

package/.history/sur-voice/package_20260121113851.json

@@ -0,0 +1,30 @@
+{
+  "name": "sur-voice",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "description": "流式语音转文字",
+  "main": "index.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "js-sha256": "^0.11.1",
+    "vue": "^3.5.24"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
+    "typescript": "~5.9.3",
+    "vite": "npm:rolldown-vite@7.2.5",
+    "vue-tsc": "^3.1.4"
+  },
+  "pnpm": {
+    "overrides": {
+      "vite": "npm:rolldown-vite@7.2.5"
+    }
+  }
+}

package/.history/sur-voice/package_20260121114014.json

@@ -0,0 +1,31 @@
+{
+  "name": "sur-voice",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "description": "流式语音转文字",
+  "main": "dist/sur-voice.umd.js ",
+  "module": "dist/sur-voice.es.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "js-sha256": "^0.11.1",
+    "vue": "^3.5.24"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
+    "typescript": "~5.9.3",
+    "vite": "npm:rolldown-vite@7.2.5",
+    "vue-tsc": "^3.1.4"
+  },
+  "pnpm": {
+    "overrides": {
+      "vite": "npm:rolldown-vite@7.2.5"
+    }
+  }
+}

package/.history/sur-voice/package_20260121114015.json

@@ -0,0 +1,31 @@
+{
+  "name": "sur-voice",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "description": "流式语音转文字",
+  "main": "dist/sur-voice.umd.js ",
+  "module": "dist/sur-voice.es.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "js-sha256": "^0.11.1",
+    "vue": "^3.5.24"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
+    "typescript": "~5.9.3",
+    "vite": "npm:rolldown-vite@7.2.5",
+    "vue-tsc": "^3.1.4"
+  },
+  "pnpm": {
+    "overrides": {
+      "vite": "npm:rolldown-vite@7.2.5"
+    }
+  }
+}

package/.history/sur-voice/package_20260121114016.json

@@ -0,0 +1,31 @@
+{
+  "name": "sur-voice",
+  "private": true,
+  "version": "1.0.0",
+  "type": "module",
+  "description": "流式语音转文字",
+  "main": "dist/sur-voice.umd.js",
+  "module": "dist/sur-voice.es.js",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "js-sha256": "^0.11.1",
+    "vue": "^3.5.24"
+  },
+  "devDependencies": {
+    "@types/node": "^24.10.1",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vue/tsconfig": "^0.8.1",
+    "typescript": "~5.9.3",
+    "vite": "npm:rolldown-vite@7.2.5",
+    "vue-tsc": "^3.1.4"
+  },
+  "pnpm": {
+    "overrides": {
+      "vite": "npm:rolldown-vite@7.2.5"
+    }
+  }
+}