iOS端JavaScript无法设置Audio的currentTime问题排查

嘿，这个问题我太熟悉了！iOS上的WebKit内核（包括iPhone端的Chrome，因为它复用了Safari的内核）对媒体播放有一套特别严格的限制，你的代码刚好踩了几个关键的坑。

问题根源 #

iOS的WebKit有两个核心限制导致你的代码失效：

• 元数据依赖：设置currentTime必须等音频的元数据（比如时长、可跳转范围）加载完成，否则浏览器会直接忽略这个设置，返回默认的0。
• 用户交互限制：所有播放相关操作必须在用户主动触发的事件（比如click）内完成，且不能有无效的连续播放/暂停操作干扰。

你的代码里，设置audio.src后立刻执行play()→pause()→set currentTime，这时候音频还没加载元数据，iOS自然不会承认你的currentTime设置。

修正后的代码 #

document.addEventListener('DOMContentLoaded', function() {
  var audio = new Audio();
  // 提前设置音频地址，并告诉浏览器只加载元数据（节省带宽）
  audio.src = "test.mp3";
  audio.preload = 'metadata';

  document.getElementById('play').addEventListener('click', function() {
    // 检查音频是否已加载元数据（readyState >=2 代表HAVE_METADATA状态）
    if (audio.readyState >= 2) {
      audio.currentTime = 20;
      audio.play();
      alert(audio.currentTime);
    } else {
      // 如果元数据还没加载，监听loadedmetadata事件，触发后再操作
      audio.addEventListener('loadedmetadata', function() {
        audio.currentTime = 20;
        audio.play();
        alert(audio.currentTime);
      }, { once: true }); // 只监听一次，避免重复触发
    }
  });
});

为什么这样有效？ #

• preload='metadata'：让浏览器提前加载音频的元数据（而非整个音频文件），确保我们能可靠地设置currentTime。
• 检查readyState：如果元数据已经加载完成，直接执行播放操作；如果没加载，等待loadedmetadata事件触发后再操作，保证currentTime设置生效。
• 去掉了多余的play()→pause()操作：避免iOS的WebKit判定操作无效，确保播放流程符合浏览器的限制。

额外注意事项 #

• iOS上的所有第三方浏览器（Chrome、Firefox等）都使用WebKit内核，所以限制和Safari完全一致。
• 不要在用户交互事件外触发play()或修改currentTime，否则会被浏览器直接阻止。
• 如果音频文件较大，loadedmetadata事件可能会有短暂延迟，但这是确保跳转时间生效的必要步骤。

内容的提问来源于stack exchange，提问作者Mang Trinh Gia