SpeechRecognitionで音声入力デバイスの切り替えを検証する

はじめに

ブラウザの SpeechRecognition API を使った音声認識で、ブラウザのマイク設定を変更した際の挙動を検証する小さなコードを紹介します。

検証したいこと

• ブラウザのマイク設定を変更した後、新しいSpeechRecognitionインスタンスがどのマイクを使用するか
• 設定変更のタイミングと音声認識の関係

検証コード

async function definitiveTest() {
    // ブラウザ互換性の確保
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    
    if (!SpeechRecognition) {
        console.error('このブラウザは音声認識APIに対応していません');
        return;
    }
    
    // 1. 内蔵マイクで開始します
    console.log('ステップ1: 内蔵マイクでの認識を開始します');
    
    const recognition1 = new SpeechRecognition();
    recognition1.onresult = (event) => {
        console.log('認識結果1:', event.results[0][0].transcript);
    };
    recognition1.start();
    
    // 開始後にユーザーへ通知
    alert('内蔵マイクで「テスト1」と発話してください');
    
    setTimeout(() => {
        recognition1.stop();
        
        // 2. ブラウザ設定を外部マイクに変更していただきます
        if (confirm('ブラウザ設定を外部マイク（AirPodsなど）に変更してから、OKを押してください')) {
            // 3. 新しいインスタンスで試します
            console.log('ステップ2: 外部マイクでの認識を開始します');
            
            const recognition2 = new SpeechRecognition();
            recognition2.onresult = (event) => {
                console.log('認識結果2:', event.results[0][0].transcript);
            };
            recognition2.start();
            
            // 開始後にユーザーへ通知
            alert('外部マイクで「テスト2」と発話してください');
            
            // 検証内容：
            // - ブラウザ設定変更後に新しいインスタンスが
            //   どのマイクを使用するかを確認します
            // - 両方のステップで音声が認識された場合、
            //   その音源と設定の関係を観察できます
        }
    }, 10000);
}

使い方

1. デベロッパーツールのコンソールでコードを実行
2. 内蔵マイクで「テスト1」と発話
3. ブラウザ設定で外部マイクに変更 chrome://settings/content/microphone
4. 外部マイクで「テスト2」と発話
5. コンソールで認識結果を確認

ポイント

• コンソールだけで完結する小さな検証
• 実際のデバイス切り替えタイミングを体験的に確認できる
• 新しいインスタンス生成時の挙動を観察可能

参考資料

• MDN - SpeechRecognition