纯HTML无法实现可交互音频时间轴编辑，需JavaScript+Canvas/SVG+Web Audio API；range输入框仅能作只读进度条，波形须预解码振幅数据后Canvas绘制。
纯 HTML 无法实现可交互的音频时间轴编辑功能——<audio> 元素只提供基础播放控制，没有内置的时间轴拖动、区域选中、波形渲染或剪辑能力。要做出类似 Audacity 或在线剪辑器那样的时间轴界面，必须结合 JavaScript + Canvas / SVG + Web Audio API。
为什么 <input type="range"> 不够用
很多人试图用 <input type="range"> 模拟时间轴，但它只是个滑块：无法显示波形、不能高亮选中区间、拖动时无法实时反馈起止时间、不支持鼠标框选或键盘微调。更关键的是，它和 audio.currentTime 的同步在快速拖拽时容易丢失精度，且无法响应“播放中跳转后自动更新滑块位置”这类双向绑定逻辑。
常见错误现象：input 滑块卡顿、松手后跳回旧位置、拖拽时音频播放中断、选区松开后坐标错位。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 把
<input type="range">当作只读进度条（仅显示当前播放位置），另起一个可拖拽的<div>做“选区句柄” - 监听
audio.ontimeupdate而非requestAnimationFrame更新进度，避免帧率抖动 - 对
input的change事件做防抖（50ms），否则频繁触发currentTime赋值会导致音频卡顿
用 Canvas 渲染波形并支持点击定位
Web Audio API 的 analyserNode 只能获取实时频谱，不适合生成静态波形图；真正可用的是先用 AudioContext.decodeAudioData() 解码完整音频，再用 OfflineAudioContext 或 Web Worker 预处理振幅数据（每 10–50ms 一个采样点），最后在 <canvas> 上绘制线条或柱状图。
使用场景：加载 MP3/WAV 后首次渲染波形，后续所有时间轴操作都基于该数据数组，不依赖实时解码。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
性能影响：10 分钟音频若每 20ms 取一个振幅值，仅需约 30KB 数组，Canvas 绘制 6000 点完全流畅；但直接在主线程 decode 大文件会阻塞 UI，务必用 async/await + OffscreenCanvas（如支持）或移入 Worker。
简短示例（核心逻辑）：
const audioCtx = new (window.AudioContext || window.webkitAudioContext)();
fetch('song.mp3').then(r => r.arrayBuffer())
.then(arrayBuffer => audioCtx.decodeAudioData(arrayBuffer))
.then(buffer => {
const channelData = buffer.getChannelData(0); // 左声道
const step = Math.floor(channelData.length / 5000); // 压缩到 ~5000 点
const waveform = [];
for (let i = 0; i < channelData.length; i += step) {
waveform.push(Math.abs(channelData[i]));
}
drawWaveformOnCanvas(waveform, canvas);
});实现可拖拽选区（In & Out Point）
时间轴编辑的核心是标记 In/Out 时间点，并允许拖拽调整。不能靠两个独立 <input type="range"> —— 它们无法约束彼此位置（比如 Out 不能小于 In），也无法响应鼠标框选。
实操建议：
立即学习“前端免费学习笔记（深入）”；
- 用两个绝对定位的
<div class="handle">（分别标 In/Out），CSS 设置user-select: none防止误选文字 - 监听
mousedown→mousemove→mouseup，计算 clientX 到时间的映射：time = (x - left) / width * duration - In/Out 句柄之间加一个半透明
<div class="selection">，宽度随二者距离动态变化 - 键盘支持：聚焦句柄后，按 ←→ 方向键以 0.1s 步长微调，
Shift+←→为 1s 步长 - 关键约束：拖动 In 时，若超过 Out，则同步移动 Out；反之亦然 —— 否则会出现“负长度选区”
容易踩的坑：getBoundingClientRect() 返回的 left 值受滚动容器影响，若时间轴在外层 <div style="overflow-x: auto"> 中，必须减去 scrollLeft 才能得到正确 X 坐标。
真正的难点不在绘制，而在时间精度与用户直觉的匹配：音频帧是离散的，但时间轴是连续的；鼠标像素位移要映射到毫秒级时间点，还要兼顾不同采样率（44.1kHz vs 48kHz）下播放引擎的实际行为。很多“看似正常”的拖拽跳转，背后是 currentTime 被四舍五入到最近音频帧导致的 10–23ms 偏差 —— 这在剪辑中就是人耳可辨的咔哒声。
