안녕하세요? 김성중입니다.
Google Web Speech API를 테스트하던 중, STT를 통해 변환된 텍스트를 획득하기 위한 방법으로 Selection을 사용하였습니다. Selection(MSDN은 TextRange)은 웹 페이지에서 텍스트 조작을 하고자 할 때, 마우스를 이용해 드래그를 하거나 글자 위에서 더블 클릭을 하는 이벤트를 자바스크립트 영역에서 획득할 수 있게 해주는 Web API입니다.
예제 코드를 실행해보고 콘솔에서 선택된 텍스트를 직접 확인해 보세요.
Selection은 window.getSelection()이나 다른 메소드의 호출로 생성되는 객체입니다. 그리고 이러한 Selection 객체는 사용자가 선택한 ‘range’로 표현됩니다. 보통 한 개의 range만 갖고 있고, 다음과 같은 코드로 가져올 수 있습니다.
var selObj = window.getSelection(); // Selection 객체
var range = selObj.getRangeAt(0); // Range 객체
선택된 값은 Selection 객체의 toString()을 호출해서 가져올 수 있습니다.
저는 Web Speech API를 통해 사용자가 입력한 음성을 텍스트로 변환(Speech-To-Text, STT)한 다음, 해당 텍스트를 획득하기 위해 Selection 객체를 사용하였습니다.
if (window.getSelection) {
window.getSelection().removeAllRanges();
var range = document.createRange();
range.selectNode(document.getElementById('final_span'));
window.getSelection().addRange(range);
}
위 코드는 음성 인식이 종료되었을 때 호출되는 코드입니다. 윈도우에 텍스트가 존재할 경우, 전체 텍스트를 삭제하고, range 객체를 새로 생성하여 Selection에 지정해주는 코드입니다. 이러한 방법으로 웹에서 Selection객체와 Range 객체를 사용하면 사용자를 대신해서 특정 텍스트 영역을 선택, 삭제 할 수 있고, 사용자가 임의로 선택한 영역의 텍스트도 가져올 수 있습니다.
감사합니다.