给 WordPress 添加语音搜索功能

发布于：电脑网络 3,254 次践踏

相信大家都用过 Google 的搜索，不知道大家有没有注意到 Google.com in English 版本的搜索有一个语音搜索，只要吐字清晰，它的识别力还是很高的，而且也只支持中文的语音，这对于老年人、残障人士、偷懒人群是一个非常有用的装B功能。今天心血来潮，把此功能搬到 WordPress。

就本站现在用的这个主题来说，已经用上了这个 WordPress 的语音搜索功能，有图为证。

可以看到右上角的站内搜索框比以往多了一个小话筒的图标，点击之后就会弹出一个小的提示框，此时可以清晰地说出你需要搜索的关键词，截图中是我语音说的 "wordpress" 这个关键词，有兴趣的朋友可以拿本站做测试。

但是，这个功能暂时只能在 Chrome 11 版本以上的谷歌浏览器上看到这个效果。因为这是在 input 输入框里添加 x-webkit-speech 属性来实现的，从这个属性的命名可以看出，webkit，这是一个 webkit 核心浏览器的私有属性，所以你可以切换到 Chrome 浏览器来测试本功能。

x-webkit-speech 是 html5 的 speech 功能的 API，Google 的 Chrome 在对 HTML5、CSS3 的新技术标准的支持上特别积极，所以很有幸，我们可以在 Chrome 上体现各种新奇的功能特性。实现的方法也特别简单，在你的搜索输入框的 input 标签里添加 x-webkit-speech 属性即可，如下：

<input type="text" x-webkit-speech />

废话很多，但是代码却很简单，赶紧试试呗~

  1. 虽然很简单，但是我还有点问题。因为我很菜，搜索输入框的 input 标签属性怎么调出来。。我现在按f12找到那个代码，加上去。但是一刷新就没了。。

  11. 语音搜索应该是以后，特别是移动互联网时代的发展趋势。因为它会使搜索变得更快、更便捷，比如，你可能会输入搜索“最佳上网本”，但进行语音搜索时你可能会说“最好的上网本是什么。”口语化更符合人的自然习惯。

  13. 有个问题 你直接语音之后 他不会自动去除搜索框中的提示文字。 比如它识别出“你好”时，在你的搜索框中会出现“搜搜更健康……你好”

  18. 可以添加语音搜索，功能不错。估计不怎么好使吧？

    我有点不明白为什么那么多的人帮拿福能做广告？ 佣金又不高区区几十人民币而已。或者送T-SHIRT。。我在英国北爱尔兰 免费的T SHIRT 贴钱送给我穿，我都不会去穿。穿着给别人打广告。。

  63. 既然还带着“webkit”帽子的话就应该算不上是正规的标准吧，毕竟还只是一家的。
    倒是那个按钮样式配上那个渣字体……还在用水果风格的 Windows 主题呢？ :lol:

  67. 很久以前就有的触屏手机，由iPhone一下子带火了
    很久以前就有的触屏平板，由iPad一下子带火了
    很久以前就有的语音识别，有siri一下子带火了
    为啥苹果总能找准技术切入时机？

    • 有一种创新叫从无到有，还有一种创新叫重新发明，显然后者更容易下手做出好的实用的产品。
      但是大多数人一味的追求了前者。
      举个例子，上海的交通卡，竟然无法直接刷卡租用公共自行车。每次看到一大排公共自行车，我手里攥着交通卡却要走十几分钟的来回路，我就暗暗的问候一句……