修复:将叫号音频内联到前端包
问题:音频使用 /audio 路径,浏览器预加载仍会向服务端发起独立请求。 实现:将 15 个 WAV 作为 Vite 内联资源编入前端 JS,后端继续仅返回叫号数据/文本。 验证:前端 66 项测试与生产构建通过;dist 中 WAV 文件为 0,含 15 个内联音频数据。
This commit is contained in:
@@ -1,53 +1,32 @@
|
||||
import { renderHook } from "@testing-library/react";
|
||||
import { afterEach, describe, expect, it } from "vitest";
|
||||
import { announcementAudioQueue, audioPreloadSources, useAudioAnnouncements } from "./useAudioAnnouncements";
|
||||
import { describe, expect, it } from "vitest";
|
||||
import { announcementAudioQueue } from "./useAudioAnnouncements";
|
||||
|
||||
afterEach(() => {
|
||||
document.head.querySelectorAll("link[data-queue-voice-preload]").forEach((link) => link.remove());
|
||||
});
|
||||
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("打开页面时预加载全部声音素材", () => {
|
||||
const { unmount } = renderHook(() => useAudioAnnouncements());
|
||||
const links = Array.from(document.head.querySelectorAll<HTMLLinkElement>("link[data-queue-voice-preload]"));
|
||||
it("音频素材不使用独立 HTTP 路径", () => {
|
||||
const queue = announcementAudioQueue(["请一号,前往入口。"]);
|
||||
|
||||
expect(links.map((link) => link.getAttribute("href"))).toEqual(audioPreloadSources);
|
||||
expect(links.every((link) => link.rel === "preload" && link.getAttribute("as") === "audio")).toBe(true);
|
||||
|
||||
unmount();
|
||||
expect(document.head.querySelector("link[data-queue-voice-preload]")).toBeNull();
|
||||
expect(queue).not.toContain("/audio/queue-voice/please.wav");
|
||||
expect(queue.every(inlineAudio)).toBe(true);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -1,35 +1,43 @@
|
||||
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;
|
||||
|
||||
export const audioPreloadSources = [
|
||||
...Object.values(DIGIT_AUDIO),
|
||||
...PHRASE_AUDIO.map(([, source]) => source),
|
||||
GAP_AUDIO,
|
||||
];
|
||||
|
||||
function clipsForAnnouncement(announcement: string): string[] {
|
||||
const callStart = announcement.indexOf("请");
|
||||
if (callStart < 0) return [];
|
||||
@@ -67,23 +75,6 @@ export function useAudioAnnouncements() {
|
||||
const audioRef = useRef<HTMLAudioElement | null>(null);
|
||||
const playbackIdRef = useRef(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (typeof document === "undefined") return;
|
||||
|
||||
const links = audioPreloadSources.map((source) => {
|
||||
const link = document.createElement("link");
|
||||
link.rel = "preload";
|
||||
link.setAttribute("as", "audio");
|
||||
link.type = "audio/wav";
|
||||
link.href = source;
|
||||
link.dataset.queueVoicePreload = "true";
|
||||
document.head.appendChild(link);
|
||||
return link;
|
||||
});
|
||||
|
||||
return () => links.forEach((link) => link.remove());
|
||||
}, []);
|
||||
|
||||
const playQueue = useCallback((sources: string[]) => {
|
||||
const audio = audioRef.current;
|
||||
if (!audio || !sources.length) return;
|
||||
|
||||
Reference in New Issue
Block a user