将语音响应添加到HTML页面

Question

这是一个仅限移动的网站：

我想在我的页面上有一个按钮，当按下时，用户可以对着他们的手机说话，当他们结束通话时，会触发一个随机的mp3文件。这在JQuery中可能吗？

Answer 1

此页面演示了如何做到这一点。

http://www.phpied.com/x-webkit-speech-input-and-textareas/

以下是其他一些专门为语音识别构建的JS库。

http://jqueryhouse.com/5-voice-control-javascript-libraries-for-developers/

Answer 2

我曾经使用过语音识别API，并使用过Annyang。

annyang是一个很小的javascript库，可以让访问者控制您的网站与语音命令。annyang支持多种语言，没有依赖性，重量只有3kb，可以免费使用。

它很简单：

<script src="//cdnjs.cloudflare.com/ajax/libs/annyang/2.0.0/annyang.min.js"></script>
<script>
if (annyang) {
  // set your commands here, as many as you need
  var commands = {
    'play mp3': function() {
        // change this to your own play MP3 method
        audioElement.play();
    },
    'put the kettle on': function() {
        console.log("You wish!");
    }
  };
  // add commands
  annyang.addCommands(commands);
  // start listening
  annyang.start();
}
</script>

Annyang是一个使语音命令设置变得简单的库。然而，这并不是世界上最快的解决方案，因为我认为（有知识的人请在这里输入）库只是调用和外部服务（我认为是谷歌），在运行代码之前必须等待响应。这只是一两秒钟，但它就在那里。

API语音识别还需要获得使用用户麦克风的权限。当页面加载时，一个小弹出窗口会自动出现并请求许可。如果用户选择"否"，您的语音功能将不起作用。

正如我之前所说的，浏览器支持看起来仍然相当暗淡。在撰写本文时，只有Chrome、Android版Chrome和Opera可以使用它：caniuse.com/#feat=语音识别

玩语音游戏非常有趣，所以不管你决定是否使用它，都要玩一场。我用它和ResponsiveVoice一起回复我。我在桌面上建立了一个小页面，我可以问她"天气怎么样？"之类的问题，她会给我读我当地的天气报告。我问"最新情况如何？"她会从我当地的新闻社的RSS订阅源中读10条新闻。我还把它变成了语音计算器。所以，是的，上演一出戏——总有一天它会得到广泛的支持。

点击此处阅读更多：

• https://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html
• https://developers.google.com/web/updates/2013/01/Voice-Driven-Web-Apps-Introduction-to-the-Web-Speech-API?hl=en
• http://shapeshed.com/html5-speech-recognition-api/
• http://www.sitepoint.com/introducing-web-speech-api/