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. 5.13 汇编语言：仿写For循环语句

    循环语句(for)是计算机编程中的一种基本控制结构,它允许程序按照指定的次数或范围重复执行一段代码块.for循环在处理需要进行迭代操作的情况下非常有用,它使得程序可以更加方便地控制循环的次数.一般来说 ...

  2. DAPR-分布式系统运行时简介

    Dapr全称Distributed Application Runtime,翻译过来就是分布式应用程序运行时,在v1.0发布后得到了极大的发展.本章将向你介绍Dapr架构的核心概念,为您使用Dapr进 ...

  3. “I/O多路复用”和“异步I/O”的前世今生

    曾经的VIP服务在网络的初期,网民很少,服务器完全无压力,那时的技术也没有现在先进,通常用一个线程来全程跟踪处理一个请求.因为这样最简单.其实代码实现大家都知道,就是服务器上有个ServerSocke ...

  4. Win12不会取代Win11！真正目标是Google

    Windows 11之后自然应该是Windows 12,但这一次不太一样. 据多个消息源确认,Windows的下一个重大版本将不会是Windows 11的直接升级版,而是更专注于云和Web,同时大力接 ...

  5. P4093 [HEOI2016/TJOI2016] 序列 题解

    题目链接:序列 对于 LIS 问题,很显而易见的有 dp方程为: \[dp_i=\max{dp_j}+1 \ (j<i,a_j \le a_i) \text{ dp表示以某个位置结尾的最长 LI ...

  6. require 与 import

    common.js 模块化规范   app.js 文件: // require 在代码执行阶段才会调用引入文件,编译(预解析)时不会执行,所以下面会报错 // console.log(dep); Re ...

  7. ASP.NET Core分布式项目实战（第三方ClientCredential模式调用）--学习笔记

    任务10:第三方ClientCredential模式调用 创建一个控制台程序 dotnet new console --name ThirdPartyDemo 添加 Nuget 包:IdentityM ...

  8. Java方法重载浅谈

    Java方法重载浅谈 目录: 方法重载的定义 方法重载的满足条件 方法重载的传递 基本类型 引入类型 方法重载的好处 方法重载的定义以及满足条件: 定义: 方法重载指同一类中定义多个方法之间的联系: ...

  9. SP28304 ADATEAMS - Ada and Teams 题解

    题目传送门 前置知识 乘法逆元 | 排列组合 解法 简单的排列组合.从 \(n\) 个学校中选出 \(a\) 个学校,共有 \(\dbinom{n}{a}\) 种不同的方案数.选出的 \(a\) 个学 ...

  10. C语言，函数形参与实参个数不一致问题

    ​ 最近阅读工程代码的时候,同一个函数,不同场景调用时,输入的实参个数不一样,但是编译却没有问题.查看函数的定义,相关的C文件里并没有给形参指定默认值,这就很奇怪了. ​ 最终,发现在函数相关的头文件 ...