需用JavaScript控制audio的currentTime、play()和pause()实现分段播放：先定位起始时间，再播放，最后用setTimeout精确暂停；须确保音频支持HTTP Range请求，避免preload="none"，且iOS需用户手势触发播放。
audio 标签怎么用才能支持分段播放
直接用 <audio></audio> 标签默认是整段加载、顺序播放，没法“跳到第30秒听5秒再停”。要实现分段试听，核心不是换标签，而是靠 JavaScript 控制 currentTime 和 play() / pause()，配合预设的时间区间。
常见错误是只写 <audio src="a.mp3"></audio> 就以为能切片——实际浏览器根本不知道你要哪一段。必须显式设置起始点、时长，并手动触发播放与中断。
- 音频文件需支持 HTTP Range 请求（绝大多数现代托管服务默认支持，但本地
file://协议下常失败） - 避免用
preload="none"，否则首次currentTime设置可能无效（浏览器还没加载足够数据） - 移动端 iOS Safari 对自动播放限制极严，
play()必须由用户手势（如click）触发
怎么定义和触发一个“15s–18s”的试听片段
关键在三步：定位 → 播放 → 定时暂停。不能依赖 loop 或 duration 属性自动截断，得用 setTimeout 或 timeupdate 事件监听。
下面是最简可行示例（假设音频已加载完成）：
立即学习“前端免费学习笔记（深入）”；
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
<audio id="player" src="talk.mp3"></audio>
<button onclick="playSegment(15, 3)">试听 15–18s</button>
<p><script>
const audio = document.getElementById('player');
function playSegment(start, duration) {
audio.currentTime = start;
audio.play().catch(e => console.warn('播放被阻止:', e));
// 精确停在 start + duration 处
setTimeout(() => audio.pause(), duration * 1000);
}
</script>-
playSegment(15, 3)表示从第 15 秒开始播 3 秒，不是“播到第 18 秒”——因为currentTime设置后可能有微小延迟，用setTimeout更可靠 - 如果需要更高精度（比如误差 timeupdate 事件，但会增加代码复杂度
- 多次快速点击按钮时，记得先
audio.pause()再currentTime = start，否则可能叠加播放
多个试听段怎么管理才不混乱
硬编码一堆 onclick="playSegment(…)" 很快就不可维护。推荐用数据驱动：把每段的 start、end、label 存成数组，动态生成按钮。
例如：
const segments = [
{ label: '开场白', start: 0, end: 8 },
{ label: '重点结论', start: 42, end: 51 },
{ label: '案例说明', start: 127, end: 143 }
];
<p>segments.forEach(seg => {
const btn = document.createElement('button');
btn.textContent = seg.label;
btn.onclick = () => playSegment(seg.start, seg.end - seg.start);
document.body.appendChild(btn);
});- 用
seg.end - seg.start计算时长，比手写数字更不易出错 - 按钮文字直接来自配置，后期增删段落只需改数组，不用碰 HTML 或事件绑定逻辑
- 如果段落很多，可加
disabled状态防止连点，或用audio.readyState 判断是否就绪再播放
为什么有时点击没反应？几个隐蔽原因
最常被忽略的是跨域和 MIME 类型问题：音频文件若托管在不同域名，且响应头没带 Access-Control-Allow-Origin，audio.duration 会是 NaN，currentTime 设置可能静默失败；而服务器若返回 text/plain 而非 audio/mpeg，部分浏览器拒绝播放。
- 用浏览器开发者工具的 Network 面板检查音频请求：状态码应为 206（Partial Content），Response Headers 含
Accept-Ranges: bytes - 本地开发时用
python3 -m http.server启服务，别双击打开 HTML 文件（file://下无法发 Range 请求） - iOS 上即使有用户手势，
play()仍可能返回 Promise rejected，必须加.catch()并降级提示（比如弹出“请在播放按钮上再点一次”）
分段试听真正难的不是写几行 JS，而是让每个环节都稳：网络能按需加载、时间能准确定位、设备能允许播放。漏掉任意一环，按钮就只是个摆设。
