채택완료
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 포인트
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
답변을 작성하려면 로그인이 필요합니다.