2 Commits

Author SHA1 Message Date
4405bf96f7 修复:将叫号音频内联到前端包
问题:音频使用 /audio 路径,浏览器预加载仍会向服务端发起独立请求。

实现:将 15 个 WAV 作为 Vite 内联资源编入前端 JS,后端继续仅返回叫号数据/文本。

验证:前端 66 项测试与生产构建通过;dist 中 WAV 文件为 0,含 15 个内联音频数据。
2026-08-01 12:16:54 +08:00
6d07612bc9 优化:公屏预加载叫号音频素材
需求:页面打开后缓存音频片段,叫号时避免临时下载造成延迟。

实现:页面挂载时预加载全部数字与提示语 WAV,后端继续返回叫号数据/文本,前端按文本映射片段播放。

验证:前端 66 项测试通过,生产构建通过。
2026-08-01 12:06:01 +08:00
17 changed files with 49 additions and 40 deletions

View File

@@ -1,37 +1,32 @@
import { describe, expect, it } from "vitest";
import { announcementAudioQueue } from "./useAudioAnnouncements";
const inlineAudio = (source: string) => source.startsWith("data:audio/wav;base64,");
describe("announcementAudioQueue", () => {
it("忽略项目名并把单号码播报素材重复三遍", () => {
const once = [
"/audio/queue-voice/please.wav",
"/audio/queue-voice/digit-0.wav",
"/audio/queue-voice/digit-0.wav",
"/audio/queue-voice/digit-0.wav",
"/audio/queue-voice/digit-1.wav",
"/audio/queue-voice/digit-6.wav",
"/audio/queue-voice/number.wav",
"/audio/queue-voice/entrance.wav",
"/audio/queue-voice/gap.wav",
];
const queue = announcementAudioQueue(["东门观光车,请零零零一六号,前往入口。"]);
const once = queue.slice(0, 9);
expect(announcementAudioQueue(["东门观光车,请零零零一六号,前往入口。"]))
.toEqual([...once, ...once, ...once]);
expect(once).toHaveLength(9);
expect(once.every(inlineAudio)).toBe(true);
expect(once[1]).toBe(once[2]);
expect(once[2]).toBe(once[3]);
expect(queue).toEqual([...once, ...once, ...once]);
});
it("支持连续号码范围", () => {
const queue = announcementAudioQueue(["请一七号至一九号,前往入口。"]);
expect(queue.slice(0, 9)).toEqual([
"/audio/queue-voice/please.wav",
"/audio/queue-voice/digit-1.wav",
"/audio/queue-voice/digit-7.wav",
"/audio/queue-voice/number.wav",
"/audio/queue-voice/through.wav",
"/audio/queue-voice/digit-1.wav",
"/audio/queue-voice/digit-9.wav",
"/audio/queue-voice/number.wav",
"/audio/queue-voice/entrance.wav",
]);
expect(queue.slice(0, 9).every(inlineAudio)).toBe(true);
expect(queue[1]).not.toBe(queue[2]);
expect(queue[3]).not.toBe(queue[4]);
});
it("音频素材不使用独立 HTTP 路径", () => {
const queue = announcementAudioQueue(["请一号,前往入口。"]);
expect(queue).not.toContain("/audio/queue-voice/please.wav");
expect(queue.every(inlineAudio)).toBe(true);
});
});

View File

@@ -1,27 +1,41 @@
import { useCallback, useEffect, useRef } from "react";
import digit0Audio from "../assets/queue-voice/digit-0.wav?inline";
import digit1Audio from "../assets/queue-voice/digit-1.wav?inline";
import digit2Audio from "../assets/queue-voice/digit-2.wav?inline";
import digit3Audio from "../assets/queue-voice/digit-3.wav?inline";
import digit4Audio from "../assets/queue-voice/digit-4.wav?inline";
import digit5Audio from "../assets/queue-voice/digit-5.wav?inline";
import digit6Audio from "../assets/queue-voice/digit-6.wav?inline";
import digit7Audio from "../assets/queue-voice/digit-7.wav?inline";
import digit8Audio from "../assets/queue-voice/digit-8.wav?inline";
import digit9Audio from "../assets/queue-voice/digit-9.wav?inline";
import entranceAudio from "../assets/queue-voice/entrance.wav?inline";
import gapAudio from "../assets/queue-voice/gap.wav?inline";
import numberAudio from "../assets/queue-voice/number.wav?inline";
import pleaseAudio from "../assets/queue-voice/please.wav?inline";
import throughAudio from "../assets/queue-voice/through.wav?inline";
const AUDIO_BASE_PATH = "/audio/queue-voice";
const ANNOUNCEMENT_REPEAT_COUNT = 3;
const GAP_AUDIO = `${AUDIO_BASE_PATH}/gap.wav`;
const GAP_AUDIO = gapAudio;
const DIGIT_AUDIO: Record<string, string> = {
: `${AUDIO_BASE_PATH}/digit-0.wav`,
: `${AUDIO_BASE_PATH}/digit-1.wav`,
: `${AUDIO_BASE_PATH}/digit-2.wav`,
: `${AUDIO_BASE_PATH}/digit-3.wav`,
: `${AUDIO_BASE_PATH}/digit-4.wav`,
: `${AUDIO_BASE_PATH}/digit-5.wav`,
: `${AUDIO_BASE_PATH}/digit-6.wav`,
: `${AUDIO_BASE_PATH}/digit-7.wav`,
: `${AUDIO_BASE_PATH}/digit-8.wav`,
: `${AUDIO_BASE_PATH}/digit-9.wav`,
: digit0Audio,
: digit1Audio,
: digit2Audio,
: digit3Audio,
: digit4Audio,
: digit5Audio,
: digit6Audio,
: digit7Audio,
: digit8Audio,
: digit9Audio,
};
const PHRASE_AUDIO = [
["前往入口", `${AUDIO_BASE_PATH}/entrance.wav`],
["请", `${AUDIO_BASE_PATH}/please.wav`],
["号", `${AUDIO_BASE_PATH}/number.wav`],
["至", `${AUDIO_BASE_PATH}/through.wav`],
["前往入口", entranceAudio],
["请", pleaseAudio],
["号", numberAudio],
["至", throughAudio],
] as const;
function clipsForAnnouncement(announcement: string): string[] {