今天，技术和市场齐头并进。 它是如此接近，以至于任何关于技术进步和社交媒体的狂热都在疯狂地上升。 作家正在一页接一页地填充页面，就好像它已经在这里一样。 股市牛市或熊市，报纸则印刷一串大写字母。
这种对新闻记者反应过度的陷阱在于，我们错过了许多简单的工具，围绕着我们网络空间的许多小而创新的想法。 放眼未来，使我们对当下的机会视而不见。
网络开发公司正在敦促数字营销领导更多地撰写有关
区块链改变世界的可能性或人工智能如何成为下一个最大事物的文章。 他们缺少一些非常具有创新性和前瞻性的东西。 这是使您的网站具有交互性的能力。
想象一下，与您的网站进行交谈以使您最喜欢的网站成为背景。 您的回答您的网站可能是人工智能，但是您无需走那么远就能与您的网站对话。 该工具在您的浏览器中处于休眠状态，您甚至不知道。 我们正在谈论Google的Web Speech API。 在深入研究Google Web Speech API之前，让我们先看一下语音的一些基本要素。
言语基础
现在，说话很容易，甚至一个孩子都可以说话，但是语音识别并不是孩子的游戏。 我们的思想及其与大脑的关系比想象的要复杂得多。 因此，尽管计算机在某些方面表现出色，但在感知方面还远远不能与人脑相提并论。 语音不是在公园里散步，计算机需要大量帮助来听单词。
言语是一个需要研究的复杂现象。 随着我们的深入，它变得越来越陌生。 因此，语音不仅是各种各样的单词串在一起。 每次我们说话时，我们的话语都包含称为电话的声音包。 例如：当我们说“ MAT”一词时，我们说出电话“ m”，“ a”，“ t”。 但是，我们所说的声音的实际方式以及我们的思维方式是完全不同的。 当您在句子完成之前做出反应时，您还记得那些实例吗？ 您之所以这样做，是因为您的大脑无意识地感知到一些基本的声音块，这些元素称为音素。
除此之外，还必须考虑多种语言学要素。 例如，详细说明一种语言的语法结构和语义（单词的含义）以及它们如何产生句子整体含义的语法。
电脑如何聆听您的声音？
语音识别是一门跨学科的科学，它结合了语言学，信号处理，自然语言处理等诸多精妙的概念。 为了简单起见，我们需要考虑以下方法来理解计算机解释语音的方式：
1.模式匹配
您可能还记得加油站的计算机语音，要求您通过按移动键盘中的1或2来预订新的气瓶，以进行选择。 使用此技术可在计算机受过训练以区分十种声音模式的情况下完成此操作。 “一”，“零”，“十”等。 是在此模式匹配练习中检测到的声音。 计算机会将已经存储在内存中的声音块与其他动作进行匹配。 这就是为什么当您随便说零声时听到“对不起，我们没有得到您”的原因。
2.特征和模式分析
典型的语音识别工具可以构思大量的声音词汇。 您可能想知道它是如何做到的？ 当您向麦克风讲话时，A / D转换器（模拟/数字）会将振动转换为数字文本。 然后，频谱图使用称为FTT（快速傅立叶变换）的信号处理技术将数字数据绘制成图形。 然后，将波形分解成称为声学帧的重叠块-通过使用1/50秒或1/25秒的时间间隔来创建间隔。 在这里，语音被分解为可能的单词，然后与语音词典进行比较，从而查明说出的单词。
3.统计方法
每个人说出单词的方式都不同。 即使是同一个人，下一次发音相同的单词也会有所不同。 因此，必须从大型池中解密出必要元素的系统必须处理可变性问题。 现代语音识别工具利用语言模型来处理可变性问题。
诸如隐马尔可夫模型（HMV）之类的模型使用概率猜测，使用语法定律得出最可能出现的单词。 它通过扩展甚至捕获的最小声音来提高其准确性。 示例单词在英语中带有非常多的选择性单词，例如“ for”，“ bad”，“ good”等。 如果识别过程停在说“这是一个___示例”。 并且识别出类似“ g”的轻微声音，然后系统将空白词四舍五入表示“好”。
4.人工神经网络
它们是简化的人脑，能够通过示例进行学习。 因此，如果对ANN进行足够的样本训练，则可以将其与以前看到的模式相关联以得出正确的单词。 因此，训练有素的神经网络可以将语音识别提高到另一个水平。
这是修改网站的方法
我们将使用由W3C社区在2012年开发的Web Speech API。许多浏览器出于一个或另一个原因未使用它。 但是Chrome和Firefox将此功能集成到了浏览器中，这就是为什么您可以在Google上进行语音搜索的原因。
Web Speech API将成为我们的接口，该接口已经具有其他紧密联系的语音方面，例如语法，词汇等。
您的工具将类似于上面的工具。 您需要执行此代码。 下面的CSS代码为您的识别功能设计了颜色和显示功能。 这里只介绍一个简单的模型。 您可以通过更改CSS代码来表达自己的创造力。
<!-- CSS Styles --> <style> html, body { display: flex; align-items: center; justify-content: center; background-color: lightblue; } .record { position: relative; width: 246px; display: inline-block; } .record input { text-align:center; border: 0; width: 240px; display: inline-block; height: 30px; } .record img { float: right; width: 25px; height: 25px; border: none; position: absolute; right: 7px; top: 3px; } .container { display: inline-block; text-align: center; } h1 { font-family: constantia; } </style>
下一组代码将调用API为您进行实际的语音识别。 该集中包含必需的HTML和Java脚本。
<!DOCTYPE html> <html> <head> <title>Voice Recognition: Habr</title> </head> <body> <!-- Search Form --> <div class="container"> <h1>Voice Recognition in HTML</h1> <div class="record"> <form id="speak-form" method="get" action="https://www.google.com/search"> <input type="text" name="q" id="transcript" placeholder="Speak" /> <img onclick="startRecording()" src="http://icons.iconarchive.com/icons/designbolts/free-multimedia/1024/Studio-Mic-icon.png" /> </form> </div> </div> </body> </html> <!-- HTML5 Speech Recognition API --> <script> function startRecording() { if (window.hasOwnProperty('webkitSpeechRecognition')) { var recognition = new webkitSpeechRecognition(); recognition.continuous = false; recognition.interimResults = false; recognition.lang = "en-US"; recognition.start(); recognition.onresult = function(e) { document.getElementById('transcript').value = e.results[0][0].transcript; recognition.stop(); document.getElementById('speak-form').submit(); }; recognition.onerror = function(e) { recognition.stop(); } } } </script>
上述简单的工具可以为许多努力做到互动且独特的网站打开新的机会窗口。 Web开发应首先实现这种简单且可扩展的技术。 智能Web开发应该在
关键的Web设计秘诀和这种简单的集成工具之间找到适当的平衡。 Web API可以进一步用于移动应用程序开发中，以增强智能手机并使它们更智能。 因此，立即查看此功能，并与您的网站聊天愉快。