AudioContext在Google Chrome正常运行但Safari中无法生效问题求助

核心问题 #

1. HTML事件绑定存在语法错误：onclick="play"仅引用了函数未执行，需要改为onclick="play()"
2. Safari对AudioContext的激活规则比Chrome严格：必须在用户交互的同步调用栈内完成上下文激活，你当前把音频播放逻辑放到异步fetch回调中执行，此时已经脱离用户点击的同步上下文，Safari会自动将AudioContext挂起，拒绝播放。

修正后的可运行代码 #

HTML

<button onclick="play()">Play</button>

JavaScript

// 全局复用AudioContext，不要每次点击重复创建
const AudioContext = window.AudioContext || window.webkitAudioContext;
const ctx = new AudioContext();

async function play() {
  // 同步上下文内先激活AudioContext
  if (ctx.state === 'suspended') {
    await ctx.resume();
  }
  // 播放极短无声音频占坑，确认Safari识别到用户交互触发的音频行为
  const emptyBuffer = ctx.createBuffer(1, 1, 22050);
  const emptySource = ctx.createBufferSource();
  emptySource.buffer = emptyBuffer;
  emptySource.connect(ctx.destination);
  emptySource.start(ctx.currentTime);

  // 再执行异步加载逻辑
  try {
    const response = await fetch('MP3_URL');
    const arrayBuffer = await response.arrayBuffer();
    const audioBuffer = await ctx.decodeAudioData(arrayBuffer);
    const source = ctx.createBufferSource();
    source.buffer = audioBuffer;
    source.connect(ctx.destination);
    source.start(ctx.currentTime);
  } catch (e) {
    console.error('播放异常', e);
  }
}

其他适配注意事项 #

• 如果你的MP3资源是跨域资源，需要确认服务端配置了正确的CORS响应头，Safari对跨域媒体资源的校验规则比Chrome更严格，缺CORS头会直接加载失败
• 如需兼容旧版本Safari，decodeAudioData可以改用回调写法，部分旧版本Safari不支持Promise形式调用：

ctx.decodeAudioData(arrayBuffer, 
  (audioBuffer) => {
    const source = ctx.createBufferSource();
    source.buffer = audioBuffer;
    source.connect(ctx.destination);
    source.start(ctx.currentTime);
  },
  (err) => console.error('音频解码失败', err)
);

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