ブラウザの音声入力インターフェース（VUI）を試す
公開日: 2026/03/25 / 更新日: 2026/03/28
WEB
データ処理
ブラウザ標準の Web Speech API を使って、VUIを実装する。
単一HTMLで ↓
<!DOCTYPE html>
<html lang="ja">
<body>
<button id="start">開始</button>
<button id="stop">停止</button>
<div id="result"></div>
<script>
const startBtn = document.getElementById('start');
const stopBtn = document.getElementById('stop');
const resultDiv = document.getElementById('result');
const recognition = new (window.SpeechRecognition)();
recognition.lang = 'ja-JP';
recognition.continuous = true;
recognition.interimResults = true;
startBtn.onclick = () => recognition.start();
stopBtn.onclick = () => recognition.stop();
recognition.onresult = (event) => {
let text = '';
for (let i = 0; i < event.results.length; i++) {
text += event.results[i][0].transcript;
}
resultDiv.innerText = text;
};
recognition.onerror = (event) => {
resultDiv.innerText = event.error + 'のエラー';
};
</script>
</body>
</html>GUIは、開始ボタンと停止ボタンと聞き取った内容を表示するエリアだけ。recognitionにインスタンスを定義。プロパティは３つで、1. 日本語入力モード、2. 無言でも聞き続けるオン、3. 予測変換オン。.onclickで開始と停止のイベントを設定して、.onresult 、つまり認識結果が来た分だけtextに言葉を追加していく。最低限のエラーハンドリングも追加した。
実際に使ってみた結果がこちら ↓
まず、API経由の割にレスポンスがいい、さらに、あんまり使わなそうな文章を結構早口で喋ったのに正確に聞き取れている。想像以上の結果が出て嬉しい。
ここで気になるのがレートリミットだが、公式には”ベンダーの実装に依存する”となっていて実質発表がない。recognition.continuousについては掲示板で、”元々６０秒の制限があったが今は緩和された”との記載あり。つまり、制限は緩いが突然の仕様変更の可能性ありということで、遊びや小規模サービスでの実験的導入に便利なのかもしれない。
ライター
H
HARLYA
無能アリ
趣味でフルスタック開発をしている。巨人の肩に乗りまくりで四捨五入すればエンドユーザー。