macOS Safari 17设置audio标签为Blob URL时音频无法加载求助

错误语境中“not suitable”的具体含义 #

在Safari的媒体播放机制里，这个错误的核心指向是：浏览器无法识别或处理你提供的媒体资源——要么是资源的格式/编码不被Safari支持，要么是资源的封装方式（比如Blob的构造、MIME类型设置）不符合Safari的校验要求。相比Chrome、Firefox，Safari对媒体资源的格式校验更严格，尤其是Blob形式的资源。

你的代码里的关键问题 #

看你提取MIME类型的逻辑：

const mime = spl[0].split(':')[0].split(';')[0];

假设你的data URL是data:audio/mp3;base64,SUQzBAAA...，spl[0]是data:audio/mp3，split(':')[0]得到的是data，再split(';')[0]还是data——这就导致你创建Blob时设置的type是无效的data，而非正确的音频MIME类型！

Chrome和Firefox可能会自动尝试识别音频内容的格式，但Safari依赖正确的MIME类型来解析Blob资源，因此直接判定资源“不适用”。

修复方案 #

修正MIME类型的提取逻辑，正确获取音频的MIME类型：

// 'data' is set to a data url, e.g. data:audio/mp3;base64,SUQzBAAA etc
const audio = document.querySelector('audio');
const spl = data.split(',');
// 正确提取MIME类型：从data:audio/mp3;base64里拿到audio/mp3
const mime = spl[0].split(':')[1].split(';')[0];
const binary = atob(spl[1]);
const ar = new Uint8Array(binary.length);
for (let i = 0; i < binary.length; i++) {
  ar[i] = binary.charCodeAt(i);
}
const blob = new Blob([ar], { type: mime });
audio.src = URL.createObjectURL(blob);
// 可选：显式设置audio的type属性，和Blob的type保持一致
audio.type = mime;

额外排查点 #

如果修正后仍报错，可以检查：

• 音频编码是否为Safari支持的格式：MP3是支持的，但小众编码（如无容器的Opus）可能存在兼容性问题；
• Blob的构造是否正确：确保Uint8Array的内容和原data URL的二进制数据完全一致；
• Safari的隐私模式限制：部分隐私模式下可能限制Blob资源的播放，可尝试在普通模式下测试。

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