近期看了一个语音识别的dome-----Web Speech API

本api为js调用云端接口识别

个人测试了一下，响应速度还是比较快的

注意：本API与官网需翻墙使用和访问

展示效果：

页面代码如下：

<!DOCTYPE html>
<meta charset="utf-8">
<title>Web Speech API Demo</title>
<style>* {font-family: Verdana, Arial, sans-serif;}a:link {color:#000;text-decoration: none;}a:visited {color:#000;}a:hover {color:#33F;}.button {background: -webkit-linear-gradient(top,#008dfd 0,#0370ea 100%);border: 1px solid #076bd2;border-radius: 3px;color: #fff;display: none;font-size: 13px;font-weight: bold;line-height: 1.3;padding: 8px 25px;text-align: center;text-shadow: 1px 1px 1px #076bd2;letter-spacing: normal;}.center {padding: 10px;text-align: center;}.final {color: black;padding-right: 3px; }.interim {color: gray;}.info {font-size: 14px;text-align: center;color: #777;display: none;}.right {float: right;}.sidebyside {display: inline-block;width: 45%;min-height: 40px;text-align: left;vertical-align: top;}#headline {font-size: 40px;font-weight: 300;}#info {font-size: 20px;text-align: center;color: #777;visibility: hidden;}#results {font-size: 14px;font-weight: bold;border: 1px solid #ddd;padding: 15px;text-align: left;min-height: 150px;}#start_button {border: 0;background-color:transparent;padding: 0;}
</style>
<h1 class="center" id="headline"><a href="http://dvcs.w3.org/hg/speech-api/raw-file/tip/speechapi.html">Web Speech API</a> 语音识别</h1>
<div id="info"><p id="info_start">点击下话筒开始说话</p><p id="info_speak_now">正在讲话。。。</p><p id="info_no_speech">未检测到语音。您可能需要调整<a href="//support.google.com/chrome/bin/answer.py?hl=en&amp;answer=1407892">microphone settings</a>.</p><p id="info_no_microphone" style="display:none">找不到麦克风。确保安装了麦克风，<a href="//support.google.com/chrome/bin/answer.py?hl=en&amp;answer=1407892">microphone settings</a> 配置正确</p><p id="info_allow">单击上面的“允许”按钮启用麦克风。</p><p id="info_denied">拒绝使用麦克风。</p><p id="info_blocked">禁止使用麦克风。要改变，前往： chrome://settings/contentExceptions#media-stream</p><p id="info_upgrade">此浏览器不支持Web语音API。升级到 <a href="//www.google.com/chrome">Chrome</a>版本25或更高</p>
</div>
<div class="right"><button id="start_button" onclick="startButton(event)"><img id="start_img" src="mic.gif" alt="Start"></button>
</div>
<div id="results"><span id="final_span" class="final"></span><span id="interim_span" class="interim"></span><p>
</div>
<div class="center"><div class="sidebyside" style="text-align:right"><button id="copy_button" class="button" onclick="copyButton()">Copy and Paste</button><div id="copy_info" class="info">Press Control-C to copy text.<br>(Command-C on Mac.)</div></div><div class="sidebyside"><button id="email_button" class="button" onclick="emailButton()">Create Email</button><div id="email_info" class="info">Text sent to default email application.<br>(See chrome://settings/handlers to change.)</div></div><p><div id="div_language"><select id="select_language" onchange="updateCountry()"></select>&nbsp;&nbsp;<select id="select_dialect"></select></div>
</div>
<script>
var langs =
[['Afrikaans',       ['af-ZA']],['Bahasa Indonesia',['id-ID']],['Bahasa Melayu',   ['ms-MY']],['Català',          ['ca-ES']],['Čeština',         ['cs-CZ']],['Deutsch',         ['de-DE']],['English',         ['en-AU', 'Australia'],['en-CA', 'Canada'],['en-IN', 'India'],['en-NZ', 'New Zealand'],['en-ZA', 'South Africa'],['en-GB', 'United Kingdom'],['en-US', 'United States']],['Español',         ['es-AR', 'Argentina'],['es-BO', 'Bolivia'],['es-CL', 'Chile'],['es-CO', 'Colombia'],['es-CR', 'Costa Rica'],['es-EC', 'Ecuador'],['es-SV', 'El Salvador'],['es-ES', 'España'],['es-US', 'Estados Unidos'],['es-GT', 'Guatemala'],['es-HN', 'Honduras'],['es-MX', 'México'],['es-NI', 'Nicaragua'],['es-PA', 'Panamá'],['es-PY', 'Paraguay'],['es-PE', 'Perú'],['es-PR', 'Puerto Rico'],['es-DO', 'República Dominicana'],['es-UY', 'Uruguay'],['es-VE', 'Venezuela']],['Euskara',         ['eu-ES']],['Français',        ['fr-FR']],['Galego',          ['gl-ES']],['Hrvatski',        ['hr_HR']],['IsiZulu',         ['zu-ZA']],['Íslenska',        ['is-IS']],['Italiano',        ['it-IT', 'Italia'],['it-CH', 'Svizzera']],['Magyar',          ['hu-HU']],['Nederlands',      ['nl-NL']],['Norsk bokmål',    ['nb-NO']],['Polski',          ['pl-PL']],['Português',       ['pt-BR', 'Brasil'],['pt-PT', 'Portugal']],['Română',          ['ro-RO']],['Slovenčina',      ['sk-SK']],['Suomi',           ['fi-FI']],['Svenska',         ['sv-SE']],['Türkçe',          ['tr-TR']],['български',       ['bg-BG']],['Pусский',         ['ru-RU']],['Српски',          ['sr-RS']],['한국어',            ['ko-KR']],['中文',             ['cmn-Hans-CN', '普通话 (中国大陆)'],['cmn-Hans-HK', '普通话 (香港)'],['cmn-Hant-TW', '中文 (台灣)'],['yue-Hant-HK', '粵語 (香港)']],['日本語',           ['ja-JP']],['Lingua latīna',   ['la']]];
for (var i = 0; i < langs.length; i++) {select_language.options[i] = new Option(langs[i][0], i);
}
select_language.selectedIndex = 29;
updateCountry();
select_dialect.selectedIndex = 0;
showInfo('info_start');
function updateCountry() {for (var i = select_dialect.options.length - 1; i >= 0; i--) {select_dialect.remove(i);}var list = langs[select_language.selectedIndex];for (var i = 1; i < list.length; i++) {select_dialect.options.add(new Option(list[i][1], list[i][0]));}select_dialect.style.visibility = list[1].length == 1 ? 'hidden' : 'visible';
}
var create_email = false;
var final_transcript = '';
var recognizing = false;
var ignore_onend;
var start_timestamp;
if (!('webkitSpeechRecognition' in window)) {upgrade();
} else {start_button.style.display = 'inline-block';var recognition = new webkitSpeechRecognition();recognition.continuous = true;recognition.interimResults = true;recognition.onstart = function() {recognizing = true;showInfo('info_speak_now');start_img.src = 'mic-animate.gif';};recognition.onerror = function(event) {if (event.error == 'no-speech') {start_img.src = 'mic.gif';showInfo('info_no_speech');ignore_onend = true;}if (event.error == 'audio-capture') {start_img.src = 'mic.gif';showInfo('info_no_microphone');ignore_onend = true;}if (event.error == 'not-allowed') {if (event.timeStamp - start_timestamp < 100) {showInfo('info_blocked');} else {showInfo('info_denied');}ignore_onend = true;}};recognition.onend = function() {recognizing = false;if (ignore_onend) {return;}start_img.src = 'mic.gif';if (!final_transcript) {showInfo('info_start');return;}showInfo('');if (window.getSelection) {window.getSelection().removeAllRanges();var range = document.createRange();range.selectNode(document.getElementById('final_span'));window.getSelection().addRange(range);}if (create_email) {create_email = false;createEmail();}};recognition.onresult = function(event) {var interim_transcript = '';for (var i = event.resultIndex; i < event.results.length; ++i) {if (event.results[i].isFinal) {final_transcript += event.results[i][0].transcript;} else {interim_transcript += event.results[i][0].transcript;}}final_transcript = capitalize(final_transcript);final_span.innerHTML = linebreak(final_transcript);interim_span.innerHTML = linebreak(interim_transcript);if (final_transcript || interim_transcript) {showButtons('inline-block');}};
}
function upgrade() {start_button.style.visibility = 'hidden';showInfo('info_upgrade');
}
var two_line = /\n\n/g;
var one_line = /\n/g;
function linebreak(s) {return s.replace(two_line, '<p></p>').replace(one_line, '<br>');
}
var first_char = /\S/;
function capitalize(s) {return s.replace(first_char, function(m) { return m.toUpperCase(); });
}
function createEmail() {var n = final_transcript.indexOf('\n');if (n < 0 || n >= 80) {n = 40 + final_transcript.substring(40).indexOf(' ');}var subject = encodeURI(final_transcript.substring(0, n));var body = encodeURI(final_transcript.substring(n + 1));window.location.href = 'mailto:?subject=' + subject + '&body=' + body;
}
function copyButton() {if (recognizing) {recognizing = false;recognition.stop();}copy_button.style.display = 'none';copy_info.style.display = 'inline-block';showInfo('');
}
function emailButton() {if (recognizing) {create_email = true;recognizing = false;recognition.stop();} else {createEmail();}email_button.style.display = 'none';email_info.style.display = 'inline-block';showInfo('');
}
function startButton(event) {if (recognizing) {recognition.stop();return;}final_transcript = '';recognition.lang = select_dialect.value;recognition.start();ignore_onend = false;final_span.innerHTML = '';interim_span.innerHTML = '';start_img.src = 'mic-slash.gif';showInfo('info_allow');showButtons('none');start_timestamp = event.timeStamp;
}
function showInfo(s) {if (s) {for (var child = info.firstChild; child; child = child.nextSibling) {if (child.style) {child.style.display = child.id == s ? 'inline' : 'none';}}info.style.visibility = 'visible';} else {info.style.visibility = 'hidden';}
}
var current_style;
function showButtons(style) {if (style == current_style) {return;}current_style = style;copy_button.style.display = style;email_button.style.display = style;copy_info.style.display = 'none';email_info.style.display = 'none';
}
</script>

网盘地址：（个人）（正式版本以官方示例为主）

https://pan.baidu.com/s/1Q1XkJCQvJfDRn8azv9l0gA

提取码：

nhyi

注意：本api使用时需翻墙使用

转载于:https://www.cnblogs.com/zktww/p/11240238.html

语音识别（Web Speech API）相关推荐

  1. chrome Web Speech API 简单的语音识别实现 win10 开启立体声混音

    最近有个想法,想把网页里的英语音频转成文字,来实现简单参考的功能,有很多想法,最后实现了下面的页面. 前提:win10 系统,开启立体声混音,chrome浏览器,需要上Google win10开启立体 ...

  2. 使用 Web Speech API 在浏览器中朗读文本

    Web Speech API有两个功能:语音合成(语音阅读)和语音识别(语音到文本的转换).SpeechSynthesis API允许您在浏览器中选择语音并大声朗读任何文本. 无论是应用程序中的语音警 ...

  3. Java web speach api_HTML5 Web Speech API，让网站更有趣

    Web API 变得越来越丰富,其中一个值得注意的是Web Speech API.传统的网站只能"说",这个API的出现,让网站能"倾听"用户.这个功能已经开放 ...

  4. 使用Web Speech API制作语音控制的音频播放器

    /* For hiding / showing the extra block */ .sp_hiddenblock {margin: 2px;border: 1px solid rgb(250, 1 ...

  5. speech api_如何使用Web Speech API构建文本语音转换应用

    speech api 介绍 (Introduction) Assuming that you've used several apps over the years, there is a very ...

  6. 基于Web Speech API给AI语言模型加上语音功能，距离MOSS又近了一步

    目录 前言 起步 实现过程 webkitSpeechRecognition speechSynthesis 小例子 遇到的问题 效果展示 总结 前言 前段时间我把微信小号接入了AI语言模型,同事们直呼 ...

  7. 使用Web Speech API实现语音文本互转

    本教程中,我们将尝试使用Web Speech API,这是一个非常强大的浏览器接口,可以用来记录语音并将其转换为文本,同样的,也可以用来朗读字符串. 接下来进入正题,这个App应当具有以下几个功能: ...

  8. react-emotion_如何使用Web Speech API和Node.js构建语音转Emotion Converter

    react-emotion Have you ever wondered - can we make Node.js check to see if what we say is positive o ...

  9. ASP.NET Core环境Web Audio API+SingalR+微软语音服务实现web实时语音识别

    处于项目需要,我研究了一下web端的语音识别实现.目前市场上语音服务已经非常成熟了,国内的科大讯飞或是国外的微软在这块都可以提供足够优质的服务,对于我们工程应用来说只需要花钱调用接口就行了,难点在于整 ...

  10. 使用微软的语音识别引擎Microsoft Speech API进行语音控制

    以下代码来自:http://mmcheng.net/zh/imagespirit/ 本人仅作提取: SREngine语音识别引擎封装类: #pragma once/****************** ...

最新文章

  1. 杨老师课堂_Java核心技术下之控制台模拟文件管理器案例
  2. InstallShield 2015 LimitedEdition VS2012 运行bat文件
  3. Ubuntu网卡地址配置、设置 DNS和主机名
  4. linux ls文件颜色和底色设置
  5. hdu2973 YAPTCHA
  6. go标准命令详解0.1 go build
  7. Activity的生命周期理解
  8. 为什么要用Mybatis框架---Mybatis学习笔记（一）
  9. Android之ndk之用arm-linux-androideabi工具通过地址找到具体哪里崩溃
  10. Rational Rose ：从用例图开始
  11. poj2406 Power Strings 模式匹配算法KMP变形
  12. html图片自适应屏幕大小
  13. 模糊综合评价（清风建模学习笔记）
  14. html武侠文字游戏源码,执剑行！最新武侠文字mud游戏
  15. [数据分析与可视化] 科技论文配色心得
  16. 视频下载离线工具—“Softorino YouTube Converter”
  17. 又是一年腊八节 记忆中的腊八粥是什么味道？
  18. java输出hello word,新手求教如何输出helloword
  19. 交规考试通过，庆祝一下
  20. 每日一题——二叉树的中序遍历

热门文章

  1. 拓端tecdat|r语言中如何进行两组独立样本秩和检验
  2. oracle实施过程中误区,oracle 开发误区探索《二》
  3. js基础知识汇总08
  4. RuntimeError: Legacy autograd function with non-static forward method is deprecated. Please use new-
  5. Python numpy中矩阵的用法总结
  6. 网格法对随机森林调参
  7. Python获取二维矩阵每列最大值
  8. python数据分析用什么框架_用python选择用于内存大的数据分析的框架
  9. c语言double型小数点后几位_程序的数据要放到哪里呢？|C语言第二篇
  10. HTML画廊效果,HTML5实践-使用css装饰图片画廊的代码分享（一）