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. 【原创】dell戴尔笔记本充电头4530改装typeC口过程记录笔记本电源改装c口三路接线定义指南（图解）

    在淘宝淘一个备用笔记本电脑,要求便携能用,最重要便宜(如果不便宜买了就想高价卖了) 选择了xps13 L322x,键盘屏幕有瑕疵,打折下来价格170左右,换了个键盘20.整体重量1.3kg左右,大小A ...

  2. 【FAQ】HarmonyOS SDK 闭源开放能力 —Push Kit（4）

    1.问题描述: 目前华为推送API使用的是v2或者v1版本,请问目前最新的鸿蒙next使用v3版本是否兼容v2或者v1,反过来将v2或者v1的api可以推送鸿蒙next的设备吗? 解决方案: v3接口 ...

  3. php如何解决高并发

    PHP交流群  656679284  为PHP广大爱好者提供技术交流,有问必答,相互学习相互进步! 1.应用和静态资源分离 将静态资源(js,css,图片等)放到专门的服务器中. 2.页面缓存 将应用 ...

  4. 计算机网络常见面试题（一）：TCP/IP五层模型、TCP三次握手、四次挥手，TCP传输可靠性保障、ARQ协议

    文章目录 一.TCP/IP五层模型(重要) 二.应用层常见的协议 三.TCP与UDP 3.1 TCP.UDP的区别(重要) 3.2 运行于TCP.UDP上的协议 3.3 TCP的三次握手.四次挥手 3 ...

  5. ChatGPT：编程的 “蜜糖” 还是 “砒霜”？告别依赖，拥抱自主编程的秘籍在此！

    在当今编程界,ChatGPT 就像一颗耀眼却又颇具争议的新星,它对编程有着不可忽视的影响.但这影响就像一把双刃剑,使用不当,就可能让我们在编程之路上"受伤". 一.过度依赖 Cha ...

  6. gearman实现任务分发

    偶然发现了这个gearman,觉得这玩意儿挺好用,非常适合PHP运行一部分业务. 话不多说,安装一下. 使用apt查找 sudo apt search gearman 找到了这个 gearman/bi ...

  7. 卸载php8后导致php7.4不能被apache解析了

    今天突然发现web页面不能解析了,直接返回php代码了,想起来可能是由于不小心更新过apt 源,有一次安装了php8,后来又卸载,导致的,查了一下,发现是libapache2-mod-php没安装. ...

  8. PasteEx：一款.NET开源的Windows快捷粘贴神器

    前言 PasteEx是一款.NET开源的用于增强 Windows 粘贴功能的小工具,它解决了将剪贴板内容保存为文件的繁琐步骤.无需打开记事本等应用,它可直接将文字.图片等内容粘贴到桌面上,极大提升了效 ...

  9. Mac下常用软件汇总(精)

    1.连接Windows远程连接工具(Microsoft-Remote-Desktop-For-Mac ) 2.SSH管理工具:Royal TSX 下载地址:Royal Apps Royal TSX 是 ...

  10. C#生成二维码的两种方式（快看二维码）

    前言 最近在做项目的时候遇到一个需求是将文本内容生成二维码图片的,对于这个需求那就直接上手(两种方法,我比较喜欢第二种方式,往上面也是有很多的方法.这里只作为个人纪录) 方法一:ThoughtWork ...