developer.mozilla.org
ざっくり作ってみました。
マイク入力を許可すれば、喋ったことをテキストに起こしてくれます。
MacとAndroid10のGoogle Chromeで動作を確認しました。
DEMO
ソースコード
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; }