iOS17中HTML5 Audio播放无声音 咨询是否有相关问题报告

问题确认 #

iOS17系统确实存在大量关于Audio对象播放失效的反馈，和你提供的代码逻辑类似的场景（提前创建Audio实例、用户交互时调用play）是重灾区，常见表现为点击按钮后音频无声，或play()返回的Promise抛出NotAllowedError/AbortError。

问题原因 #

这是iOS17媒体播放策略收紧导致的：苹果对用户交互触发的媒体播放增加了更严格的上下文校验，即使是用户主动点击，若Audio实例的创建时机和交互时机间隔过久、或实例未绑定到DOM上下文，都会触发权限校验失败。

修复方案 #

方案1：在用户交互时初始化/重置音频实例 #

将Audio实例的创建或重置逻辑放到点击事件内部，确保播放操作和用户交互处于同一上下文：

export function AudioPlaying(audioUrl: string): ReactElement {
    const audioRef = useRef<HTMLAudioElement | null>(null);

    const onPlayAudio = async () => {
        if (!audioRef.current) {
            audioRef.current = new Audio(audioUrl);
        } else {
            // 重置音频状态，规避缓存或上下文异常
            audioRef.current.currentTime = 0;
            audioRef.current.src = audioUrl;
            await audioRef.current.load();
        }
        try {
            await audioRef.current.play();
        } catch (err) {
            console.error("音频播放失败:", err);
        }
    };

    return (
        <>
            <button onClick={onPlayAudio}>click</button>
        </>
    );
}

方案2：使用DOM嵌入的<audio>标签 #

通过在DOM中嵌入<audio>标签，让浏览器自动管理音频上下文，兼容性更好：

export function AudioPlaying(audioUrl: string): ReactElement {
    const audioRef = useRef<HTMLAudioElement>(null);

    const onPlayAudio = async () => {
        try {
            await audioRef.current?.play();
        } catch (err) {
            console.error("音频播放失败:", err);
        }
    };

    return (
        <>
            <audio ref={audioRef} src={audioUrl} preload="metadata" />
            <button onClick={onPlayAudio}>click</button>
        </>
    );
}

内容的提问来源于stack exchange，提问作者김종현