Day20

来源：互联网发布：互联网金融平台源码编辑：程序博客网时间：2024/06/06 03:54

Day20 - 语言识别系统中文指南

本文出自：春哥个人博客
作者：©黎跃春-追时间的人
简介：JavaScript30 是 Wes Bos 推出的一个 30 天挑战。项目免费提供了 30 个视频教程、30 个挑战的起始文档和 30 个挑战解决方案源代码。目的是帮助人们用纯 JavaScript 来写东西，不借助框架和库，也不使用编译器和引用。现在你看到的是这系列指南的第 20 篇。完整中文版指南及视频教程在从零到壹全栈部落。

运行项目

$ npm install$ npm start

浏览器打开http://localhost:3000/index-FINISHED.html

效果图如下：

程序源码

HTML代码

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Speech Detection</title></head><body>  <div class="words" contenteditable>  </div>  <style>    html {      font-size: 10px;    }    body {      background: #ffc600;      font-family: 'helvetica neue';      font-weight: 200;      font-size: 20px;    }    .words {      max-width: 500px;      margin: 50px auto;      background: white;      border-radius: 5px;      box-shadow: 10px 10px 0 rgba(0, 0, 0, 0.1);      padding: 1rem 2rem 1rem 5rem;      background: -webkit-gradient(linear, 0 0, 0 100%, from(#d9eaf3), color-stop(4%, #fff)) 0 4px;      background-size: 100% 3rem;      position: relative;      line-height: 3rem;    }    p {      margin: 0 0 3rem;    }    .words:before {      content: '';      position: absolute;      width: 4px;      top: 0;      left: 30px;      bottom: 0;      border: 1px solid;      border-color: transparent #efe4e4;    }  </style></body></html>

JS代码

  <script>    // 根据浏览器之间的兼容性，需要同时添加浏览器前缀    window.SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;    // 实例化SpeechRecognition对象    const recognition = new SpeechRecognition();    // interimResults 属性的默认值是 false ，代表语音识别器的返回值不会改变。在这个演示中，我们把它设置为 true ，这样随着我们的输入，识别结果有可能会改变。仔细观看演示，灰色的文字是临时性的，有时会改变，而黑色文本是最终结果，不会改变。    recognition.interimResults = true;    // 创建p便签，附加到DOM树中    let p = document.createElement('p');    const words = document.querySelector('.words');    words.appendChild(p);    // 监听recognition的result事件，获取到语音输入的文字    recognition.addEventListener('result', (e) => {      const results = Array.from(e.results) // e.results中保存的是识别的结果，本来并不是数组，需要将其转换为数组，方便使用其map、join等方法。        .map(result => result[0])        .map(result => result.transcript) // 获取到每一段话，是一个数组类型        .join(''); // 将每一段话连接成字符串      // 可以动态的将其中的某一个词语换掉      const poopScript = results.replace(/good/gi, '��');      p.textContent = poopScript;      // 如果当前一段输入结束了，也就是有停顿，就会新建一个p便签      if (e.results[0].isFinal) {        p = document.createElement('p');        words.appendChild(p);      }    });    // 监听recognition的end事件，当前输入结束后，再次开始，使其一直处于输入状态    recognition.addEventListener('end', recognition.start);    // 开启recognition    recognition.start();  </script>

JS实现思路

新建一个语音识别的对象
开启该语音识别对象的识别服务
监听result事件，实时获取语音输入内容
监听end事件，当结束时再次开启语音识别，使其持续监听

JS源码解析

SpeechRecognition参考文档
其中监听result事件，根据事件返回值获取到语音输入的内容

可以看到transcript中保存的是语音输入的内容。其中可以看到还有一个属性为confidence，代表这段话是别的精度，越大正确率越高。

-SpeechRecognition属性

<!--新建语音识别的对象-->var recognition = new SpeechRecognition();<!--continuous默认值为false，当continuous值为true时，表示，一句话结束后，语音识别继续识别-->recognition.continuous = false;<!--设置按照什么语言来识别-->recognition.lang = 'en-US';<!--interimResults 属性的默认值是 false ，代表语音识别器的返回值不会改变。在这个演示中，我们把它设置为 true ，这样随着我们的输入，识别结果有可能会改变。仔细观看演示，灰色的文字是临时性的，有时会改变，而黑色文本是最终结果，不会改变。-->recognition.interimResults = false;...

第20天的内容就到这里，主要学习SpeechRecognition相关属性的使用。

源码下载

Github Source Code

全栈部落区块链部落

阅读全文

0 0