본문 바로가기

Web Dev

JAVA 백엔드 api 자동 등록방지 코드 음성 출력 코딩

반응형

자동 등록방지 코드 

음성 출력 코딩 알려드립니다. 

우선 저기 수시로 바뀌는 자동등록방지 코드 값을 가져와야 하는데 

저의 경우는 이미 누군가가 만들어 놓은게 있어서 쉽게 값을 가져 올 수 있었습니다. 

Captcha captcha = (Captcha) req.getSession().getAttribute(Captcha.NAME);

뭐 어째든 해당 값이 105135 번이면 해당 값을 저기 스피커 모양의 버튼을 누르면 가져오면 되는 겁니다. 

controller 는 간단히 만들었습니다. 

[백엔드 api] 

	@RequestMapping("/captchaSound")
	@ResponseBody
	public String captchaSound(HttpServletRequest req, HttpServletResponse res) throws Exception{
		Captcha captcha = (Captcha) req.getSession().getAttribute(Captcha.NAME);		
		return captcha.getAnswer();
	}

 

[프론트엔드] 

// 내   용 : 사운드 버튼 클릭시 자동방지문자 숫자 발성 코드

$('.btn_sound').click(function() {

	$.ajax({
		  url: '/ud/captchaSound', // 백엔드 API의 URL
		  method: 'GET',
		  success: function(response) {
			  
		    var captchaValue = response; // 받은 응답에서 captcha 값을 가져옴

		    $("[name=wr_key]").focus();
		    
		    console.log("captchaValue : " + captchaValue);
		   
		    var arr_captchaValue = captchaValue.split("");
		    
		    console.log("arr_captchaValue : " + arr_captchaValue);
		    
		    for (var i = 0; i < arr_captchaValue.length; i++) {
		    	
		    	 var speech = new SpeechSynthesisUtterance(); // 음성 출력
		    	  
		    	  speech.text = arr_captchaValue[i];
				    
				  speech.lang = 'ko-KR'; // 음성 언어 설정 (한국어: 'ko-KR')
				    
				  speechSynthesis.speak(speech); // 음성 출력 실행 
		    	  
		    	}
		  },
		  error: function(xhr, status, error) {
		    console.log('요청 실패:', error);
		  }
		});
	});

음성 출력을 위해 브라우저가 지원하는 SpeechSynthesis API를 사용하고 있으므로, 해당 코드는 모든 웹 브라우저에서 작동하지는 않을 수 있습니다. 따라서, 최신 버전의 Chrome, Firefox, 또는 Safari와 같은 브라우저에서 테스트해 보시는 것이 좋습니다.

저는 방지문자를 문자열로 들고와서 숫자를 십만오천백삼십오 이렇게 읽길래 그냥 for 문 으로 나누어 읽도록 변환하였습니다. 

반응형