保存html源码仅保留audio标签但不下载音频文件，需同时获取html和音频资源才能离线播放；用ctrl+s“网页，全部”可自动下载配套音频等资源。
直接保存网页 HTML 源码时，<audio></audio> 标签本身会被保留，但音频文件（如 music.mp3）**不会自动下载**——它只是个指向外部资源的引用。想离线播放，必须同时拿到 HTML 和对应音频文件。
用浏览器“查看源代码”保存，audio标签能留但音频播不了
这是最常见也最容易踩坑的操作：右键 → “查看页面源代码” → 复制全部 → 粘贴进记事本 → 保存为 page.html。结果打开后 <audio></audio> 标签在，controls 也在，但点击播放没反应。
- 原因很直接：源码里
src="music.mp3"是相对路径，而你本地根本没有这个文件 - 浏览器 Network 面板会显示
music.mp3返回404 Not Found，控制台可能静默失败，不报错也不提示 - 如果原网页用的是
<source></source>，比如<source src="song.ogg" type="audio/ogg"></source>，那同样只存了标签，没存song.ogg
用 Ctrl+S “另存为网页，全部” 能一并下载音频文件
这是最快捷、兼容性最好的方案，适用于大多数静态页面（非 JS 动态注入的 audio）。
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
- 打开目标网页 → 按
Ctrl+S→ 在“保存类型”下拉菜单中选网页，全部 (*.html; *.htm) - 保存后，除生成一个
xxx.html文件外，还会多出一个同名文件夹（如xxx_files/），里面就包含所有被引用的音频、图片、CSS 等资源 - 注意检查
<audio></audio>的src或<source></source>路径是否已自动转为相对路径（例如从https://example.com/audio.mp3变成xxx_files/audio.mp3）；若仍是绝对 URL，说明资源未成功抓取，得手动补
F12 复制 outerHTML 只适合调试，不能替代资源下载
有些页面的 <audio></audio> 是 JS 动态插入的（比如点击按钮才生成），此时右键“查看源代码”看到的是初始空 HTML，没有 audio 标签。
- 按
F12→ 切到 Elements 面板 → 找到<audio></audio>元素 → 右键 →Copy→Copy outerHTML - 粘贴到编辑器中可还原标签结构，包括所有
src、controls、<source></source>等，但音频文件仍需单独下载 - 若
src是 blob URL（如src="blob:https://…"）或 base64 data URL，则无法直接保存为文件，需用 JS 截获或改写逻辑导出
命令行 curl/wget 抓取 HTML 后，音频文件得单独处理
适合批量操作或自动化场景，但对新手门槛略高。
- 用
curl -o page.html https://example.com只保存 HTML，音频不会附带 - 要下载音频，得先解析 HTML 中所有
src和<source src="..."></source>，再对每个 URL 单独wget或curl -O - 注意：部分音频链接有 Referer 或 Cookie 限制，直接 wget 会返回 403；此时需加
--header "Referer: https://example.com/"或配合--cookies=on - 更稳妥的做法是先用
wget --page-requisites --convert-links --no-parent https://example.com，它会递归下载 HTML + 引用资源（含 audio），但默认不抓<source></source>，需配合--html-extension和自定义正则
真正关键的不是“怎么保存 audio 标签”，而是“怎么让保存后的 HTML 能播”。标签只是指针，音频文件才是数据。路径写错、协议限制（file:// 下加载失败）、CORS 拦截、格式不支持——这些都比标签语法本身更容易导致无声。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
