JS利用浏览器进行语言识别

<!DOCTYPE html>

<html>

<head>

  <meta charset="utf-8">

  <meta name="viewport" content="width=device-width,initial-scale=1.0">

  <title>test</title>

</head>

<body>

  <div id="result">测试显示</div>

  <button id="transcribe-now" onclick="startSpeechRecognition()">Start</button>

  <!-- built files will be auto injected -->

</body>

<script>

  var i=0;

  var recognition= window.webkitSpeechRecognition ? new webkitSpeechRecognition() : new SpeechRecognition();

   recognition.lang = "zh-CN";

   recognition.continuous = true;// 是否连续识别

   recognition.interimResults = false;// 是否返回临时结果

   recognition.addEventListener("result", function (e) {

        const re = document.getElementById("result");

        //re.innerHTML = e.results[0][0].transcript;

       // console.log(e.results[0][0].transcript);

		let result = ''

        for(let i = 0;i <= e.resultIndex; i++) {

             result += e.results[i][0].transcript;

           }

		console.log('' + i + '---' + e.results[e.resultIndex][0].transcript);

	    i++;

        re.innerHTML  = result

      });

      recognition.addEventListener("error", function (event) {

        console.error("语音识别失败",event.error);

      });

      recognition.addEventListener("end", function (e) {

       // window.transcriptionInProgress = null;

        console.log("结束了");

		recognition.start();//浏览器会弹出使用麦克风确认对话框，很烦

        btn.innerHTML = '<i class="fa fa-circle"></i>Start';

      });

      recognition.addEventListener("start", function (event) {

        console.log("开始");

      });

   function startSpeechRecognition() {

      let btn = document.getElementById("transcribe-now");

      //recognition = window.webkitSpeechRecognition ? new webkitSpeechRecognition() : new SpeechRecognition();

      recognition.start();

  }

</script>

</html>

　　

JS利用浏览器进行语言识别的更多相关文章

  1. js+Canvas 利用js 实现浏览器保存图片到本地

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. JS 获取浏览器窗口大小

    JS 获取浏览器窗口大小 <script> // 获取窗口宽度 if (windows.innerWidth) { winWidth = windows.innerWidth; } els ...

  3. JS 获取浏览器窗口大小clientWidth、offsetWidth、scrollWidth

    常用: JS 获取浏览器窗口大小   // 获取窗口宽度 if (windows.innerWidth) winWidth = windows.innerWidth; else if ((docume ...

  4. CommonsChunkPlugin并不是分离第三方库的好办法（DllPlugin科学利用浏览器缓存）

    webpack算是个磨人的小妖精了.之前一直站在glup阵营,使用browserify打包,发现webpack已经火到爆炸,深怕被社区遗落,赶紧拿起来把玩一下.本来只想玩一下的.尝试打包了以后,就想启 ...

  5. js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面

    js 利用 ajax 加载 js ,显示加载进度 ,严格按照js的顺序先后加载到页面 , 做手机端开发时,发现一个问题,有些浏览器,在网速比较慢的情况下,js文件没有加载完,后续的调用已经开始调用了, ...

  6. AngularJS进阶(十三)JS利用正则表达式校验手机号

    JS利用正则表达式校验手机号 注:请点击此处进行充电! 绪 由于项目需求,需要在前端实现手机号码的校验.当然了,对于基本的格式校验应该放在客户端进行,而不需要再将待校验的手机号发送至服务端,在服务端完 ...

  7. js判断浏览器类型和版本

    原网址:http://www.cnblogs.com/rubylouvre/archive/2009/10/14/1583362.html 除了另无它法,肯定不使用navigator.userAgen ...

  8. webpack分离第三方库(CommonsChunkPlugin并不是分离第三方库的好办法DllPlugin科学利用浏览器缓存）

    webpack算是个磨人的小妖精了.之前一直站在glup阵营,使用browserify打包,发现webpack已经火到爆炸,深怕被社区遗落,赶紧拿起来把玩一下.本来只想玩一下的.尝试打包了以后,就想启 ...

  9. [JavaScript]JS屏蔽浏览器右键菜单/粘贴/复制/剪切/选中 [转载]

    前两天在解决一个项目缺陷时,突发感兴趣,了解一下~ 1 JS事件 document.oncontextmenu // 右键菜单 document.onpaste //粘贴 document.oncop ...

  10. 【转】javascript浏览器参数的操作，js获取浏览器参数

    原文地址:http://www.haorooms.com/post/js_url_canshu html5修改浏览器地址:http://www.cnblogs.com/JiangXiaoTian/ar ...

随机推荐

  1. antdesign vue 步骤条a-step按审核人员节点排序显示逻辑

    一.需求内容 目前审核人员角色有:学术.法务.售后,串行执行审核流程. 审核流程:发起/修改审核->审核节点 审核节点规则:学术->法务->售后,每个节点均可以审核或修改. 审核状态 ...

  2. Problem K. Master of Sequence（二分）

    Problem K. Master of Sequence(二分) 补补题,人太菜了,一个题解看了两个小时才看明白(当然也可能是比赛的时候这个题完全不知道怎么下手qwq) 题目链接:http://ac ...

  3. Python自带difflib模块

    官方文档:https://docs.python.org/3/library/difflib.html difflib模块的作用是比对文本之间的差异,且支持输出可读性比较强的HTML文档,与Linux ...

  4. SaaS平台的组织数据模型设计

    大家好,我是汤师爷~ 想要深入理解零售企业的组织架构并不容易.大多数人并没有实际经营过零售企业,更不曾参与设计其组织架构. 在调研商家的过程中,我们通常只能了解他们组织架构的现状,却难以直接与企业高层 ...

  5. 用“tar | split ”将文件分包压缩

    1.一次打包: tar cjf - directory/ | split -b 100m -d -a 1 - filename.tar.bz2. (directory/):待压缩的目录名. (spli ...

  6. Android Hybird架构之整合XwalkView，让你的App内置chromium内核

    使用XwalkView的目的无非是为了提升Android4.4以下版本(非chromium内核)的Html5渲染性能,并且能够使得H5页面在众多定制化的ROM上拥有一致的体验. 当然了,App内置Ch ...

  7. 配置NVIDIA Container Runtime和容器运行GPUStack教程

    GPUStack 是一个设计用于运行大模型的开源 GPU 集群管理器,提供私有部署的大模型服务,支持大语言模型.Embedding 文本嵌入模型.Reranker 重排序模型.Vision 多模态模型 ...

  8. 浅析REGEXP_SUBSTR,PRIOR,CONNECT BY

    业务场景 teacher表中的tech_class字段存储的是每个老师所教授的课程,课程之间以英文逗号分隔.现在要用语句统计每个课程对应的教师数量.语句及效果如下: 语句其实很简单,各种博客或者gpt ...

  9. 初见memcached

    一. 概念 Memcached是danga.com(运营LiveJournal的技术团队)开发的一套分布式内存对象缓存系统,用于在动态系统中减少数据库负载,提升性能. 二. 适用场合 1. 分布式应用 ...

  10. PTA 那就别担心了

    PTA 那就别担心了 给定一个有向无环图,给出起点\(st\)和终点\(ed\),问从起点出发的所有路径是否都能到达终点,并且让你求出从起点到终点的不同路径数量 \(DFS\)记忆化搜索 对于第一个问 ...