みかづきブログ その3

本ブログは更新を終了しました。通算140万ユーザーの方に観覧頂くことができました。長い間、ありがとうございました。

👆

引越し先はこちらです!

スマートフォンのブラウザで音声認識機能をつかいたいという想い

ずっと無理だと思ってました。
いちかばちか SpeechRecognition をつかったら、

  • Nexus 5X (Android6.0)
  • Nexus 5 (Android5.1)

で動きました。ためしてみるもんですね。

developer.mozilla.org


ソースコード

JavaScript
(function(win, doc) {

    "use strict";

    var recognition = new webkitSpeechRecognition(),
        msg         = doc.getElementById("msg");

    recognition.lang = "ja";

    recognition.addEventListener("result", function(evt) {
      var txt = evt.results[0][0].transcript;

      if (txt) {
        msg.innerText += evt.results[0][0].transcript;
        msg.innerHTML += "<br />";
      }
    }, false);

    recognition.addEventListener("end", function() {
      recognition.start();
    });

    recognition.start();

})(this, document);
HTML
<div id="msg" contenteditable="true"></div>
CSS
html {
  position: relative;
  height: 100%;
}

body {
  position: absolute;
  top: 0; bottom: 0;
  left: 0; right: 0;
  margin: 0; padding: 0;
  color: #fff;
  font-size: 20px;
  background: linear-gradient(#2e2e2e, #212121);
}

body:after {
  display: block;
  position: absolute;
  top: 50%; left: 50%;
  margin: -160px;
  width: 320px; height: 320px;
  color: #1e1e1e;
  font: 40px AvenirNext-Heavy;
  content: "Please Speak!";
  line-height: 320px;
  text-align: center;
}

#msg {
  position: absolute;
  top: 10px; bottom: 10px;
  left: 10px; right: 10px;
  font-size: 14px;
  overflow: scroll;
}

#msg:focus {
  outline: none;
}

注意事項

PC
  • httpでアクセスするとアクセスのたびにマイクの許可が求められます
  • httpsでアクセスすると2度目のアクセスからは許可が取れている状態になります
Android
  • httpでアクセスすると start のたびにマイクの許可が求められます
  • httpsでアクセスすると2度目のアクセスからは許可が取れている状態になります

SpeechRecognitionに確認できたイベント

  • audioend
  • audiostart
  • end
  • error
  • nomatch
  • result
  • soundend
  • soundstart
  • speechend
  • speechstart
  • start