196
188

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

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サーバー経由で表示しないとだめみたい。ハマった。

参考ページ

196
188
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
196
188

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?