如何在HTML中为音频文件设置精确的起始和结束播放点？

#t=start,end 这种URL片段标记的兼容性并不统一，Chrome目前仅支持解析起始时间，会忽略结束时间，所以得用JavaScript来手动控制播放范围，这是更可靠的方案。

单个音频的实现代码 #

<audio id="targetAudio" controls src="你的音频文件路径.mp3">
  你的浏览器不支持音频播放功能
</audio>

<script>
// 自定义起止时间（单位：秒）
const startAt = 262;
const stopAt = 302;
const audioElement = document.getElementById('targetAudio');

// 音频元数据加载完成后，直接跳转到起始时间
audioElement.addEventListener('loadedmetadata', () => {
  audioElement.currentTime = startAt;
});

// 实时监听播放进度，到达结束点就暂停
audioElement.addEventListener('timeupdate', () => {
  if (audioElement.currentTime >= stopAt) {
    audioElement.pause();
  }
});
</script>

多个音频批量处理 #

如果要给多个音频设置不同的起止时间，可以用自定义属性批量管理：

<!-- 每个音频通过data-start和data-end设置时间 -->
<audio class="timed-audio" data-start="262" data-end="302" controls src="音频1.mp3"></audio>
<audio class="timed-audio" data-start="15" data-end="45" controls src="音频2.mp3"></audio>
<audio class="timed-audio" data-start="60" data-end="120" controls src="音频3.mp3"></audio>

<script>
// 遍历所有带timed-audio类的音频元素
document.querySelectorAll('.timed-audio').forEach(audio => {
  const startTime = parseFloat(audio.dataset.start);
  const endTime = parseFloat(audio.dataset.end);

  audio.addEventListener('loadedmetadata', () => {
    audio.currentTime = startTime;
  });

  audio.addEventListener('timeupdate', () => {
    if (audio.currentTime >= endTime) {
      audio.pause();
    }
  });
});
</script>

这段代码逻辑简单直接：

1. 等待音频元数据加载完成，确保能正确读取时间信息
2. 自动跳转到设定的起始时间
3. 持续检查播放进度，一旦到达结束时间就暂停播放

内容的提问来源于stack exchange，提问作者J.J. Surbeck