沙雕图发布流程再优化，本地存储+自动配音生成视频

之前有发过一篇文章[自动化] 为了方便发今日头条，我做了一个浏览器扩展，介绍我借助浏览器扩展，快速收集沙雕图到 Notion 然后生成图文后发布到今日头条的过程。

最近在原本生成文章的基础上，我对这个扩展做了一些大的升级：

放弃 Notion 改用本地存储来管理图片素材
加入视频生成功能，自动剪辑和配音选择的图文，生成横版和竖版视频

为什么放弃 Notion

在上一篇文章中，我有讲过，Notion 的上传附件的 API 有问题，只能借助第三方平台，这样很不方便，导致整理添加素材的时间很长，因为多了一个请求。其实后台我有换到 Airtable，它的 API 支持更全面，管理起来也更方便，但是每次保存图片素材依然要等待好几秒。

因为主要是自用，而且我也暂时没有同步的需求，所以又改为使用本地存储，使用 IndexedDB 来在浏览器本地管理图片素材了。

当然还有一个目的，就是我想把这个扩展开源处理，给更多普通人使用，所以想尽量减小存储功能的依赖。

而且改为本地存储，保存图片速度那自然是极大的提升。

加入视频生成功能

沙雕图这种东西，似乎在头条没有什么市场，图文几乎没有什么阅读量，我之前有试过手动剪辑成视频，效果比文章好一些（但是效果还是惨淡），发到抖音上面，播放还能更多一些。

我猜测，一方面，相比图文，大众更愿意尝试视频内容。另一方面，头条的用户群体对沙雕图这种年轻人玩的东西，可能本身也不太感冒，一些梗，他们也看不懂。

视频虽然美好，但是剪辑实在太累了，完全不想搞，之前搞过一个宠物类型讲故事的抖音号，试着剪辑过几个作品，效果还不错，但是剪辑的工作实在让我提不起兴趣继续去尝试。人太懒了，没有办法。

其实沙雕图我也不太想继续剪辑的，但是我无意中发现了 Bilibili 开源的一个视频剪辑的 JavaScript Package, WebAV，竟然可以直接在浏览器端进行视频合成。这一下打开了新世界的大门。

纯Web视频剪辑 - 哔哩哔哩

Github - WebAV-Tech/WebAV

简单了解之后，知道是使用的 WebCodecs API 进行的视频渲染的工作，于是让 AI 做了简单的尝试后，我发现这个方案可行，可以解决我不想手动剪辑视频的大问题。

不过我的扩展使用了纯前端无构建的方案，不想使用这么重的库，所以直接使用 WebCodecs 完成了图片生成视频幻灯片的工作。

文本配音

你可能注意到，上面生成的视频中，是有配音的。没错，我加了配音，不然光播放图片显得很突兀，而且观众可能也没有耐心去读图上片的文字，而且有时候，图上并没有文字或者我对图片有自己的见解。看图时顺便播放解说是个不错的选择。

我本来是想用 Windows自带的 TTS 合成的，效果虽然不好，但是重在免费。但可惜的是，虽然支持合成语音，但是不支持录制并渲染到视频里面，只能寻找 API 了。

逛了一圈，最终选择了 Amazon Polly，毕竟它的免费配额还蛮多的。

https://aws.amazon.com/cn/polly/

通过 Amazon Polly 将每张图片的描述文字转换为中文语音，插入到视频中，并让对应的图片和音频保持一样的时长再切换到下一张。

我是想把工具开源的，这个服务只能免费用一年，而且国内用户并不是很方便申请，所以后面我其实还是想换成国内的服务或者其它易于获得的免费方案的。如果你有这方面的经验，欢迎在评论区告知。Image

总之，这样一个简易的带语音解说的幻灯片视频就出来了。为了让视频显得活泼一些，我还在背景中循环播放了一段轻快的音乐。

https://pixabay.com/music/happy-childrens-tunes-cute-happy-kids-354678/

视频转码

通过 WebCodecs 生成的视频，是 webm 格式的，虽然也可以上传到头条等平台，但是不支持提取封面，还是 mp4 格式适配性更强一些。

但我有尝试过通过浏览器生成 MP4 视频，但是都可耻的失败了，一方面需要更多的依赖库，还和浏览器环境有关系。另一方面我本身对视频渲染的技术并不熟悉，即使有 AI 加持，出了问题我依然排查不出来。不想在这上面浪费时间，于是转换思路，使用 ffmpeg 来实现转码的工作。

我写了一个 BAT 脚本来查看下载文件夹中的 .webm 文件，然后通过输入选择来实现快速转换。

关键命令是

set "FFMPEG_PATH=C:\Applications\ffmpeg\bin\ffmpeg.exe"
"!FFMPEG_CMD!" -y -i "!SELECTED_PATH!" -c:v libx264 -c:a aac "!OUTPUT_FILE!"

完整的代码

https://gist.github.com/greatghoul/556c9f129efb25ac10eea38e97a0a42e

脚本是 AI 帮我写的，我其实看不懂。Image

这样就能很容易地获得 mp4 格式的视频，上传到平台就很方便了。

代码开源

在 AI 盛行的今天，普通人制作属于自己的软件，变得更加容易，但是从源代码构建成可直接运行的应用程序却依然有一定的门槛，尤其是在 Windows 平台上，连开发者自己要搞定开发环境都要经过一番折腾，就更别提非开发者群体了。

我觉得目前纯 JavaScript 已经可以实现很多功能，很多功能甚至可以使用纯静态页面或者浏览器扩展来运行，为了方便更多非程序员可以轻松的修改应用，而不用苦恼如何安装 node.js 以及 node modules，这个扩展项目我使用了 Preact (一个类似 React 的前端框架) 的无构建方案，解压载入 Chrome 即可运行。

https://preactjs.com/guide/v10/getting-started/#no-build-tools-route

代码以 MIT 协议开源在 Github，基本可以随意去修改和使用。

https://github.com/greatghoul/CrxMediaMate/

这个扩展不会发布到 Chrome 扩展商店，所以你需要在开发者模式中去加载使用。

即使你不是开发者，如果和我的使用场景类似，也可以借助 AI 去按照自己的需求修改，然后直接使用而不需要构建的过程。

如果有时发现修改没有生效，可以尝试重载扩展