iOS端Safari/Chrome播放WebSocket下发base64 MP3音频报错咨询

报错原因 #

• NotAllowedError 报错原因：iOS端浏览器（包括Safari和iOS内核的Chrome）对音频播放、AudioContext实例运行有严格的用户交互授权限制，要求所有音频相关的初始化、播放操作必须在用户主动触发的交互事件（如touchstart、click）回调中执行。你当前代码仅在首次touchstart事件中播放了初始占位音频，后续WebSocket收到新音频后直接调用audio.play()的操作已经脱离了用户交互上下文，且AudioContext的初始化逻辑放在了非交互触发的getFrequencies方法中，不符合iOS的权限要求，因此触发权限类报错。
• NotSupportedError 报错原因：一是iOS对超长base64格式的data URI作为音频源的兼容性不佳，尤其是频繁动态替换audio.src的场景下极易触发格式不识别；二是你替换音频源时先将src赋值为空字符串，紧接着赋值新的base64内容后未等音频资源加载完成就直接调用play()，iOS无法在资源未就绪状态下执行播放操作，因此触发操作不支持报错。

可行修复方案 #

核心调整点 #

• 统一将音频相关初始化逻辑放到用户交互事件回调中执行，确保拿到iOS的音频播放授权
• 替换动态音频加载逻辑，优先使用AudioContext.decodeAudioData解码base64音频后播放，兼容性远高于直接修改Audio元素的src
• 所有play()调用都添加Promise异常捕获，避免未处理的rejection报错
• 若仍要使用Audio元素，赋值新src后需监听canplaythrough事件再触发播放，禁止资源未就绪时直接调用播放

核心修复代码示例 #

let audioContext = null;
let audioBufferSource = null;
let analyser = null;
let isAudioAuthorized = false;

// 首次用户交互时完成所有音频相关初始化，拿到iOS播放授权
window.addEventListener("touchstart", initAudioAuth, { once: true });
window.addEventListener("click", initAudioAuth, { once: true });

function initAudioAuth() {
    if (isAudioAuthorized) return;
    // 初始化AudioContext并唤醒
    audioContext = new (window.AudioContext || window.webkitAudioContext)();
    if (audioContext.state === 'suspended') {
        audioContext.resume();
    }
    // 初始化分析仪
    analyser = audioContext.createAnalyser();
    analyser.connect(audioContext.destination);
    isAudioAuthorized = true;
}

// WebSocket收到消息后的播放逻辑
webSocket.onmessage = async function(event) {
    if (!isAudioAuthorized) return;
    const base64Str = event.data;
    // 将base64转成ArrayBuffer
    const binaryStr = atob(base64Str);
    const len = binaryStr.length;
    const bytes = new Uint8Array(len);
    for (let i = 0; i < len; i++) {
        bytes[i] = binaryStr.charCodeAt(i);
    }
    // 解码音频
    const audioBuffer = await audioContext.decodeAudioData(bytes.buffer);
    // 停止上一段音频播放
    if (audioBufferSource) {
        audioBufferSource.stop();
    }
    // 播放新音频
    audioBufferSource = audioContext.createBufferSource();
    audioBufferSource.buffer = audioBuffer;
    audioBufferSource.connect(analyser);
    audioBufferSource.start(0);
    render();
}

// 频率获取逻辑调整
function getFrequencies() {
    if (!analyser) return [new Uint8Array(0), null];
    const frequencyArray = new Uint8Array(analyser.frequencyBinCount);
    analyser.getByteFrequencyData(frequencyArray);
    return [frequencyArray, analyser];
}

内容的提问来源于stack exchange，提问作者nekumelon