Edge 语音识别 生成文字 显示在input new webkitSpeechRecognition()

代码

<html>

<head>

    <style>

        body {

            background-color: #008000;

        }

        .textClass {

            color: white;

            background-color: #008000;

            font-size: 29px;

            border: 1 solid white;

            width: 400px;

            outline: 0;

            padding: 20px;

        }

    </style>

</head>

<body>

    <textarea class="textClass" id="textRef" rows="8"></textarea>

    <script>

        const reco = new webkitSpeechRecognition()

        console.info('reco', reco)

        reco.continuous = true // 持续识别

        reco.interimResults = true // 中间结果可用

        reco.lang = 'zh-CN' // 普通画

        reco.addEventListener('result', event => {

            // console.info(event.results)

            const resArr = event.results

            console.info('resArr.length', resArr.length)

            // console.info('resArr', resArr, resArr.length)

            // for(let i = 0; i < resArr.length; i++) {

            //     const item = resArr[i][0].transcript

            //     console.info('item', item)

            // }

            const textRef = document.getElementById('textRef')

            if (resArr.length > 0) {

                textRef.value = resArr[resArr.length - 1][0].transcript

            } else {

                textRef.value = ''

            }

            // resArr.map(item => {

            //     console.info('item', item)

            //     // console.info(item.transcript)

            // });

        })

        reco.addEventListener('onerror', event => {

            console.info('onerror event', event)

            reco.start()

        })

        reco.start()

    // reco.stop()

    // console.info('reco', reco)

    </script>

</body>

</html>

Edge 语音识别 生成文字 显示在input new webkitSpeechRecognition()的更多相关文章

  1. j-query应用---鼠标悬停不同文字显示不同背景图片banner动画

    源代码部分:注意事项:样式表的引用的路径要一致. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ...

  2. Java在已存在的pdf文件中生成文字和图片--基础

    自我总结,有什么不足之处请告知,感激不尽!下一次总结pdf模板映射生成报表(应对多变的pdf报表需求,数据提供和报表生成解耦). 目的:在给定的pdf模板上生成报表,就需要知道最基本的操作:文字添加, ...

  3. PHP生成小程序二维码合成图片生成文字

    这部分代码是写在项目上的代码,THINKPHP3.1如果迁移到其他的地方应该要稍稍改动一下以适合自己的项目 function get_bbox($text,$fsize,$ffile){ return ...

  4. php生成文字图片效果

    php生成文字图片效果最近看到php的GD功能,试着做了一个基本生成文字图片效果的代码: 显示文字图片页面:demo.php<?php$str = $_REQUEST['str'] ? $_RE ...

  5. python 在线生成文字云

    在线生成文字云 在线生成文字云地址  http://a.leechg.com:8080/wordcloud 效果图 大体步骤 1 接收请求中的文本,通过结巴分词处理文本. seg_generator ...

  6. 2016/04/13 ①html 中各种分割线------------------------------------------ ② 控制文字显示

    ①各种分割线Html代码 1.<HR> 2.<HR align=center width=300 color=#987cb9 SIZE=1>align 线条位置(可选left. ...

  7. php 两段文本对比，不同的文字显示高亮

    php 两段文本对比,不同的文字显示高亮[下面这个只能区分错误后面的..]   <?php $str1 ="MIIEvQIBADANBgkqhkiG9w0BAQEFAASCBKcwgg ...

  8. Nginx执行php显示no input file specified的处理方法

    /var/www/nginx-default中放上一份phpinfo.php,使用http://localhost/phpinfo.info 访问,结果报错,显示 “No input file spe ...

  9. 完美解决 向UILable 文字最后插入N张图片,支持向限制行数的UILable 最后一行插入,多余文字显示...

    效果: ====直接上代码吧=== // // UILabel+StringFrame.h // QYER // // Created by qyer on 15/3/19. // Copyright ...

  10. Android--TextView 文字显示和修改

    一. 新建一个Activity 和 Layout 首先在layout文件夹中新建一个activity_main.xml,在新建工程的时候一般默认会新建此xml文件,修改其代码如下: <Relat ...

随机推荐

  1. 8.1 TEB与PEB概述

    在开始使用TEB/PEB获取进程或线程ID之前,我想有必要解释一下这两个名词,PEB指的是进程环境块(Process Environment Block),用于存储进程状态信息和进程所需的各种数据.每 ...

  2. django批量插入，遇到错误改为逐条插入

    为了提升插入数据的效率,通常采用批量插入的方式,当一批数据中有错误数据时,该批次数据报错,都插入失败.如何跳过引起报错的数据,将其他正确的数据插入,实现方式如下代码. data_to_insert = ...

  3. Socket.D 协议的开发缘由

    为什么搞个新协议? 2021年时,想为 Solon 生态 提供一种 MVC 体验的 Socket 和 WebSocket 开发方式.这个想法,要求消息"能路由"."有元信 ...

  4. 如何修改11g RAC集群名称

    背景:有一套11.2.0.4 RAC集群的环境,为了测试DG,直接复制了一套一模一样的环境,修改过IP之后,依然有问题,无法同时启动. 初步判断是因为在同一子网存在两个同名的集群(都是jystdrac ...

  5. Windows10系统下JDK1.8的下载安装及环境变量配置

    1. JDK1.8安装 2. 环境变量配置点击此处:官网下载 根据自己的系统 ,下载相应的JDK版本. 1. JDK1.8安装双击下载的安装包(.exe文件),进行安装. 点击"下一步&qu ...

  6. frmClientDm.ItemInLogShowAdq.Delete 报【BOF 或 EOF 中有一个是“真”，或者当前的记录已被删除，所需的操作要求一个当前的记录。】

    当Adoquery 中只有一条数据库的时候,这个时候删除 就会报 :BOF 或 EOF 中有一个是"真",或者当前的记录已被删除,所需的操作要求一个当前的记录.这个错误 导致这个错 ...

  7. CF1348

    传送门 A: 一个组 \(2^n+2^1+\dots+2^{\frac{n}{2}-1}\),另一个组剩下的. B: 考虑不停循环. 如果不同的数字超过 \(k\),无解. 否则先把原序列去重,然后把 ...

  8. 如何用低代码实现批量导出PDF？

    前言 事情是这样的,熟悉我们的朋友都知道,我司有一个为广大开发者朋友们提供学习帮助的地方,叫做新手训练营,具体的内容就是会针对初次接触葡萄城产品和技术的用户,通过 2-3 天的集中学习,采用直播授课的 ...

  9. NC13230 合并回文子串

    题目链接 题目 题目描述 输入两个字符串A和B,合并成一个串C,属于A和B的字符在C中顺序保持不变.如"abc"和"xyz"可以被组合成"axbycz ...

  10. IPFS Gateway Selector IPFS下载网关选择工具

    简介 用IPFS作文件分享可以覆盖很多场景, 现在IPFS网关也相当多了, 但是因为国内网络的状况, 不同网关在不同网络运营商的表现差别很大, 导致你提供的下载链接在对方那里可能速度很慢, 甚至无法访 ...