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. gym中的discrete类、box类和multidiscrete类简介和使用

    相关文章: Box() dict()可用于创建连续的空间:OpenAI Gym Discrete和Box spaces同时存在,代码该怎么写:gym中各种离散连续写法 解读gym中的action_sp ...

  2. 4.7 C++ Boost 多线程并发库

    Boost 库是一个由C/C++语言的开发者创建并更新维护的开源类库,其提供了许多功能强大的程序库和工具,用于开发高质量.可移植.高效的C应用程序.Boost库可以作为标准C库的后备,通常被称为准标准 ...

  3. 音乐播放器 — 用 vant4 中的滑块自定义播放器进度条

    一.运行效果 二.代码实现 2.1.HTML: <!-- 音频播放器 --> <audio ref="audio" src="音乐名称.mp3" ...

  4. Java锁到底是个什么东西

    一.java锁存在的必要性 要认识java锁,就必须对2个前置概念有一个深刻的理解:多线程和共享资源. 对于程序来说,数据就是资源. 在单个线程操作数据时,或快或慢不存在什么问题,一个人你爱干什么干什 ...

  5. 详解 & 0xff 的意义及作用

    首先我们要都知道, &表示按位与,只有两个位同时为1,才能得到1, 0x代表16进制数,0xff表示的数二进制1111 1111 占一个字节.和其进行&操作的数,最低8位,不会发生变化 ...

  6. ehlib组件包当中TDBLookupComboboxEh的小结

    TDBLookupComboboxEh和TDBGridEh一样强大无比,可以做出Combobox下拉出Grid的效果.下面是一些重要属性的小结(可怜费了我半天功夫,文档太少了.......)(1)Li ...

  7. 《ASP.NET Core 与 RESTful API 开发实战》-- （第9章）-- 读书笔记（上）

    第 9 章 测试和文档 9.1 测试 测试是软件生命周期中的一个非常重要的阶段,对于保证软件的可靠性具有极其重要的意义 常见的测试方法有很多,根据不同的维度,可以把测试方法分为不同的类别 从观察结构的 ...

  8. SpringMVC关于@RequestBody加与不加的区别

    SpringMVC关于@RequestBody加与不加的区别 前两天在做项目的时候遇到了这样一个问题,小组成员为了方便做接口测试,给Controller控制器上加了@RequestBody注解,但是前 ...

  9. Pandas练习

    背景介绍 本数据集包括了2015年至2017年我国36个主要一线城市.特区的一些年度数据,包括产值.人口.就业.教育.医疗.经济贸易.房地产投资等方面. 包含文件: 2015年国内主要城市年度数据.c ...

  10. 2023牛客暑期多校训练营6 ABCEG

    比赛链接 A 题解 方法一 知识点:并查集,树形dp,背包dp. 因为需要路径中的最大值,因此考虑按边权从小到大加入图中,保证通过这条边产生贡献的点对已经全部出现. 在加边的同时进行树上背包,答案存在 ...