ずっと無理だと思ってました。
いちかばちか SpeechRecognition をつかったら、
- Nexus 5X (Android6.0)
- Nexus 5 (Android5.1)
で動きました。ためしてみるもんですね。
ソースコード
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