채택완료
TTS, 브라우저 자체 지원 엔진 Web Speech API, 일시정지버튼 오류
해당파일: view.skin.php
구글링에서 찾은 코드를 사용하였습니다.
증상 : '재생' '정지'는 작동, '일시정지'버튼은 작동하지 않습니다.
어떤 오류일런지요...
PC버전에서만 테스트중입니다. 일본어
자바스크립트
버튼 표시
구글링에서 찾은 코드를 사용하였습니다.
증상 : '재생' '정지'는 작동, '일시정지'버튼은 작동하지 않습니다.
어떤 오류일런지요...
PC버전에서만 테스트중입니다. 일본어
자바스크립트
Copy
<script>
let speech = new SpeechSynthesisUtterance();
speech.lang = 'ja-JP'; // 한국어 설정
function speakText(text) {
window.speechSynthesis.cancel(); // 이전 재생 중지
speech.text = text;
window.speechSynthesis.speak(speech);
if (isPaused) {
window.speechSynthesis.resume();
isPaused = false;
} else {
window.speechSynthesis.cancel(); // 이전 재생 초기화
window.speechSynthesis.speak(ttsUtterance);
}
}
function pauseText() {
if (window.speechSynthesis && window.speechSynthesis.speaking && !isPaused) {
window.speechSynthesis.pause();
isPaused = true;
}
}
function stopSpeech() {
window.speechSynthesis.cancel();
isPaused = false;
}
</script>
버튼 표시
Copy
<button type="button" onclick="speakText('<?php echo addslashes(str_replace(array("\r", "\n"), "", strip_tags($view['wr_content']))); ?>')">
🔊 본문 음성으로 듣기
</button>
<button type="button" onclick="pauseText()" >⏸️ 일시정지</button>
<button type="button" onclick="stopSpeech()">⏹️ 정지</button>
답변 2개 / 댓글 1개
채택된 답변
+20 포인트
2026-06-06 (토) 22:53:23
Copy
<textarea id="tts_text">안녕하세요. 테스트 문장입니다. 일시정지와 다시재생을 확인합니다.</textarea>
<button type="button" id="btn_play">재생</button>
<button type="button" id="btn_pause">일시정지</button>
<button type="button" id="btn_stop">정지</button>
<script>
let adp_202606061530_synth = window.speechSynthesis;
let adp_202606061530_utterance = null;
document.getElementById('btn_play').addEventListener('click', function () {
// 일시정지 상태면 새로 speak 하지 말고 resume
if (adp_202606061530_synth.paused) {
adp_202606061530_synth.resume();
return;
}
// 이미 읽는 중이면 중복 실행 방지
if (adp_202606061530_synth.speaking) {
return;
}
const text = document.getElementById('tts_text').value.trim();
if (!text) {
alert('읽을 텍스트가 없습니다.');
return;
}
adp_202606061530_utterance = new SpeechSynthesisUtterance(text);
adp_202606061530_utterance.lang = 'ko-KR';
adp_202606061530_utterance.rate = 1;
adp_202606061530_utterance.pitch = 1;
adp_202606061530_synth.speak(adp_202606061530_utterance);
});
document.getElementById('btn_pause').addEventListener('click', function () {
// 말하는 중이고 아직 pause 상태가 아닐 때만 pause
if (adp_202606061530_synth.speaking && !adp_202606061530_synth.paused) {
adp_202606061530_synth.pause();
}
});
document.getElementById('btn_stop').addEventListener('click', function () {
// 정지는 cancel
adp_202606061530_synth.cancel();
adp_202606061530_utterance = null;
});
</script>
일시정지 버튼에서 다시 speak()를 호출하면 안 되고, 현재 재생 중인 speechSynthesis 객체에 대해 pause()만 호출해야 해요.
다시 재생할 때는 새로 읽는 게 아니라 resume()을 호출하는 방식이죠
참조 : https://developer.mozilla.org/en-US/docs/Web/API/SpeechSynthesis/pause
답변에 대한 댓글 1개
view.skin.php에 적용하셨더라도
문제 자체는 Web Speech API와 자바스크립트 동작 영역으로 보입니다.
코드 흐름에서 isPaused, ttsUtterance 사용 부분도 한번 확인해 보시고,
관련 자료나 JS 커뮤니티 등에서 확인해 보시면 어떨까 싶습니다.
답변을 작성하려면 로그인이 필요합니다.