メディア権限プロンプトありスマホ推奨判定中...
Web Speech API
テキストの読み上げ（合成）とマイク音声のテキスト化（認識）をブラウザ標準機能だけで行えるAPI。
1対応判定
| ブラウザ | 対応バージョン |
|---|---|
| Chrome | 合成33+ / 認識139+（それ以前はwebkit接頭辞） |
| Firefox | 合成49+ / 認識142+（フラグ必要=実質未対応） |
| Safari | 合成7+ / 認識14.1+ |
備考: 日本語voiceの有無はOS依存。Chromeはwebkit接頭辞の併用で広くカバーできる
2権限フロー
権限不要
API呼び出しだけで動く。プロンプトも操作起点の縛りもない
ユーザージェスチャー必須
ボタンクリック等のユーザー操作の中でしか呼べない。プロンプトは出ない
権限プロンプトありこのAPI
呼び出すとブラウザが許可/ブロックのプロンプトを表示し、ユーザーが選ぶ
iOS独自requestPermission
iOSではrequestPermission()を操作起点で呼び、明示的に許可を得る
合成（読み上げ）は権限不要。認識はマイクを使うため、開始時にマイク許可のプロンプトが表示される。
現在の権限状態（navigator.permissions.query）: このブラウザでは取得できません
3ライブデモ: 日本語読み上げと音声認識
4コードスニペット
TypeScript（要約版）
// 合成: 入力文を日本語voiceで読み上げる
function speak(text: string, voice: SpeechSynthesisVoice, rate: number) {
const utter = new SpeechSynthesisUtterance(text);
utter.voice = voice;
utter.rate = rate; // 0.1 - 10
utter.pitch = 1.2; // 0 - 2
speechSynthesis.cancel();
speechSynthesis.speak(utter);
}
// voice一覧は非同期に届くことがある
speechSynthesis.addEventListener("voiceschanged", () => {
const jaVoices = speechSynthesis
.getVoices()
.filter((v) => v.lang.startsWith("ja"));
});
// 認識: マイク音声をリアルタイムでテキスト化
const Ctor =
window.SpeechRecognition ?? window.webkitSpeechRecognition;
const rec = new Ctor();
rec.lang = "ja-JP";
rec.interimResults = true; // 確定前の途中結果も受け取る
rec.continuous = true;
rec.onresult = (e) => {
const last = e.results[e.results.length - 1];
console.log(last[0].transcript, last.isFinal);
};
rec.start(); // 初回はマイク許可プロンプトが出る