一行代码让浏览器开口说话，还能调音调语速

前文提过我做小程序开发时用过微信自带的语音播放，但网页端一直没试过。 juejin.cn/post/758514…

前几天朋友问我："网页能播放声音吗？"

我说当然能啊，不然百度翻译怎么让单词发声的。虽然事后查了下，发现百度翻译其实用的是自己专门的TTS接口，不是浏览器自带的——但这不重要，反正我当时被问住了——因为我确实没在网页里自己写过语音功能。

于是就去翻了翻文档，结果发现——浏览器居然自带语音，几行代码就能搞定。

就这几行：

html

<button onclick="speak()">🔊 点我试试</button>

<script>
function speak() {
  const utterance = new SpeechSynthesisUtterance('你好呀');
  window.speechSynthesis.speak(utterance);
}
</script>

复制到HTML文件打开，点击按钮，你的电脑真的会说话。

更好玩的是，还能调音调

我加了个滑块，能让声音变粗变细：

html

<input type="range" id="pitch" min="0" max="2" step="0.1" value="1">
<button onclick="speak()">播放</button>

<script>
function speak() {
  const utterance = new SpeechSynthesisUtterance('你好，我是你的网页');
  const pitch = document.getElementById('pitch').value;
  utterance.pitch = pitch;  // 1是正常，小于1变粗，大于1变细
  window.speechSynthesis.speak(utterance);
}
</script>

滑块往左拉，声音变粗像大叔；往右拉，声音变细像萝莉。自己玩挺上瘾的。

还能调语速

加个语速控制：

javascript

utterance.rate = 0.8;  // 小于1慢一点，大于1快一点

慢速适合朗读文章，快速适合念个提醒。

这东西能干啥？

1. 给你的博客加个朗读功能

很多技术文章现在都有"朗读全文"按钮，背后就是这玩意。代码就这么简单：

javascript

function readArticle() {
  const content = document.querySelector('article').innerText;
  const utterance = new SpeechSynthesisUtterance(content);
  window.speechSynthesis.speak(utterance);
}

2. 写个搞怪生成器

把音调和语速随机化，能生成各种奇怪声音。做个网页让朋友点着玩，效果不错。

3. 给AI加个嘴巴

最近OpenClaw不是很火吗？AI代理能帮你操作电脑了。如果AI办完事，再开口告诉你一声，体验就更完整了。

比如AI帮你订好机票后，浏览器说："票订好了，后天出发别忘啦。"

注意几个坑

坑1：不能自动播放

这玩意必须在点击按钮之类的事件里调用，页面一加载就自动播放是不行的（浏览器安全限制）。

坑2：选个中文声音

默认可能是英文发音，读中文很怪。指定一下中文声音：

javascript

const voices = window.speechSynthesis.getVoices();
const chineseVoice = voices.find(v => v.lang.includes('zh'));
if (chineseVoice) utterance.voice = chineseVoice;

总结

就这几行代码，能让你的网页开口说话。虽然不是啥高大上的技术，但加到项目里，用户点一下能听到反馈，体验感确实不一样。