HTML audio标签#t时间控制参数第二次点击播放失效问题求助

根本原因 #

#t=begintime,endtime属于媒体片段URI的标准参数，仅会在媒体资源首次加载解析时生效。浏览器第一次加载audio标签的src资源时，会识别该参数并按规则设置初始播放范围与起始位置；但首次播放完成后，媒体资源已完成加载进入缓存状态，后续调用play()方法时，浏览器不会重新解析src中的哈希参数，会直接从当前播放进度（默认是首次播放结束后的末尾位置）开始播放，自然不会遵守预设的时间范围。

最优解决方案 #

不依赖URI哈希参数，通过JS直接控制播放进度并监听播放状态，每次点击都重置播放位置即可实现全场景适配：

const drainAudio = document.getElementById("drain");
// 自定义播放起止时间，单位为秒
const PLAY_START = 5;
const PLAY_END = 6;

function drainwater() {
  // 每次播放前强制重置到起始位置
  drainAudio.currentTime = PLAY_START;
  drainAudio.play();
}

// 监听音频播放进度，到达结束点自动暂停
drainAudio.addEventListener('timeupdate', () => {
  if (drainAudio.currentTime >= PLAY_END) {
    drainAudio.pause();
  }
});

<audio src="https://upload.wikimedia.org/wikipedia/commons/b/b9/Kitchen_sink_draining_water.ogg" id="drain"></audio>   
<button onclick='drainwater()'> Drain </button>

该方案相比临时定时器方案的优势：

• 每次点击都会强制跳转至指定起始位置，不存在二次播放失效问题
• 时间控制与音频实际播放进度完全对齐，避免定时器受音频加载卡顿、播放延迟等因素影响出现的时间偏差
• 适配所有音频场景，无内容类型限制

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