近期看了一个语音识别的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&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&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> <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 = / /g; var one_line = / /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(' '); 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使用时需翻墙使用