🎙️ Web Speech API 완벽 가이드: 외부 SDK 없는 브라우저 네이티브 실시간 음성 인식(STT)과 음성 합성(TTS)

// SpeechSynthesis (TTS) 지원 확인
const isTTSSupported = 'speechSynthesis' in window;

// SpeechRecognition (STT) 지원 확인 (웹킷 벤더 프리픽스 대응)
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const isSTTSupported = typeof SpeechRecognition !== 'undefined';

console.log(`TTS 지원 여부: ${isTTSSupported}, STT 지원 여부: ${isSTTSupported}`);

// 1. 발화할 문장 객체 생성
const utterance = new SpeechSynthesisUtterance('안녕하세요! Logic-Phantom 기술 블로그에 오신 것을 환영합니다.');

// 2. 한국어 언어 코드 지정
utterance.lang = 'ko-KR';

// 3. 낭독 시작
window.speechSynthesis.speak(utterance);

const utterance = new SpeechSynthesisUtterance('텍스트를 한 단어씩 읽으면서 하이라이트할 수 있습니다.');
utterance.lang = 'ko-KR';

utterance.onstart = () => {
  console.log('낭독이 시작되었습니다.');
};

utterance.onboundary = (event) => {
  // 단어(word) 또는 문장(sentence) 경계 도달 시 트리거
  console.log(`현재 읽고 있는 단어 인덱스: ${event.charIndex}, 길이: ${event.charLength}`);
};

utterance.onend = () => {
  console.log('낭독이 성공적으로 끝났습니다.');
};

utterance.onerror = (event) => {
  console.error('음성 합성 중 오류 발생:', event.error);
};

window.speechSynthesis.speak(utterance);

function loadVoices() {
  return new Promise((resolve) => {
    let voices = window.speechSynthesis.getVoices();
    if (voices.length > 0) {
      resolve(voices);
      return;
    }
    
    // 브라우저가 음성 팩을 로드할 때까지 대기
    window.speechSynthesis.onvoiceschanged = () => {
      voices = window.speechSynthesis.getVoices();
      resolve(voices);
    };
  });
}

async function setupVoiceSelector() {
  const voices = await loadVoices();
  console.log(`사용 가능한 전체 음성 수: ${voices.length}`);
  
  // 한국어 음성 필터링
  const koreanVoices = voices.filter(v => v.lang.startsWith('ko'));
  koreanVoices.forEach(v => {
    console.log(`이름: ${v.name} | 로컬 엔진 여부: ${v.localService} | 기본값: ${v.default}`);
  });
  
  return koreanVoices[0] || voices[0];
}

async function speakCustomMessage(text) {
  const selectedVoice = await setupVoiceSelector();
  const utterance = new SpeechSynthesisUtterance(text);
  
  utterance.voice = selectedVoice;
  utterance.rate = 1.15;  // 속도 (0.1 ~ 10, 기본값: 1.0)
  utterance.pitch = 1.05; // 피치/음조 (0 ~ 2, 기본값: 1.0)
  utterance.volume = 0.9; // 볼륨 (0 ~ 1, 기본값: 1.0)
  
  // 이전 발화가 남아있다면 취소하고 즉시 새 발화 재생
  if (window.speechSynthesis.speaking) {
    window.speechSynthesis.cancel();
  }
  
  window.speechSynthesis.speak(utterance);
}

function startSingleRecognition() {
  const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
  if (!SpeechRecognition) {
    alert('이 브라우저는 음성 인식을 지원하지 않습니다.');
    return;
  }

  const recognition = new SpeechRecognition();
  recognition.lang = 'ko-KR'; // 한국어 지정
  recognition.continuous = false; // 한 문장이 끝나면 자동 종료
  recognition.interimResults = false; // 최종 결과만 수신
  recognition.maxAlternatives = 1; // 가장 신뢰도 높은 결과 1개만 반환

  recognition.onstart = () => {
    console.log('마이크가 활성화되었습니다. 말씀을 시작하세요.');
  };

  recognition.onresult = (event) => {
    const transcript = event.results[0][0].transcript;
    const confidence = event.results[0][0].confidence;
    
    console.log(`인식된 문장: "${transcript}"`);
    console.log(`신뢰도(0~1): ${(confidence * 100).toFixed(1)}%`);
  };

  recognition.onerror = (event) => {
    console.error('인식 에러 발생:', event.error);
  };

  recognition.onend = () => {
    console.log('음성 인식이 종료되었습니다.');
  };

  recognition.start();
}

class RealtimeSpeechTranscriber {
  constructor(onUpdate) {
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    this.recognition = new SpeechRecognition();
    this.recognition.lang = 'ko-KR';
    this.recognition.continuous = true; // 사용자가 멈출 때까지 계속 청취
    this.recognition.interimResults = true; // 중간 결과 수신 활성화
    
    this.finalTranscript = '';
    this.onUpdate = onUpdate;
    
    this.initEvents();
  }

