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. 使用VSCode进行WSL2的本机调试

    首先我们需要安装Remote Development插件(这个Remote-WSL一定要保证是装上的哦). 然后我们先连接到WSL. (第一次进入远程模式,会慢一些,需要下载一些组件) (如果你打开这 ...

  2. Sealos 基础教程：Sealos Devbox 的架构原理解析

    今天这篇文章咱们来聊一聊 Sealos Devbox 到底是怎么设计的,据说隔壁老奶奶最喜欢看这种有技术深度的文章了. Devbox 返璞归真,把开发者的开发精力放到开发中去,真正做到了摈弃复杂的 C ...

  3. 如何查找Windows 11中的共享文件夹

    windows11的控制面板: Windows工具: 计算机管理: 共享文件夹:

  4. 在 Github Action 管道内集成 Code Coverage Report

    Github Actions 我们的开源项目 Host 在 Github,并且使用它强大的 Actions 功能在做 CICD.单看 Github Actions 可能不知道是啥.其实它就是我们常说的 ...

  5. Air780E软件指南：zlib解压示例

    一.ZLIB解压工具简介 Zlib解压工具是一个广泛使用的压缩和解压缩库,主要用于处理数据的压缩和解压缩任务.Zlib使用的是DEFLATE算法,这是一种通用的压缩算法.它被应用在很多场景中,比如压缩 ...

  6. Think in Java之构造器的真正调用顺序

    构造器是OOP的重要组成部分,很多人认为它很容易.只不过是new了一个对象而已.而think in java的作者却告诉我们,其实这并不容易.先看下面这个例子.在你没看结果之前,你觉得你的答案是对的么 ...

  7. MySQL之sql_mode

    sql_mode是个很容易被忽视的变量,默认值是空值,在这种设置下是可以允许一些非法操作的,比如允许一些非法数据的插入.在生产环境必须将这个值设置为严格模式,所以开发.测试环境的数据库也必须要设置,这 ...

  8. OSG开发笔记（三十六）：osg3.4.0基于windows平台msvc2017x64编译器编译并移植Demo

    前言   本篇编译osg3.4.0的msvc2017x64版本,之前使用的都是mingw32版本.   OSG编译 步骤一:下载解压   下载3.4.0版本.   步骤二:使用cmake配置      ...

  9. S2P医药营销智能管理平台特点和优势

    S2P医药营销智能管理平台是正也科技打造的一个专为医药行业设计的综合性营销解决方案,旨在通过智能化.数据驱动的方式提升医药企业的营销效率和效果.以下是关于S2P医药营销智能管理平台的一些主要特点和优势 ...

  10. PictureMarkerSymbol透明的问题

    由于我使用的是位图图片,所以不可能将图片背景处理成透明.不过还是可以通过参数的设定来达到这种效果. PictureMarkerSymbol pPMS = new PictureMarkerSymbol ...