如何修改脚本使MP3通过Web Audio API在Safari正常播放？

嘿，我之前也踩过Safari音频API的坑，你的这个报错大概率是Safari对音频相关方法的参数要求比Chrome/Firefox更严格，加上它对用户交互的强制限制导致的。给你几个快速排查和修复的方向：

1. 先定位第25行的问题代码 #

报错提示“Not enough arguments”，最常见的情况是你调用play()方法时传了配置对象——比如audio.play({ volume: 0.5 })，但Safari完全不支持这种写法，它要求play()方法不能带任何参数。

错误代码示例（第25行可能是这个）：

audio.play({ volume: 0.7 });

修复后：

// 先单独设置音量，再调用play
audio.volume = 0.7;
audio.play();

2. 必须由用户交互触发音频初始化 #

Safari有严格的安全限制：AudioContext或者Audio元素的播放操作，必须由用户主动触发（比如点击、触摸事件），不能在页面加载完成后自动执行。很多Codepen的脚本为了演示方便，会在页面加载时就初始化音频，这在Safari里直接就会报错。

错误写法：

// 页面加载时直接创建AudioContext，Safari不允许
const audioCtx = new AudioContext();
const audio = new Audio('your.mp3');
audio.play();

修复后：

let audioCtx;
let audio;

// 绑定到按钮点击事件，由用户触发
document.getElementById('playButton').addEventListener('click', async () => {
  // 延迟初始化AudioContext
  if (!audioCtx) {
    audioCtx = new AudioContext();
  }
  // 初始化音频元素
  if (!audio) {
    audio = new Audio('your.mp3');
  }
  // 处理play的Promise，避免未捕获的拒绝
  try {
    await audio.play();
  } catch (err) {
    console.error('播放失败:', err);
  }
});

3. 给play()的Promise添加错误捕获 #

你的报错里提到了“Unhandled Promise Rejection”，说明你没有处理play()返回的Promise的错误情况。Safari对Promise的错误捕获要求更严格，一定要加上catch或者用try/catch包裹。

示例：

audio.play()
  .then(() => console.log('播放成功'))
  .catch(err => console.error('播放出错:', err));

4. 排查MP3文件的编码兼容性 #

虽然概率较低，但如果上面的方法都没用，可以检查下你的MP3文件编码：Safari对某些VBR（可变比特率）或者非标准采样率的MP3支持不好，换成标准的CBR（恒定比特率）128kbps、44.1kHz采样率的MP3试试。

按照这几个步骤排查，应该能快速解决Safari里的播放问题，不用去啃苹果那堆复杂的文档~

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