Text to speech 기능

개발
1

안녕하세요.
웹의 speechSynthesis 를 이용해서 tts 를 구현했는데 웹뷰에서는 동작하지 않는것 같습니다.

찾아보니 https://www.npmjs.com/package/react-native-tts 와 같은 라이브러리가 있는데,

sdk 를 이용해 tts 를 제공하고 있거나, 그렇지 않다면 제공 예정이 있을까요?

2

안녕하세요 :slight_smile:
현재 웹뷰, RN SDK에 tts 관련 기능은 제공하고 있지 않습니다

웹뷰에서는 speechSynthesis 웹 api를 사용하실 수 있을텐데, 어떻게 안되시는걸까요 ?

3

빠른 답변 감사합니다.
**speechSynthesis 웹 API 사용에는 문제가 없다면, 좀 더 디버깅을 해보겠습니다.

감사합니다!**

4 
const handleSpeak = useCallback(() => {
        try {
            const hasAPI = typeof window !== 'undefined' && 'speechSynthesis' in window && 'SpeechSynthesisUtterance' in window;
            if (!hasAPI) {
                alert('이 환경에서는 speechSynthesis를 지원하지 않아요.');
                return;
            }

            // 기존 재생 중이면 정지
            window.speechSynthesis.cancel();

            const utter = new SpeechSynthesisUtterance();
            utter.text = '안녕하세요. 테스트입니다.';
            utter.lang = 'ko-KR';
            utter.rate = 1.0;
            utter.pitch = 1.0;
            utter.volume = 1.0;

            const voices = window.speechSynthesis.getVoices();
            const koVoice = voices.find(v => v.lang?.toLowerCase().startsWith('ko')) || voices[0];
            if (koVoice) utter.voice = koVoice;

            utter.onstart = () => console.log('TTS 시작');
            utter.onend = () => console.log('TTS 종료');
            utter.onerror = (e) => console.error('TTS 에러:', e);

            if (!voices || voices.length === 0) {
                window.speechSynthesis.onvoiceschanged = () => {
                    try {
                        const v = window.speechSynthesis.getVoices();
                        const k = v.find(vo => vo.lang?.toLowerCase().startsWith('ko')) || v[0];
                        if (k) utter.voice = k;
                        window.speechSynthesis.speak(utter);
                    } catch (err) {
                        console.error('voiceschanged 처리 중 에러:', err);
                    }
                };
            } else {
                window.speechSynthesis.speak(utter);
            }
        } catch (e) {
            console.error('TTS 실행 실패:', e);
            alert('콘솔을 확인해주세요.');
        }
    }, []);

테스트 코드를 공유드려요 :man_bowing:

5

테스트 코드까지….!
친절하시네요. 감사합니다!