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

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

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

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

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

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

原理分析

在大家的传统观念中，想要在网页中引用音效文件，一定得使用一个.mp3文件，然后在网页中引用那个文件的地址。

不光人这么想，很多AI默认也是这么认为的，就像下图这样：

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

如果你在本地直接双击打开网页，这种情况下音频能正常加载；但如果你是把网页托管到别的单网页平台（你没服务器那种），音频就无法上传了。

破局

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

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

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

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

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

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

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

结尾

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

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

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

对了，多维表格课，你学得怎么样了？