凌晨1:23,我给‘城市阳台党’微信群发了一条链接:woshird.com/demo/water-rose。
页面极简:一张玫瑰照片 + 一行字『下次浇水:6月12日 上午10:00』 + 一个喇叭图标按钮。
没人点链接——直到我点了喇叭按钮,手机突然响起温柔女声:‘主人,阳台的玫瑰该喝水啦~记得喷叶面哦。’
群里炸了:‘这声音哪来的?’‘能设成每天早上喊我吗?’‘我家小米音箱能播这个吗?’
答案是:能。而且全程不用写一行JavaScript,不配服务器,不接云服务。
这就是Web Speech API的力量——浏览器原生支持,微信内置浏览器(X5内核)已兼容多年,却被99%新手忽略。
下面带你用Claude Code + 3个Prompt,做出可语音唤醒的植物管家:
🌱 Step 1:生成带语音播报的HTML页
Claude Code Prompt:
生成一个植物浇水提醒页,要求:
显示植物名(例:薄荷)、下次浇水时间(例:2024-06-15 09:30)
页面中央有一个大喇叭图标(SVG绘制)
点击喇叭,用Web Speech API朗读:‘主人,[植物名]该喝水啦~记得[浇水方式,如:浇透土壤]’
兼容微信内置浏览器,无需HTTPS(允许HTTP)
所有代码在一个HTML文件中,内联CSS和JS
Claude会返回完整可运行HTML。保存为
water-mint.html。🌱 Step 2:微信真机测试(关键!)
> ✅ 实测:iOS微信需开启「允许网站使用麦克风」(设置→微信→照片、媒体、文件→开启),安卓基本即开即用。
🌱 Step 3:对接小米音箱(无代码版)
小米音箱不支持直接播网页?我们用「微信语音消息」做桥梁:
water-mint.html中加入自动录音功能(Claude Prompt):在页面加载后5秒,自动调用Web Speech API朗读提醒语,并将语音流导出为Blob URL,创建一个下载音频链接.wav文件 → 微信发给自己 → 长按语音消息 → 「设为闹钟铃声」→ 同步至小米音箱。从此,每天早上8点,音箱说:‘主人,薄荷该喝水啦~’
💡 进阶提示:
植物名和浇水方式从URL参数读取,例如?plant=绿萝&method=浸盆/edit输入‘为以下5种植物各生成一页:绿萝、龟背竹、多肉、茉莉、铜钱草,URL参数化’这不是炫技。这是让AI真正住在你家阳台的方式——没有API密钥,没有设备绑定,只有你和植物之间,一句准时的提醒。
(附:所有代码模板已开源,扫码woshird.com/qa/speech-garden获取)