👥
👥
👥
👥

凌晨1:23,我把‘阳台养花浇水提醒’网页发到园艺群——3小时后,7位邻居问‘能同步到我家小米音箱吗?’

站长
2026年4月23日 · 阅读 2016 · 点赞 111 · 预计 3 分钟
分享:

凌晨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:微信真机测试(关键!)


  • 用微信扫描本地文件(方法同前:Live Server → 微信发链接)

  • 点喇叭 → 若听到语音,说明X5内核已启用SpeechSynthesis

  • 若无声:点右上角「…」→「在浏览器中打开」→ 再试(Safari/Chrome更稳定)
  • > ✅ 实测:iOS微信需开启「允许网站使用麦克风」(设置→微信→照片、媒体、文件→开启),安卓基本即开即用。

    🌱 Step 3:对接小米音箱(无代码版)


    小米音箱不支持直接播网页?我们用「微信语音消息」做桥梁:
  • water-mint.html中加入自动录音功能(Claude Prompt):

  • 在页面加载后5秒,自动调用Web Speech API朗读提醒语,并将语音流导出为Blob URL,创建一个下载音频链接
  • 点击下载 → 得到.wav文件 → 微信发给自己 → 长按语音消息 → 「设为闹钟铃声」→ 同步至小米音箱。
  • 从此,每天早上8点,音箱说:‘主人,薄荷该喝水啦~’

    💡 进阶提示:

  • 想个性化?Prompt里加:植物名和浇水方式从URL参数读取,例如?plant=绿萝&method=浸盆

  • 想多植物?用Cursor批量生成:/edit输入‘为以下5种植物各生成一页:绿萝、龟背竹、多肉、茉莉、铜钱草,URL参数化’
  • 这不是炫技。这是让AI真正住在你家阳台的方式——没有API密钥,没有设备绑定,只有你和植物之间,一句准时的提醒。

    (附:所有代码模板已开源,扫码woshird.com/qa/speech-garden获取)

    站长
    人人都是程序员,站长
    分享: