0
0

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.

WebSpeechApi

0
Posted at

WebSpeechApiとかいう音声認識APIがあるとかないとかって聞いてやってみたメモ

index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title>Web Speech APIサンプル</title>
  <style>
    body {
      padding: 15px 5px;
      text-align: center;
    }
    li {
      list-style-type: none;
    }
    #btn {
      width: 150px;
      height: 50px;
      margin-bottom: 20px;
    }
  </style>
</head>
<body>
  <h3>Web Speech APIサンプル</h3>
  <button id="btn">開始</button>
  <div id="content"></div>
  <script src="app.js"></script>
</body>
</html>
app.js
var btn = document.getElementById('btn');
var content = document.getElementById('content');

//音声認識API
var speech = new webkitSpeechRecognition();

//日本語
speech.lang = "ja";

//ボタンクリックで開始
btn.addEventListener('click', function() {
  speech.start();
});

//音声をテキスト表示
speech.addEventListener('result', function(e) {
  console.log(e);
  var text = e.results[0][0].transcript;
  getTextContents(text);
});

//テキスト表示
function getTextContents(text) {
  content.innerHTML = '<p>あなたが話した言葉</p>' +
                   '<input type="text" value="' + text + '">';
}

Chromeだとマイクの設定を許可してあげればできた。
結構精度いいらしい。

これだけで音声認識できるなんてすごいなあ

0
0
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
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?