Live Demo
Google Voice 음성 지원은 방문자가 목소리와 함께 웹을 검색하고 읽을 수 있게 해줍니다. 이 포스팅에서는 블로그에 음성 안내 지원 기능을 추가하는 방법에 대해 알려드리겠습니다.
구글 블로그에 음성 안내 기능 추가 방법.
Blogger를 열고 테마 > HTML 편집 을 클릭 한 다음 아래 단계를 따릅니다.
STEP 1
먼저 재생, 멈춤 아이콘을 사용하기 위해 FontAwesome 코드를 삽입합니다.
Ctrl + F로 검색하여 <head> 코드를 찾으십시오.
검색한 코드 아래에 다음 link 코드를 복사하여 붙여 넣으십시오.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
STEP 2
다음으로 CSS로 버튼의 색상, 크기 및 위치를 조절합니다.
Ctrl + F 로 ]]></b:skin> 또는
</style> 를 검색하여
검색한 코드 위에 다음 CSS 코드를 붙여넣기 후 배치합니다.
.btnvoice{margin:0;overflow:hidden;position:relative}
.btnvoice button.voice-button,.btnvoice button.voice-stop{padding:0 5px;font-size:13px;background:none;outline:0;cursor:pointer}
.btnvoice button.voice-button{color:#555;border:none;border-radius:0}
.btnvoice button.voice-stop{color:#ff5f02;border:none;border-radius:0}
STEP 3
다음으로 음성 안내 기능 지원을 위한 script 코드를 삽입합니다.
Ctrl + F로 검색하여 </body> 코드를 찾으십시오.
검색한 코드 위에 다음 script 코드를 복사하여 붙여 넣으십시오.
<script src="https://code.responsivevoice.org/responsivevoice.js?key=IpsVaOl2"></script>
STEP 4
다음으로 HTML 편집 페이지에서 나가십시오.
Blogger
대시보드 > 새 글 > 글: 수정 페이지에서 아래 코드를
복사하여 원하는 곳에 배치합니다.
<center>
<span class="btnvoice">
<h3>Live Demo</h3>
<button class="voice-button" onclick="responsiveVoice.speak(document.querySelector('.text-on-voice').textContent, 'Korean Female');" title="Play"><i aria-hidden="true" class="far fa-play-circle"></i> Voice</button>
<button class="voice-stop" onclick="responsiveVoice.cancel();" title="Stop"><i aria-hidden="true" class="far fa-stop-circle"></i> Stop</button>
</span>
</center>
<div class="text-on-voice">
<!--이곳에 텍스트를 입력하세요. 텍스트가 있는 영역의 class 명과 document.querySelector의 class 명이 동일 하지 않다면 음성안내 기능이 동작하지 않습니다.-->
</div>
목소리 및 언어를 변경 하려면 'Korean Female' 을 변경 하십시오.
사용 가능한 옵션은
여기를 참고 하십시오.
전체 코드
전체 코드는 아래와 같습니다. 위 과정이 번거롭다면, 아래의 전체 코드를 붙여 넣기 후 배치 하십시오.
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.1/css/all.min.css" rel="stylesheet"/>
<center>
<span class="btnvoice">
<h3>Live Demo</h3>
<button class="voice-button" onclick="responsiveVoice.speak(document.querySelector('.text-on-voice').textContent, 'Korean Female');" title="Play"><i aria-hidden="true" class="far fa-play-circle"></i> Voice</button>
<button class="voice-stop" onclick="responsiveVoice.cancel();" title="Stop"><i aria-hidden="true" class="far fa-stop-circle"></i> Stop</button>
</span>
</center>
<div class="text-on-voice">
<!--이곳에 텍스트를 입력하세요. 텍스트가 있는 영역의 class 이름과 document.querySelector의 class 이름이 동일 하지 않다면 음성안내 기능이 동작하지 않습니다.-->
</div>
<style>
/* google voice */
.btnvoice{margin:0;overflow:hidden;position:relative}
.btnvoice button.voice-button,.btnvoice button.voice-stop{padding:0 5px;font-size:13px;background:none;outline:0;cursor:pointer}
.btnvoice button.voice-button{color:#555;border:none;border-radius:0}
.btnvoice button.voice-stop{color:#ff5f02;border:none;border-radius:0}
</style>
<script src="https://code.responsivevoice.org/responsivevoice.js?key=IpsVaOl2"></script>
Blogger에서 Google Voice 음성 안내 기능을 추가하는 방법에 대해 알아보았습니다. 도움이 되었기를 바랍니다. 감사합니다.