前端开发攻略---用原生JS在网页中也能实现语音识别

原创

已于 2024-04-25 22:06:19 修改 · 6.5k 阅读

35 ·

CC 4.0 BY-SA版权

文章标签：

#语音识别 #javascript

于 2024-04-25 15:13:31 首次发布

1、语音识别的过程

语音识别涉及三个过程：首先，需要设备的麦克风接收这段语音；其次，语音识别服务器会根据一系列语法 (基本上，语法是你希望在具体的应用中能够识别出来的词汇) 来检查这段语音；最后，当一个单词或者短语被成功识别后，结果会以文本字符串的形式返回 (结果可以有多个)，以及更多的行为可以设置被触发。

2、示例

示例代码：

您如果想直接尝试的话可以先复制下面代码运气起来试试效果。

操作方法：将代码运行在浏览器，点击屏幕，允许麦克风权限，然后出说其中一种颜色。

结果1：识别成功，但是没听清楚您说的什么，页面不会有任何变化。

结果2：识别成功，页面背景切换为您说的那种颜色。

结果3：识别失败，失败原因将在页面底部展示。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width" />
    <title></title>
    <style>
      body,
      html {
        margin: 0;
      }

      html {
        height: 100%;
      }

      body {
        height: inherit;
        overflow: hidden;
        max-width: 800px;
        margin: 0 auto;
      }

      h1,
      p {
        font-family: sans-serif;
        text-align: center;
        padding: 20px;
      }

      div {
        height: 100px;
        overflow: auto;
        position: absolute;
        bottom: 0px;
        right: 0;
        left: 0;
        background-color: rgba(255, 255, 255, 0.2);
      }

      ul {
        margin: 0;
      }

      .hints span {
        text-shadow: 0px 0px 6px rgba(255, 255, 255, 0.7);
      }
    </style>
  </head>
  <body>
    <h1>语音识别转换器</h1>
    <p class="hints"></p>
    <div>
      <p class="output"><em>识别进度展示处</em></p>
    </div>
  </body>