みかづきブログ・カスタム

基本的にはちょちょいのほいです。

webkitSpeechRecognitionを使ってブラウザで音声認識を試す 🎙

f:id:kimizuka:20201014224040p:plain

developer.mozilla.org

ざっくり作ってみました。
マイク入力を許可すれば、喋ったことをテキストに起こしてくれます。

MacとAndroid10のGoogle Chromeで動作を確認しました。

ソースコード

JavaScript

const recognition = new webkitSpeechRecognition();
const msg = document.getElementById('msg');

recognition.lang = 'ja';

recognition.addEventListener('result', (evt) => {
  const txt = evt.results[0][0].transcript;

  if (txt) {
    msg.innerText += `${txt}\n`;

    console.log(msg.innerText);
  }
}, false);

recognition.addEventListener('end', () => {
  recognition.start();
});

recognition.start();
  <div id="msg"></div>
body {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: 0; padding: 0;
  color: #f8f8f8;
  font-size: 20px;
  background: #282828;
}

body:before {
  display: block;
  position: absolute;
  top: 50%; left: 50%;
  color: #1e1e1e;
  font: 16px AvenirNext-Heavy;
  content: "Please Speak!";
  transform: translate(-50%, -50%);
  pointer-events: none;
}

#msg {
  position: absolute;
  top: 10px; bottom: 10px;
  left: 10px; right: 10px;
  font-size: 14px;
  white-space: pre-wrap;
  overflow: scroll;
  -webkit-overflow-scrolling: touch;
}

#msg:focus {
  outline: none;
}