Notice
Recent Posts
Recent Comments
Link
«   2025/02   »
일 월 화 수 목 금 토
1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28
Tags more
Archives
Today
Total
관리 메뉴

투덜이 개발자

JavaScript Web Speech TTS 본문

Program Language/JavaScript & Jquery

JavaScript Web Speech TTS

엠투 2024. 12. 5. 16:49
반응형

JavaScript Web Speech TTS 

<!DOCTYPE html>
<html lang="ko">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Speech Synthesis Example</title>
</head>
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<body>
	<button id="start">시작</button>
	<button id="reset">리셋</button>
	<button id="stop">중지</button>
	<input type="text" name="p_num" id="p_num" value="0">
	<button id="speakButton" style="display: none;">Speak</button>
<script>
	$.speakTTS = function(speak_msg){
		const synth = window.speechSynthesis;
		const utterThis = new SpeechSynthesisUtterance(speak_msg);
		synth.speak(utterThis);
	};
	
	$(document).ready(function() {
		// 시작을 눌러야 $.speakTTS 실행 가능
		$('#start').on('click', function(e){
			e.preventDefault();
			$.speakTTS('순번대기 시스템을 시작 하겠습니다.');
			$("#start").hide();
			startInterval();
		});
		
		$('#reset').on('click', function(e) {
			e.preventDefault();
			num = 0;
			$("#p_num").val(num);
			clearInterval(intervalId);
			intervalId = null;
			
			let reset_msg = "순번대기 시스템을 종료 되었습니다.";
			
			$.speakTTS(reset_msg);
			console.log(reset_msg);
			startInterval();
		});
		
		$('#stop').on('click', function(e) {
			e.preventDefault();
			if (intervalId !== null) {
				clearInterval(intervalId);
				intervalId = null;
				
				let stop_msg = "순번대기 시스템을 종료 되었습니다.";
				
				$.speakTTS(stop_msg);
				console.log(stop_msg);
			}
		});
		
		$('#speakButton').on('click', function(e){
			e.preventDefault();
			let v_nm = "홍길동" + $("#p_num").val();
			$.speakTTS(v_nm + "님 안으로 들어오세요.");
		});
		
		let num = 0;
		let intervalId = null; // intervalId를 저장할 변수

		// interval을 시작하는 함수
		function startInterval() {
			if (intervalId === null) { // 이미 실행 중인 interval이 없을 때만 실행
				intervalId = window.setInterval(function() {
					num = num + 1;
					console.log('순번 ' + num);
					$("#p_num").val(num);
					
					$('#speakButton').click();
					
					// num이 5 되면 clearInterval로 반복 종료
					if (num === 5) {
						console.log('종료');
						clearInterval(intervalId); // setInterval 종료
						intervalId = null; // intervalId를 초기화하여 상태 관리
					}
				}, 5000);
			} else {
				console.log('이미 실행 중입니다.');
			}
		}
	});
	
</script>
</body>
</html>
반응형
저작자표시

'Program Language > JavaScript & Jquery' 카테고리의 다른 글

[JS] 자바스크립트 비밀번호 검증 정규식 8자이상 12자이하 영문, 숫자, 특수문자 조합  (0) 2024.03.22
JQuery checkbox 컨트롤  (0) 2023.12.04
[javascript/select2] bootstrap select2 선택값 변경  (0) 2023.09.13
[bootstrap] ESC 또는 클릭 시 Modal 닫힘 방지  (0) 2023.06.15
새로고침 감지  (0) 2023.06.12
'Program Language/JavaScript & Jquery' Related Articles more