WAT 커스텀 설정 및 함수 호출 예제

1. 커스텀 초기화 설정

다양한 설정 옵션으로 WAT를 초기화하는 방법을 보여줍니다.

기본 커스텀 설정


watOptions = {
		configPath: '../config.json',

		colorTheme: false,
		toolWidth: 400,
		containerTargetSelector: '#wrap',
		// 도구 예외영역 설정
		excludeSelector: '#navWrap, #codeWrap',
		fontFamily: {
			'Koddi Udon Gothic': {
				enabled: true,
				url: '/assets/fonts/koddi-udon-gothic/koddi-udon-gothic.css'
			},
			'Nanum Pen Script': {
				enabled: true,
				url: 'https://fonts.googleapis.com/css2?family=Nanum+Pen+Script&display=swap'
			}
		},
		// TTS 관련 설정
		ttsSpeechRate: 2.0,		// TTS 읽기 속도 (0.1 ~ 10, 기본값: 1.6)
		ttsAutoAdvanceDelay: 2000,	// 자동 진행 지연시간 (밀리초, 기본값: 1000)

		// 다중 언어에서 기본 언어 지정
		language: { languages: ["ko", "en-US", "ja"]},
		fontSizeOptions: {
			'size-1p2x': false, // 기존 옵션 비활성화
			'size-large': {
				ratio: 2.5,
				label: '매우 큰 글씨',
				enabled: true
			},
			'size-custom': {
				ratio: 1.8,
				label: '사용자 정의 크기'
			}
		}
};
const wat = new WAT(watOptions);
window.watPlugin = wat;
wat.init();

현재 WAT 인스턴스 정보

WAT 인스턴스 상태를 확인 중...

2. TTS (음성 합성) 함수 예제

기본 TTS 함수 호출

// 기본 텍스트 읽기
const utterance = new SpeechSynthesisUtterance('안녕하세요!');
utterance.rate = 2.0;   // 속도
utterance.pitch = 1.0;  // 음높이
utterance.volume = 1.0; // 볼륨
speechSynthesis.speak(utterance);

// 현재 페이지 제목 읽기
speechSynthesis.speak(new SpeechSynthesisUtterance(document.title));

TTS 제어 함수

// TTS 일시정지/재개/중지 (브라우저)
speechSynthesis.pause();
speechSynthesis.resume();
speechSynthesis.cancel();

// TTS 상태 확인 (브라우저)
console.log({
    speaking: speechSynthesis.speaking,
    paused: speechSynthesis.paused
});

3. STT (음성 인식) 함수 예제

음성 인식 제어

음성 인식 결과가 여기에 표시됩니다... 
// 음성 명령 시작/중지
window.watPlugin.sttManager.toggleVoiceCommand();

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

4. 포커스 TTS 및 이벤트 처리

포커스 기반 텍스트 읽기

아래 요소들에 포커스를 맞춰보세요 (Tab 키 사용 또는 더블클릭):

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

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

이벤트 리스너 등록

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

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

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

// 설정 변경 이벤트
document.addEventListener('wat:settings:changed', (event) => {
    console.log('설정 변경:', event.detail);
});

5. 고급 설정 및 상태 관리

상태 관리 함수

// 전역 상태 확인
const state = customWAT.stateManager.get();
console.log('현재 상태:', state);

// 특정 설정 값 확인
const ttsRate = customWAT.stateManager.get('tts.rate');
console.log('TTS 속도:', ttsRate);

// 설정 업데이트
customWAT.stateManager.update('tts.rate', 1.5);

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

에러 처리 및 디버깅

// 에러 처리 리스너 등록
document.addEventListener('wat:error', (event) => {
    console.error('WAT 에러:', event.detail);
});

// 디버그 모드 활성화
customWAT.setDebugMode(true);

// 에러 로그 확인
const errors = customWAT.getErrorLog();
console.log('에러 로그:', errors);