zktww

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

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

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


注意:本API与官网需FQ使用和访问


 展示效果:

页面代码如下:

<!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使用时需FQ使用

分类:

技术点:

相关文章: