如何让播放/暂停按钮在Safari浏览器中正常工作？

问题背景 #

实现的音频播放/暂停按钮在Chrome中正常运行，但在Safari浏览器完全无法工作。尝试添加autoplay属性未解决问题，使用Base64编码音频（因编辑器限制未贴出）。

以下是原代码：

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Audio Play and Pause</title>
  <link rel="stylesheet" href="styles.css">
</head>

<body>
  <audio id="audioElement" preload="auto">
    <source src="sound.mp3" type="audio/mpeg">
  </audio>
  <button id="playPauseButton" onmousedown="playAudio()" onmouseup="pauseAudio()" ontouchstart="playAudio()" ontouchend="pauseAudio()">Play/Pause</button>

  <script>
    function playAudio() {
      document.getElementById("audioElement").play();
    }

    function pauseAudio() {
      document.getElementById("audioElement").pause();
    }
  </script>
</body>

</html>

修复要点 #

1. 适配Safari的用户交互限制 #

Safari对媒体播放的触发条件要求更严格，必须是真实用户交互（如点击、触摸）直接触发，内联事件绑定可能存在兼容性问题。建议改用addEventListener绑定事件，并统一逻辑为切换播放状态：

const audio = document.getElementById('audioElement');
const btn = document.getElementById('playPauseButton');

// 切换播放/暂停状态
function toggleAudio() {
  if (audio.paused) {
    // 捕获播放错误，方便排查问题
    audio.play().catch(err => {
      console.error('播放失败:', err);
    });
  } else {
    audio.pause();
  }
}

// 绑定交互事件
btn.addEventListener('click', toggleAudio);
// 保留触摸事件适配移动端，阻止默认行为避免冲突
btn.addEventListener('touchstart', e => {
  e.preventDefault();
  toggleAudio();
});

2. 调整音频预加载设置 #

Safari对preload="auto"的处理容易触发播放限制，建议改为preload="metadata"，仅加载音频元数据而非完整文件：

<audio id="audioElement" preload="metadata">
  <source src="sound.mp3" type="audio/mpeg">
</audio>

3. 校验Base64音频格式 #

如果使用Base64编码音频，必须确保格式前缀正确，示例：

<audio id="audioElement" preload="metadata">
  <source src="data:audio/mpeg;base64,xxxxxxxxxx..." type="audio/mpeg">
</audio>

4. 优化事件逻辑 #

原代码的mousedown播放、mouseup暂停逻辑在Safari中可能因事件冒泡或触发顺序问题失效，改用点击事件切换状态更稳定，也符合常规用户操作习惯。

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