实现单次试听需省略loop、禁用autoplay，显式添加controls，src确保有效，preload设为metadata；ios需首次交互唤醒音频上下文，格式首选.mp3。

用 <audio></audio> 标签实现单次试听，不自动循环

默认情况下 <audio></audio> 播放完就会停止，天然就是“单次试听”——只要别加 loop 属性。关键是要控制行为明确、避免意外重播或自动播放。

• 必须显式设置 controls，否则用户无法触发播放（autoplay 在多数浏览器被策略限制，且违背试听场景）
• 绝对不要写 loop="true" 或 loop，哪怕只加一个空属性也会循环
• 如果音频路径是相对的，确保 src 能正确解析，比如 src="audio/sample.mp3"；404 会导致控件显示“无法加载”，但不会报错
• 可加 preload="metadata"，让浏览器只预加载时长/格式等信息，节省带宽，适合试听场景

禁止自动播放的兼容写法

Chrome、Safari 等现代浏览器要求用户手势（如 click）后才能播放音频。直接写 autoplay 不仅无效，还可能触发控制台警告 The AudioContext was not allowed to start。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

• 删掉 autoplay 属性——这是最稳妥的做法
• 如果需要“点击按钮后播放”，用 JS 调用 play() 方法，例如：

  <button onclick="document.getElementById('trial').play()">试听</button>
  <audio id="trial" src="audio/clip.mp3"></audio>

• 注意：在 play() 调用前，音频元素必须已插入 DOM 且 src 已设置，否则会抛 DOMException: The element has no supported sources

移动端 Safari 的静音播放限制

iOS Safari 默认以“静音上下文”启动音频，即使没开静音键，play() 也可能失败或无声——这是常见坑点。

• 必须在用户首次交互（如 touchstart/click）回调中初始化 AudioContext 或调用 play()，不能延迟到 setTimeout 里
• 推荐在页面加载后监听一次 click 或 touchstart，然后立即调用 new Audio().play().catch(e => {}) 唤醒音频上下文（空播放）
• 后续所有 <audio></audio> 元素的 play() 就能正常出声

文件格式与兼容性取舍

试听音频不需要高保真，优先选体积小、解码快、全平台支持的格式。

• 首选 .mp3：兼容性最好，几乎所有浏览器都支持，编码工具普及
• 避免 .wav：未压缩，体积大，加载慢，移动端易卡顿
• 不用 .ogg：Firefox 支持好，但 Safari 和 IE 完全不支持，增加 fallback 成本
• 若需更高压缩率，可用 .m4a（AAC 编码），但需确认服务器 MIME 类型为 audio/mp4，否则 Safari 可能拒绝加载

实际部署时最容易被忽略的是 iOS 静音上下文唤醒和相对路径 404 —— 这两个问题在线上环境才明显暴露，本地测试常误以为“功能正常”。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！