iOS Safari音频流无法播放问题（MediaSource与ManagedMediaSource排查）

核心问题分析 #

你的代码存在几个关键问题导致iOS Safari无法播放：

• MIME类型不兼容：ManagedMediaSource分支使用audio/mpeg，但iOS Safari对MP4封装的AAC音频（audio/mp4; codecs="mp4a.40.2"）支持更稳定，且两个分支混用不同MIME类型会导致逻辑混乱。
• srcObject赋值语法错误：原代码中audio.srcObject.disableRemotePlayback = true和audio.srcObject.srcObject = ms是错误写法——disableRemotePlayback是<audio>元素的属性，而非srcObject的；正确做法是直接给audio.srcObject赋值MediaSource实例。
• 过时的URL.createObjectURL用法：现代浏览器（包括iOS Safari）推荐使用srcObject替代URL.createObjectURL，后者在MediaSource场景下可能存在兼容问题。
• 递归调用风险：readChunk用递归实现，大文件流可能触发栈溢出，应改为循环结构。
• 错误处理缺失：未监听sourceBuffer和MediaSource的错误事件，无法定位播放失败的具体原因。

修正后的代码 #

let ms;
const audio = document.querySelector('audio'); // 确保获取到正确的audio元素

// 统一使用兼容的MIME类型（AAC编码的MP4）
const MIME_TYPE = 'audio/mp4; codecs="mp4a.40.2"';

if ('ManagedMediaSource' in window) {
    ms = new window.ManagedMediaSource();
} else {
    ms = new MediaSource();
}

// 监听MediaSource错误
ms.addEventListener('error', (e) => {
    console.error('MediaSource错误:', e);
});

ms.addEventListener('sourceopen', async () => {
    let sourceBuffer;
    try {
        sourceBuffer = ms.addSourceBuffer(MIME_TYPE);
    } catch (e) {
        console.error('创建SourceBuffer失败:', e);
        return;
    }

    // 监听SourceBuffer错误
    sourceBuffer.addEventListener('error', (e) => {
        console.error('SourceBuffer错误:', e);
    });

    const reader = response.body.getReader();
    // 改用循环替代递归，避免栈溢出
    while (true) {
        const { value, done } = await reader.read();
        if (done) {
            ms.endOfStream();
            break;
        }
        // 等待SourceBuffer可写入
        if (sourceBuffer.updating) {
            await new Promise(resolve => sourceBuffer.addEventListener('updateend', resolve, { once: true }));
        }
        sourceBuffer.appendBuffer(value);
        await new Promise(resolve => sourceBuffer.addEventListener('updateend', resolve, { once: true }));
    }
});

// 正确配置audio元素
audio.disableRemotePlayback = true;
audio.srcObject = ms;

// 必须在用户交互事件内调用play()，iOS禁止自动播放
document.addEventListener('click', async () => {
    try {
        await audio.play();
    } catch (e) {
        console.error('播放失败:', e);
    }
}, { once: true });

额外注意事项 #

• 确保iOS版本在14.3及以上，iOS 14.3才正式支持MediaSource API。
• 音频流必须是iOS支持的编码格式，优先使用AAC编码的MP4封装，避免使用MP3（audio/mpeg）。
• 所有媒体播放操作必须触发于用户主动交互（如点击、触摸），iOS Safari严格限制自动播放。

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