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. 适合才最美：Shiro安全框架使用心得

    大家好,我是 V 哥.Apache Shiro 是一个强大且灵活的 Java 安全框架,专注于提供认证.授权.会话管理和加密功能.它常用于保护 Java 应用的访问控制,特别是在 Web 应用中.相比 ...

  2. Verilog代码规范

    历史修改信息 版本 更改描述 更改人 批准人 修订日期/生效日期 A01 发布首版 ldy 一.目的 作为我司verilog开发过程中的输入文件,用于统一FPGA开发人员的代码风格.从而在满足功能和性 ...

  3. ARC143D Bridges

    ARC143D Bridges 巧妙的图论题. 思路 分析题目,发现很像拆点. 由于拆点要设置出入点,这里我们也把 \(a_i\) 设成入点,把 \(a_i+n\) 设成出点,再次分析问题. 考虑我们 ...

  4. Python:pygame游戏编程之旅四（游戏界面文字处理）

    本节讲解游戏界面中字体的处理,以在界面中实时显示当前时间.小球位置为例进行实验,具体见代码. 一.代码 # -*- coding:utf-8 -*- import os import sys impo ...

  5. 八、FreeRTOS学习笔记-临界段代码保护及调度器挂起与恢复

    临界段代码保护 什么是临界段:临界段代码也叫做临界区,是指那些必须完整运行,不能被打断的代码段 适用场合如: 问题:什么可以打断当前程序的运行? 1.临界段代码保护函数介绍 FreeRTOS 在进入临 ...

  6. Linux常用系统性能监控工具

    top 首先关于top命令,我想大家应该都挺熟悉的了. Linux系统下的top命令有点类似于Windows系统里的任务管理器,能够实时动态地给出系统中各个进程的资源占用状况,是Linux下比较常用的 ...

  7. vue 的provide 和 inject

    1.功能说明 在开发过程中,在子组件中如何获取父组件或者祖父级的数据.这个我们之前的做法是在子组件中找到父组件实例,然后使用父组件的数据.这样其实不是很自然. 在vue 中提供了 provide 和 ...

  8. JavaScript 绑定this

    1.临时改变函数调用时this的指向 方法:call()与apply(),第一个参数为此次调用时的this指向,如果不传,则则等同于指定全局对象,后面的参数为函数原本的参数 区别:apply()方法传 ...

  9. 渗透测试-前端加密之AES加密下的SQL注入

    本文是高级前端加解密与验签实战的第4篇文章,本系列文章实验靶场为Yakit里自带的Vulinbox靶场,本文讲述的是绕过前端AES加密进行SQL注入. CryptoJS.AES-被前端加密的SQL注入 ...

  10. R机器学习：特征工程与特征选择的介绍

    两个月没更新了,没有其它理由,就是懒惰,间接持续性的懒惰,一直持续了2个月,简直懒惰!!!大家的好多的私信也没回就过期回不了了.请大家批评我!!!. 看了很多高深的算法之后,实在是看不太明白,所以今天 ...