ModuWeb API 함수 호출 예제

TTS (Text-to-Speech)

기본 TTS 함수

브라우저 음성 합성 데모

// 기본 사용법 (브라우저 Web Speech API)
const utterance = new SpeechSynthesisUtterance('텍스트');
utterance.rate = 1.5;    // 속도
utterance.pitch = 1.2;   // 음높이
utterance.volume = 0.8;  // 볼륨
speechSynthesis.speak(utterance);

TTS 상태 및 제어

TTS 상태 정보가 여기에 표시됩니다...
// TTS 상태(브라우저)
const status = {
    speaking: speechSynthesis.speaking,
    paused: speechSynthesis.paused
};

// 사용 가능한 음성 목록
const voices = speechSynthesis.getVoices();

STT (음성 명령)

음성 인식 함수

start(callback, options)

음성 인식 대기 중...
인식된 텍스트가 여기에 표시됩니다...
// 음성 명령 시작/중지
watInstance.sttManager.toggleVoiceCommand();

// 상태 확인
document.addEventListener('wat:stt:stateChanged', (event) => {
    console.log(event.detail);
});

포커스 TTS

포커스 기반 텍스트 읽기

포커스 TTS 제어

테스트 요소들 (포커스 시 자동 읽기)

특정 요소 읽기

// 포커스 TTS 토글
watInstance.ttsManager.toggleFocusTTS();

// 포커스 TTS는 더블클릭/마우스 선택 시 해당 텍스트를 읽습니다.

⚙️ 상태 관리 API

StateManager 함수들

상태 조회 및 설정

상태 정보가 여기에 표시됩니다...
// 전체 상태 조회
const allState = watInstance.stateManager.get();

// 특정 경로 상태 조회
const ttsRate = watInstance.stateManager.get('tts.rate');

// 상태 업데이트
watInstance.stateManager.set('tts.rate', 1.5);

// 여러 설정 한번에 업데이트
watInstance.stateManager.merge('tts', {
    rate: 1.3,
    pitch: 1.1
});

상태 관찰자 (Observer)

상태 변경 로그가 여기에 표시됩니다...
// 상태 관찰자 추가
watInstance.stateManager.observe('tts.rate', (newValue, oldValue, path) => {
    console.log(`${path} 변경: ${oldValue} → ${newValue}`);
});

// 상태 관찰자 제거
watInstance.stateManager.unobserve('tts.rate', callback);

📡 이벤트 시스템 API

이벤트 리스너 관리

WAT 이벤트 모니터링

이벤트 로그가 여기에 표시됩니다...
// WAT 이벤트 리스너
document.addEventListener('wat:initialized', (event) => {
    console.log('WAT 초기화:', event.detail);
});

document.addEventListener('wat:tts:stateChanged', (event) => {
    console.log('TTS 상태 변경:', event.detail);
});

document.addEventListener('wat:stt:stateChanged', (event) => {
    console.log('STT 상태 변경:', event.detail);
});

// 커스텀 이벤트 발송
document.dispatchEvent(new CustomEvent('wat:custom', {
    detail: { message: '커스텀 이벤트' }
}));

🛠️ 유틸리티 및 디버깅 API

디버깅 및 진단 도구

시스템 정보 및 진단

진단 결과가 여기에 표시됩니다...
// 시스템 정보 확인
const systemInfo = {
    userAgent: navigator.userAgent,
    language: navigator.language,
    platform: navigator.platform,
    speechSynthesis: 'speechSynthesis' in window,
    speechRecognition: 'webkitSpeechRecognition' in window || 'SpeechRecognition' in window
};

// WAT 인스턴스 정보
const watInfo = {
    version: watInstance.version,
    initialized: watInstance.isInitialized,
    modules: Object.keys(watInstance)
};