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. 【1】VScode 中文界面方法-------超简单教程

    相关文章: [一]tensorflow安装.常用python镜像源.tensorflow 深度学习强化学习教学 [二]tensorflow调试报错.tensorflow 深度学习强化学习教学 [三]t ...

  2. 遥感图像处理笔记之【Deep learning for Geospatial data applications — Multi-label Classification】

    遥感图像处理学习(2) 前言 遥感图像处理方向的学习者可以参考或者复刻 本文初编辑于2023年12月14日 2024年1月24日搬运至本人博客园平台 文章标题:Deep learning for Ge ...

  3. 物色到的 c# 模拟 http post get 请求 做下笔记

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.N ...

  4. 深入操作系统内核！细致剖析 MIT 6.S081 课程 Lab 2 : system calls - 1

    本文细致的剖析了2021 FALL MIT 6.S081 课程的一项实验, Lab 链接 Lab: System calls (mit.edu) . 大家的点赞将会是我继续更新的巨大动力,对文中内容或 ...

  5. 面试官：什么是JIT、逃逸分析、锁消除、栈上分配和标量替换？

    JIT.逃逸分析.锁消除.栈上分配和标量替换等都属于 JVM 的优化手段,JVM 优化手段是指在运行 Java 程序时,通过对字节码的编译和执行过程进行优化,以提升程序的性能和效率. JVM 优化手段 ...

  6. PHP 编程技巧与优化

    PHP 编程技巧与优化 1. 尽量采用大量的PHP内置函数. 2. 使用echo代替print,并且使用echo的多重参数(译注:指用逗号而不是句点)代替字符串连接 3. 用单引号代替双引号来包含字符 ...

  7. 【LLM】提示工程技术提炼精华分享

    一.提示工程概述 提示工程(Prompt Engineering)是一门较新的学科,关注提示词开发和优化,帮助用户将大语言模型(Large Language Model, LLM)用于各场景和研究领域 ...

  8. 聚石塔的K8s 容器服务使用注意事项，坑的总结

    1. 首先聚石塔是不能使用 8080 端口的,会审核不通过. 2.然而,容器服务默认的却是8080,最彻底的解决方法就是修改成80,注意3个地方: 以上3个地方要严重留意,缺一不可,已经踩了2次坑了, ...

  9. 移位寄存器的设计（VHDL）及testbench的编写

    移位寄存器是一种常用的存储元件,此处由D触发器构成,如下图所示. 当时钟边沿到来时,存储在移位寄存器的数据朝一个方向移动一个BIT位. 移位寄存器的功能主要为:串并转换,并串转换和同步延迟. vhdl ...

  10. JS Leetcode 374. 猜数字大小 题解分析

    壹 ❀ 引 本题来自LeetCode 374. 猜数字大小,题目难度简单,与昨天的题目一样,也是一道标准二分法的题目,不知道是不是端午节的缘故,这两天的题目都比较简单,题目描述如下: 猜数字游戏的规则 ...