CodePen Embed - dEvbvR

<h1>Web Speech API 音声認識テスト</h1>
<p>注1: Google Chrome, Edge(v75以降), Opera(v27以降)で実行してください。</p>
<p>注2: VivaldiなどのChronium派生ブラウザでは動作しません。</p>
<div class="results" />

.results {
  padding: 16px;
  background: #eee;
}

.results:before {
  content: "認識結果:";
}

var rec = new webkitSpeechRecognition();
rec.continuous = true;
rec.interimResults = false; // trueにすると認識途中の結果も返す
rec.lang = 'ja-JP'; // 言語を指定する
rec.onresult = e => {
  const latestResult = e.results[e.results.length - 1][0]
  // 認識結果がSpeechRecognitionEventインスタンスとして渡されます
  document.querySelector('.results').innerHTML += latestResult.transcript + "<br />"
}
rec.start() // 認識を開始します

This Pen is owned by KilledByNLP on CodePen.

See more by @KilledByNLP on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.