  initEvents() {
    this.recognition.onresult = (event) => {
      let interimTranscript = '';

      for (let i = event.resultIndex; i < event.results.length; i++) {
        const result = event.results[i];
        const text = result[0].transcript;

        if (result.isFinal) {
          // 최종 확정된 텍스트 누적
          this.finalTranscript += text + ' ';
        } else {
          // 현재 실시간으로 분석 중인 미확정 텍스트
          interimTranscript += text;
        }
      }

      // 콜백으로 확정 텍스트와 중간 텍스트 분리 전달
      this.onUpdate({
        final: this.finalTranscript.trim(),
        interim: interimTranscript.trim()
      });
    };

    this.recognition.onerror = (e) => console.error('음성 인식 오류:', e.error);
  }

  start() {
    this.finalTranscript = '';
    this.recognition.start();
  }

  stop() {
    this.recognition.stop();
  }
}

// 사용 예시 (UI 렌더링)
const transcriber = new RealtimeSpeechTranscriber(({ final, interim }) => {
  const displayEl = document.getElementById('transcript-display');
  displayEl.innerHTML = `
    <span class="final-text">${final}</span> 
    <span class="interim-text" style="color: #888; font-style: italic;">${interim}</span>
  `;
});

const SUPPORTED_LANGUAGES = {
  'ko': { code: 'ko-KR', voiceMatch: 'Korean' },
  'en': { code: 'en-US', voiceMatch: 'Google US English' },
  'ja': { code: 'ja-JP', voiceMatch: 'Japanese' }
};

function configureSpeechEngine(langKey) {
  const config = SUPPORTED_LANGUAGES[langKey] || SUPPORTED_LANGUAGES['en'];
  
  // 1. STT 언어 지정
  const recognition = new (window.SpeechRecognition || window.webkitSpeechRecognition)();
  recognition.lang = config.code;
  
  // 2. TTS 보이스 검색 및 지정
  const voices = window.speechSynthesis.getVoices();
  const matchedVoice = voices.find(v => v.lang.startsWith(langKey)) || voices[0];
  
  return {
    recognition,
    speak: (text) => {
      const utterance = new SpeechSynthesisUtterance(text);
      utterance.voice = matchedVoice;
      utterance.lang = config.code;
      window.speechSynthesis.speak(utterance);
    }
  };
}

class VoiceAssistantCoordinator {
  constructor() {
    const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
    this.recognition = new SpeechRecognition();
    this.recognition.lang = 'ko-KR';
    
    this.isBotSpeaking = false;
    this.initCoordinator();
  }

  initCoordinator() {
    this.recognition.onresult = async (event) => {
      // 봇이 말하는 동안 들어온 마이크 입력은 강제 무시
      if (this.isBotSpeaking) return;
      
      const userQuery = event.results[0][0].transcript;
      console.log('사용자 입력:', userQuery);
      
      // 인식 즉시 마이크 잠정 중단
      this.recognition.abort();
      
      // AI 응답 생성 (예: LLM API 호출 모사)
      const botReply = await this.fetchBotReply(userQuery);
      
      // 봇 음성 출력
      this.speakReply(botReply);
    };
  }

  async fetchBotReply(query) {
    return `"${query}"에 대해 답변해 드리겠습니다.`;
  }

  speakReply(text) {
    const utterance = new SpeechSynthesisUtterance(text);
    utterance.lang = 'ko-KR';
    
    utterance.onstart = () => {
      this.isBotSpeaking = true;
      // 스피커 출력 중에는 마이크 확실히 정지
      try { this.recognition.abort(); } catch (e) {}
    };
    
    utterance.onend = () => {
      this.isBotSpeaking = false;
      // 발화 완료 후 약간의 딜레이(200ms 잔향 제거)를 두고 마이크 재청취 시작
      setTimeout(() => {
        try { this.recognition.start(); } catch (e) {}
      }, 200);
    };
    
    window.speechSynthesis.speak(utterance);
  }
}

document.getElementById('start-btn').addEventListener('click', () => {
  // 반드시 사용자 클릭 이벤트 핸들러 내부에서 최초 실행
  recognition.start();
});

async function checkMicrophonePermission() {
  try {
    const permissionStatus = await navigator.permissions.query({ name: 'microphone' });
    
    console.log(`마이크 권한 상태: ${permissionStatus.state}`); // 'granted' | 'denied' | 'prompt'
    
    permissionStatus.onchange = () => {
      console.log(`마이크 권한 변경됨: ${permissionStatus.state}`);
    };
  } catch (err) {
    console.warn('권한 쿼리 API 미지원 브라우저');
  }
}

function speakSafely(utterance) {
  let timer = null;
  
  utterance.onstart = () => {
    // 10초마다 브라우저 오디오 파이프라인 깨우기
    timer = setInterval(() => {
      if (window.speechSynthesis.speaking) {
        window.speechSynthesis.pause();
        window.speechSynthesis.resume();
      }
    }, 10000);
  };
  
  utterance.onend = utterance.onerror = () => {
    clearInterval(timer);
  };
  
  window.speechSynthesis.speak(utterance);
}