功能：内置公屏叫号音频并仅播号码

需求：屏行天下等设备缺少中文语音服务，speechSynthesis 无法播报；公屏不再播项目名。

实现：内置中文数字和提示语 WAV 素材，统一通过普通 audio 元素顺序组合播放，每次叫号重复三遍，并保留首次点击解锁。

验证：前端 65 项测试通过，生产构建通过，真实浏览器完成 WAV 解码播放且无媒体错误。

web/src/components/AudioControl.tsx

@@ -0,0 +1,37 @@
+import type { RefObject } from "react";
+import type { AudioAnnouncementStatus } from "../hooks/useAudioAnnouncements";
+
+interface AudioControlProps {
+  audioRef: RefObject<HTMLAudioElement | null>;
+  status: AudioAnnouncementStatus;
+  onEnable: () => void;
+}
+
+export function AudioControl({ audioRef, status, onEnable }: AudioControlProps) {
+  return (
+    <>
+      <audio ref={audioRef} preload="auto" aria-hidden="true" />
+      {status === "ready" ? (
+        <aside className="speech-control speech-control--ready" role="status">
+          <strong>叫号声音已开启</strong>
+          <span>后续叫号将自动播报三次</span>
+        </aside>
+      ) : (
+        <aside className={`speech-control${status === "error" ? " speech-control--error" : ""}`} role="status">
+          <div>
+            <strong>{status === "error" ? "叫号声音开启失败" : "叫号声音尚未开启"}</strong>
+            <span>{status === "error" ? "请检查设备媒体音量后重试" : "请点击一次，之后将自动播报"}</span>
+          </div>
+          <button
+            className="button button--primary"
+            type="button"
+            disabled={status === "enabling"}
+            onClick={onEnable}
+          >
+            {status === "enabling" ? "正在开启叫号声音" : status === "error" ? "重新开启叫号声音" : "开启叫号声音"}
+          </button>
+        </aside>
+      )}
+    </>
+  );
+}

web/src/components/SpeechControl.tsx

@@ -1,38 +0,0 @@
-import type { SpeechAnnouncementStatus } from "../hooks/useSpeechAnnouncements";
-
-interface SpeechControlProps {
-  status: SpeechAnnouncementStatus;
-  onEnable: () => void;
-}
-
-export function SpeechControl({ status, onEnable }: SpeechControlProps) {
-  if (status === "ready") {
-    return (
-      <aside className="speech-control speech-control--ready" role="status">
-        <strong>叫号声音已开启</strong>
-        <span>后续叫号将自动播报三次</span>
-      </aside>
-    );
-  }
-
-  const unsupported = status === "unsupported";
-  const failed = status === "error";
-  return (
-    <aside className={`speech-control${failed || unsupported ? " speech-control--error" : ""}`} role="status">
-      <div>
-        <strong>{unsupported ? "当前浏览器不支持叫号声音" : failed ? "叫号声音开启失败" : "叫号声音尚未开启"}</strong>
-        <span>{unsupported || failed ? "请确认系统已安装中文语音服务" : "Chrome 需要先点击一次，之后才允许自动播报"}</span>
-      </div>
-      {!unsupported ? (
-        <button
-          className="button button--primary"
-          type="button"
-          disabled={status === "enabling"}
-          onClick={onEnable}
-        >
-          {status === "enabling" ? "正在开启叫号声音" : failed ? "重新开启叫号声音" : "开启叫号声音"}
-        </button>
-      ) : null}
-    </aside>
-  );
-}