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. 【3】Pycharm超详细基础设置，autopep8 安装规范化程序，每个小trick都可以快速提升变成效率，超级实用！

    相关文章: [1]Pycharm 主题设置推荐Material Theme UI以及编辑环境配置(字体大小和颜色) [2]Pycharm插件推荐,超级实用!每个小trick都可以快速提升变成效率! [ ...

  2. 同时配置github和gitee秘钥

    1.设置用户名和邮箱 git config --global --list 查看全局配置信息 git config --global --list 删除配置:必须删除该设置 git config -- ...

  3. iOS视频播放常用重点知识

    iOS视频播放常见的重要知识点如下: 视频格式:iOS支持的视频格式主要有H.264.MPEG-4.H.263.Sorenson等.它们根据不同的应用场景进行使用. 视频编解码:视频编解码技术是视频播 ...

  4. 从CPU100%高危故障到稳定在10%：一个月的优化之旅，成功上线！

    引言 经过三个月的开发,项目通过了所有测试并上线,然而,我们发现项目的首页几乎无法打开,后台一直发生超时错误,导致CPU过度负荷.在这次项目开发过程中,我制定了一份详细的技术优化方案.考虑到客户无法提 ...

  5. 对未来的自己的一个提醒。关于打表答题的思路，洛谷P5731

    P5731 [深基5.习6]蛇形方阵 - 洛谷 | 计算机科学教育新生态 (luogu.com.cn) 这道题就是纯纯找规律的模拟题,但是在比赛或者思维比较松散的情况下紧张的时候会想不出模拟思路 这时 ...

  6. HASHTEAM香山杯2023WP

    目录 前言 misc 签到题 web PHP_unserialize_pro Re URL从哪儿来 hello python pwn Move pwthon 附上c-python调试方法 crypto ...

  7. NC19782 Tree

    题目链接 题目 题目描述 修修去年种下了一棵树,现在它已经有n个结点了. 修修非常擅长数数,他很快就数出了包含每个点的连通点集的数量. 澜澜也想知道答案,但他不会数数,于是他把问题交给了你. 输入描述 ...

  8. MQTT-QoS与协议流程

    QoS的报文收发流程 QoS 0 最多交付一次,消息有可能丢失,最低的QoS等级,没有任何的机制,不需要等待确认和重传,只要保证消息发送,也可能到达不了接收端 QoS0消息发送流程: 发送端调用API ...

  9. SSD 简介—— NAND 芯片介绍

    制作 存储芯片的制作和其他芯片制作大致相同,从沙子中提取单晶硅制作晶圆再封装芯片. 闪存芯片从架构上分为NOR和NAND NOR Flash的source line把每个cell都并联起来,而NAND ...

  10. Linux 中hdparm命令参数说明

    hdparm命令提供了一个命令行的接口用于读取和设置IDE或SCSI硬盘参数. 语法 hdparm(选项)(参数) 选项 -a:设定读取文件时,预先存入块区的分区数,若不加上选项,则显示目前的设定: ...