HTML无原生波形编辑能力，须组合Web Audio API（加载/解码/采样）与Canvas 2D（绘制波形），并自行实现降采样、归一化、坐标换算、AudioBuffer拼接、WAV编码等完整流程。
HTML 里没有原生波形编辑能力，得靠 Web Audio API + Canvas
直接用 <audio></audio> 标签只能播放、暂停、跳转，画不出波形，更没法编辑。真正能读取音频数据、分析振幅、渲染波形、支持拖拽选区和剪辑的，必须组合使用 Web Audio API（加载/解码/采样）和 Canvas 2D（绘制波形图）。浏览器不提供“波形编辑器组件”，所有交互逻辑都得自己写。
从文件读取音频并生成波形数据，别用 FileReader 直接读 ArrayBuffer
常见错误是用 FileReader.readAsArrayBuffer() 读完就扔给 AudioContext.decodeAudioData()——这没问题，但很多人忽略：解码后得到的是高精度浮点 PCM 数据（Float32Array），长度动辄几十万，直接全量画到 Canvas 上会卡死或失真。实际要先做降采样（downsample）和归一化（normalize）。
-
decodeAudioData()返回的AudioBuffer包含getChannelData(0)，这是原始单声道数据 - 按需抽取每 N 个点取一个最大值（峰值采样）或均值，压缩到 1000–5000 点区间，适合 canvas 绘制
- 把 -1.0~+1.0 的浮点值映射到 0~255 的像素高度时，记得用
Math.abs()或上下包络线分别处理，否则波形塌成一条线
实现“可拖选区域”需要监听 canvas 的 mousemove + getBoundingClientRect() 坐标转换
Canvas 本身不识别时间轴，你画的每个像素代表多少毫秒，取决于音频总时长和 canvas 宽度。用户鼠标拖出选区后，必须把屏幕坐标反算回音频时间点，才能调用 AudioBuffer.copyFromChannel() 截取片段。
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
- 先用
canvas.getBoundingClientRect()获取 canvas 在页面中的真实位置 - 用
event.clientX - rect.left得到相对 canvas 左侧的 x 像素位置 - 再换算：
startTime = (x / canvas.width) * audioDuration，注意单位是秒 - 编辑操作（如删除）不是删 canvas 图形，而是新建
AudioBuffer，用copyToChannel()拼接前后段
导出编辑后的音频必须重编码为 Blob，不能只 canvas.toDataURL()
Canvas 画的只是波形快照，不是音频数据。用户点“导出”，你要把修改后的 AudioBuffer 重新编码成 WAV 或 MP3——浏览器原生只支持 WAV 封装（无压缩 PCM），MP3 需额外引入 lamejs 或 ffmpeg.wasm。
立即学习“前端免费学习笔记（深入）”；
- WAV 封装要手动拼接 RIFF 头部（44 字节），网上有现成函数如
encodeWAV()，别自己手写 - 导出前检查
AudioBuffer.numberOfChannels和sampleRate，不同浏览器对OfflineAudioContext的 channel 支持有差异 - 移动端 Safari 对长时间
decodeAudioData()有限制，大文件建议分段 decode 或用MediaRecorder替代部分流程
波形编辑真正的复杂点不在绘图，而在时间轴精度、选区与音频帧对齐、静音段检测、撤销栈设计这些细节。Canvas 画错一两个像素不重要，但时间戳偏移 10ms，剪出来的音频就会咔哒作响。
