MacOS Safari下<audio>加载WebM(Opus)音频时error事件不触发如何解决

架构老林

2026-8-1

解决MacOS Safari中Opus编码WebM音频不触发error事件的问题

这是MacOS Safari 16.x版本的兼容性bug：它能读取Opus编码WebM文件的元数据（因此触发loadedmetadata和loadeddata事件），但解码音频流失败时不会抛出error事件，和iOS Safari的行为不一致。以下是几种可行的解决办法：

1. 主动检查audio元素的`error`属性

即便error事件没触发，Safari仍会给audio元素赋值error对象。你可以在关键节点主动检查这个属性：

const player = document.getElementById('audioPlayer');

function handleAudioError(error) {
  console.log('audio error:', error);
  // 这里添加你的错误处理逻辑，比如提示用户音频无法播放
}

// 加载元数据后检查
player.addEventListener('loadeddata', function () {
  console.log('audio loadeddata');
  if (player.error) {
    handleAudioError(player.error);
  }
});

// 监听播放事件，用户点击播放时会暴露解码失败
player.addEventListener('play', async function () {
  try {
    await player.play();
  } catch (err) {
    handleAudioError(err);
  }
  // 额外检查元素error属性
  if (player.error) {
    handleAudioError(player.error);
  }
});

// 监听waiting事件，解码卡住时触发
player.addEventListener('waiting', function () {
  if (player.error) {
    handleAudioError(player.error);
  }
});

2. 提前检测格式支持

在加载音频前，先判断浏览器是否支持Opus编码的WebM，避免无效加载：

const player = document.getElementById('audioPlayer');
const opusWebMSupport = player.canPlayType('audio/webm; codecs="opus"');

if (opusWebMSupport === '' || opusWebMSupport === 'no') {
  // 不支持Opus WebM，切换到兼容格式（比如AAC编码的MP4）
  console.log('当前浏览器不支持Opus编码的WebM音频');
  player.src = 'myAudioFile.mp4';
  player.type = 'audio/mp4';
} else {
  player.src = 'myAudioFile.webm';
  player.type = 'audio/webm';
}