[!abstract] 本文要点
给 AI 写的网页加音效，根本不需要找音频文件。你只需在需求里加一句"用 Web Audio API 实现音效"，AI 就能让网页实时"演奏"出声音。

AI 写的网页，怎么添加音效？

网页托管到在线平台，怎么上传同目录下的音效文件？

我让 AI 制作的课堂游戏小网页，音效播放不出来，怎么办？

一万多人在教你如何用 AI 写网页，各种小游戏、课堂管理工具，大家已经制作得得心应手了；但到了瓶颈的时候，就发现还是挺难突破的。

之前的直播给大家演示了如何实现多用户、多设备数据互通，没看过的可以补课：《在教室大屏，实时展示学生端提交的数据！》。

今天我们来看看，如何不借助外部的音频文件，让 AI 写的小网页也能拥有音效，让你的网页更生动~ 你都不用去网上苦苦找音效文件了！

1. 原理分析

在大家的传统观念中，想要在网页中引用音效文件，一定得使用一个 .mp3 文件，然后在网页中引用那个文件的地址。不光人这么想，很多 AI 默认也是这么认为的，就像下图这样：

所以，AI 在帮你写完网页小工具之后，会叫你把对应的音频文件，放置到与网页相同的目录下。

如果你在本地直接双击打开网页，音频能正常加载；但如果你把网页托管到只支持单页面的在线平台（没有服务器的那种），音频文件就没办法上传了。

2. 破局：用 Web Audio API 生成音效

其实，HTML5 原生支持实时生成音效，不需要外部引入音频文件。

较新的浏览器，都支持一个东西叫做——Web Audio API。具体的代码解释起来很复杂，你不需要去学习。

你只需要在指挥 AI 写网页的时候，告诉它"如果网页中需要音效，用 Web Audio API 来实现"就可以了。

下面是 AI 生成的网页，我没做任何改动；所以截图里的文字是反的，这不重要，你听音效就行了：

用同样的方法，我还让 AI 制作了在线的弹钢琴网页：

这个网页，已经上线到不坑盒子的"插入网页"页面库中：

如果你心狠一点，还可以让 AI 再努点力，帮你写一些创意的音效集合，来试试看哪些音效你用得上，以后就让 AI 给你在页面中实现那种音效。

3. 结尾

我见过有的小伙伴，学了大半年了，还是只会简单的课堂积分、晨读抽背这种小工具；换句话说还是在原地踏步。

这段时间各个 AI 在飞速成长，能写出的网页也越来越复杂、越来越多样。

你不需要去了解代码，但你得知道"有这么个东西，我可能用得上"，这样你才能更好地指挥 AI。

[!question] 互动话题
对了，多维表格课，你学得怎么样了？