LoginSignup
197
189

More than 5 years have passed since last update.

ブラウザからの音声入力を認識してテキスト化する (Web Speech API)

Last updated at Posted at 2015-11-14

Chromeすごいわ。ブラウザだけでここまでできるとは。
こんな簡単なHTMLだけで音声認識→ テキスト化ができます。 日本語もOK。

speech.png

デモをこちらに起きました。
http://inouet.github.io/sample_html/001.speech_recognition.html

コード

<html>
<head>
  <meta charset="UTF-8" />
  <title>Web Speech API</title>
<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script>
window.SpeechRecognition = window.SpeechRecognition || webkitSpeechRecognition;
var recognition = new webkitSpeechRecognition();
recognition.lang = 'ja';

// 録音終了時トリガー
recognition.addEventListener('result', function(event){
    var text = event.results.item(0).item(0).transcript;
    $("#result_text").val(text);
}, false);

// 録音開始
function record()
{
    recognition.start();
}
</script>
</head>

<body>

<textarea id="result_text" cols="100" rows="10">
</textarea>
<br />
<input type="button" onClick="record()" value="録音開始" />
</body>
</html>

※ ローカルに保存したHTMLをchromeで表示したらうごかず。WEBサーバー経由で表示しないとだめみたい。ハマった。

参考ページ

197
189
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
197
189