基于webkitSpeechRecognition的语音转文字

作者: LCSan | 来源:发表于2022-10-26 13:10 被阅读0次

【技术组工具分享】综合教程-视频语音转文字（2019.6.21更
免费在线文字转语音播音系统
语音转文字如何转？语音转文字软件推荐
Window文字转语音，转wav
a2 语音翻译文字
挖到宝啦，好多人要的软件，免费搞来了！
永久免费的语音转字幕网站介绍
指尖上的智慧班级—微信连接家校教育
语音文件转成文字怎么转
如何快速的将文字转成语音？详细介绍图文操作过程

demo用edge跑通了，测试了一下断网情况下无识别结果。识别速度较慢，准确率高，做一些简单的场景应用还是可以用的。chrome没有识别结果，暂时没有找到问题跟因。

<!DOCTYPE html>
<html lang="en">
 <head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> 
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <link href="./Speech To Text_files/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous" /> 
  <title>语音转文字</title> 
 </head> 
 <body class="container pt-5 bg-dark"> 
  <div class="mt-4" id="div_language"> 
   <h2 class="mb-3 text-light">语言选择</h2> 
   <select class="form-select bg-secondary text-light" id="select_language" onchange="updateCountry()"><option value="0">Afrikaans</option><option value="1">Bahasa Indonesia</option><option value="2">Bahasa Melayu</option><option value="3">Catal&agrave;</option><option value="4">Čeština</option><option value="5">Deutsch</option><option value="6">English</option><option value="7">Espa&ntilde;ol</option><option value="8">Euskara</option><option value="9">Fran&ccedil;ais</option><option value="10">Galego</option><option value="11">Hrvatski</option><option value="12">IsiZulu</option><option value="13">&Iacute;slenska</option><option value="14">Italiano</option><option value="15">Magyar</option><option value="16">Nederlands</option><option value="17">Norsk bokm&aring;l</option><option value="18">Polski</option><option value="19">Portugu&ecirc;s</option><option value="20">Rom&acirc;nă</option><option value="21">Slovenčina</option><option value="22">Suomi</option><option value="23">Svenska</option><option value="24">T&uuml;rk&ccedil;e</option><option value="25">български</option><option value="26">Pусский</option><option value="27">Српски</option><option value="28">한국어</option><option value="29">中文</option><option value="30">日本語</option><option value="31">Lingua latīna</option></select> 
   <select class="form-select bg-secondary text-light mt-2" id="select_dialect" style="visibility: visible;"><option value="cmn-Hans-CN">普通话 (中国大陆)</option><option value="cmn-Hans-HK">普通话 (香港)</option><option value="cmn-Hant-TW">中文 (台灣)</option><option value="yue-Hant-HK">粵語 (香港)</option></select> 
  </div> 
  <h2 class="mt-4 text-light">识别结果</h2> 
  <div class="p-3" style="border: 1px solid gray; height: 300px; border-radius: 8px;"> 
   <span id="status" class="lead mt-3 text-light" style="display: none;">识别中 ...</span> 
   <span id="final" class="text-light"></span> 
   <span id="interim" class="text-secondary"></span> 
  </div> 
  <div class="mt-4" style="float:right;"> 
   <button class="btn btn-success" id="start">开始</button> 
   <button class="btn btn-danger" id="stop">停止</button> 
  </div> 
  <script>
    if ("webkitSpeechRecognition" in window) {
  let speechRecognition = new webkitSpeechRecognition();
  let final_transcript = "";

  speechRecognition.continuous = true;
  speechRecognition.interimResults = true;
  speechRecognition.lang = document.querySelector("#select_dialect").value;

  speechRecognition.onstart = () => {
    document.querySelector("#status").style.display = "block";
  };
  speechRecognition.onerror = () => {
    document.querySelector("#status").style.display = "none";
    console.log("Speech Recognition Error");
  };
  speechRecognition.onend = () => {
    document.querySelector("#status").style.display = "none";
    console.log("Speech Recognition Ended");
  };

  speechRecognition.onresult = (event) => {
    let interim_transcript = "";

    for (let 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;
      }
    }
    document.querySelector("#final").innerHTML = final_transcript;
    document.querySelector("#interim").innerHTML = interim_transcript;
  };

  document.querySelector("#start").onclick = () => {
    speechRecognition.start();
  };
  document.querySelector("#stop").onclick = () => {
    speechRecognition.stop();
  };
} else {
  console.log("Speech Recognition Not Available");
}

  </script> 
  <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']]];

let select_language = document.querySelector('#select_language');
let select_dialect = document.querySelector('#select_dialect');

for (var i = 0; i < langs.length; i++) {
  select_language.options[i] = new Option(langs[i][0], i);
}

select_language.selectedIndex = 6;
updateCountry();
select_dialect.selectedIndex = 6;

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';
}
  </script> 
 </body>
</html>

封装成一个edge应用，试跑结果

录制_2022_10_27_13_08_53_729.gif

【技术组工具分享】综合教程-视频语音转文字（2019.6.21更
2019.6.21更新转自虫部落赵云007提供的免费音频转文字软件：软件基于百度语音识别，正确率和速度都不错 ...
免费在线文字转语音播音系统
抖兔文字转语音助手—软件简介。文字转语音助手官网，文转语音合成软件，文字转mp3软件，发音接近真人，在线免费试用...
语音转文字如何转？语音转文字软件推荐
近期一直在帮助朋友整理语音文件，麻烦的是还是将语音内容一点一点的转换成语音内容，整理没有多少的时候，就没有耐心在继...
Window文字转语音，转wav
老旧玩意，突然要用，写个小工具整理成wav .net framework 引用COMMicrosoft Speec...
a2 语音翻译文字
大家好我们来看一下语音翻译也可以说语音翻译文字视频翻译文字我们来看一下打开极简字幕然后我们点击语音转...
挖到宝啦，好多人要的软件，免费搞来了！
大家好，我是小阿浩~ 这几天好多人问我有没有语音转文字工具今天给大家分享一款语音转文字软件一个多功能语音转...
永久免费的语音转字幕网站介绍
永久免费的语音转字幕网站介绍基于百度语音技术，识别率97% 无时长限制，无文件大小限制永久免费，简单，易用，速...
指尖上的智慧班级—微信连接家校教育
原创胡志华微信公众平台，可以实现和特定群体的基于文字、图片、语音、视频等...
语音文件转成文字怎么转
语音文件转成文字怎么转，对于语音文件而言，有时候会出现一些声音，在某一些场合，语音文件是一种很不适宜的文件，在这个...
如何快速的将文字转成语音？详细介绍图文操作过程
文字转语音助手基于业界领先的深度神经网络技术，提供高度拟人、流畅自然的语音合成服务，让你的应用、设备开口说话，更具...