Web Speech Synthesis and Recognition API를 사용하여 웹에서 음성 실험
Web Speech API는 아무도 말하거나 글을 쓰지 않는 웹 기술 중 하나입니다. 이 블로그 게시물에서는 API의 기능, 한계 및 강점, 웹 개발자가 사용자의 브라우징 경험을 향상 시키기 위해 이를 활용할 수 있는 방법에 대해 자세히 살펴 보겠습니다.
https://www.voorhoede.nl/en/blog/exploring-the-web-speech-api/
“Web Speech API를 사용하면 음성 데이터를 웹 앱에 통합 할 수 있습니다. Web Speech API는 두 부분으로 구성됩니다.
SpeechSynthesis (텍스트 음성 변환) 및 SpeechRecognition (비동기 음성 인식)”— Mozilla 개발자 네트워크
Web Speech API를 사용하여 복잡한 웹 양식과 상호 작용할 수 있습니까?
이 블로그 게시물에 대한 조사 질문이며 API의 두 부분을 모두 사용하여 답변을 드리겠습니다. 그러나 스스로 앞서 나가지 말고 API가 실제로 어떻게 작동하는지 배우면서 시작합시다.
음성 합성으로 브라우저와 대화하기
참고 : 왼쪽 : Microsoft Edge | 오른쪽 : Chrome
데모 : https://experiment-web-speech.now.sh/pages/blog.html
Speech Utterance를 사용하여 브라우저의 음성 제어
Speech Synthesis API를 사용하여 이전 블로그 게시물 중 하나를 읽을 것입니다. speechSynthesis 인터페이스는 서비스 컨트롤러입니다. 이 인터페이스를 사용하여 사용자 기기에서 사용 가능한 합성 음성을 검색하고 음성을 재생 및 일시 중지하는 등의 작업을 수행 할 수 있습니다.
SpeechSynthesisUtterance 인터페이스는 음성 요청을 나타냅니다. speechSynthesis 서비스가 읽을 텍스트를 포함하고 음성 피치, 음량, 언어 및 속도와 같은 기본 정보를 포함합니다.
const speechSynthesis = speechSynthesis;
const speechUtterance = new SpeechSynthesisUtterance();
function isPreferredVoice(voice) {
return ["Google US English", "Microsoft Jessa Online"].any(preferredVoice =>
voice.name.startsWith(preferredVoice)
);
}
function onVoiceChange() {
speechSynthesis.addEventListener("voiceschanged", () => {
const voices = speechSynthesis.getVoices();
speechUtterance.voice = voices.find(isPreferredVoice);
speechUtterance.lang = "en-US";
speechUtterance.volume = 1;
speechUtterance.pitch = 1;
speechUtterance.rate = 1;
});
}웹 사이트가 완전히 로드되면 speechSynthesis API가 사용 가능한 모든 음성을 비동기 적으로 가져옵니다. 완료되면 모든 것이 준비되었음을 알리는 음성 변경 이벤트가 시작됩니다. 이 이벤트가 시작되기 전에 대기열에 추가 된 어터런스가 계속 작동합니다. 그러나 기본 설정으로 브라우저의 기본 음성을 사용합니다.
getVoices() 메소드는 로드 된 모든 음성을 반환합니다. 이 목록에는 기본 음성과 브라우저별 음성이 모두 포함됩니다. 모든 브라우저가 Chrome 및 Microsoft Edge에서 제공하는 맞춤형 음성 서비스를 제공하지는 않습니다. 일반적으로 말하면,이 음성은 훨씬 나아지지만 품질에 대한 프라이버시는 희생됩니다. 또한 인터넷 연결이 필요합니다.
경고 : Chrome의 맞춤 음성 서비스를 사용하는 동안 각 발언 인스턴스의 글자 수는 200-300 자로 제한됩니다. 발화의 텍스트가 변경되면 한도가 재설정됩니다. 이것이 제한인지 버그인지는 알 수 없습니다.
위의 함수는 voiceschanged 이벤트가 시작되면 SpeechSynthesisUtterance 인스턴스를 설정합니다. Array.find() 메서드를 사용하여 원하는 음성을 선택하여 정상적으로 브라우저의 기본값으로 돌아갑니다.
.speak()로 내용 읽기
function onPlay() {
playButton.addEventListener("click", () => {
speechSynthesis.cancel();
speechUtterance.text = getElementText(blogPost);
speechSynthesis.speak(speechUtterance);
});
function getElementText(element) {
return Array.from(element.children)
.map(item => item.textContent.trim())
.map(addPunctuation)
.join("");
}
function addPunctuation(text) {
const hasPunctuation = /[.!?]$/.test(text);
return hasPunctuation ? text : text + ". ";
}
}모든 것이 준비되고 구성되었으므로 speechSynthesis가 큰 소리로 읽을 수 있는 내용이 필요합니다. getElementText 함수는 블로그 게시물을 반복하여 각 요소의 컨텐츠를 단일 문자열로 연결합니다.
addPunctuation 함수를 보셨을 것입니다. 이 함수는 speechSynthesis 인터페이스가 각 문장마다 일시 정지를 추가하도록 합니다.
전체 브라우저 창에서 speechSynthesis API를 고정시킬 수 있는 드문 Chrome 버그가 있습니다. speak() 메소드 전에 cancel() 메소드를 실행하면 항상 API가 고정 해제됩니다. 마지막으로 SpeechSynthesisUtterance 텍스트를 getElementText 값으로 설정하고 모든 것을 이벤트 리스너에 바인딩 합니다.
if (speechSynthesis && speechUtterance) {
onVoiceChange();
onPlay();
}이제 두 인터페이스가 모두 지원되는지 확인하면 됩니다.
SpeechSynthesis는 IE를 제외한 모든 주요 브라우저에서 지원됩니다
음성 인식으로 사용자 듣기
참고 :이 실험에는 Chrome이 필요합니다.
데모 : https://experiment-web-speech.now.sh/
음성 명령을 사용하여 웹 사이트를 탐색하는 것이 좋지 않습니까? 예, 그래야 하겠습니다! SpeechRecognition을 사용하여 이를 쉽게 달성 할 수 있습니다. 이 데모에서는“검색…”,“…로 이동”및“…로 이동”이라는 세 가지 음성 명령을 작성합니다. 마지막 두 개는 동일합니다. API는 지속적으로 새로운 명령을 수신하고 각 명령에 따라 반응합니다.
const SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
if (SpeechRecognition) {
const recognition = new SpeechRecognition();
recognition.lang = "en-US";
recognition.continuous = true;
recognition.interimResults = false;
}사용자 기기가 SpeechRecognition API를 지원하는 경우 바로 구성합니다. 이전 명령을 구문 분석 한 후 API가 새 명령을 계속 수신하기를 원합니다. 연속을 true로 설정하면 원하는 결과를 얻을 수 있습니다. 사용 사례의 경우 중간 결과를 받지 않고 최종 인식 만 필요합니다. interimResults를 false로 설정했습니다. lang 속성은 그 자체를 말합니다.
음성 명령 실행
유효한 모든 명령을 추적하고 관리하기 위해 명령이라는 객체에 저장합니다.
const commands = {
"search for": term => (searchInput.value = term),
"navigate to": destination => navigateTo(destination),
"go to": destination => navigateTo(destination)
};
function navigateTo(destination) {
const destinationLocations = {
home: "/",
homepage: "/",
contact: "/contact",
blog: "/blog"
};
const location = destinationLocations[destination];
if (location) {
window.location.href = location;
} else {
console.log(`Unknown destination: '${destination}'`);
}
}각 명령에는 콜백 기능이 있습니다. 이 함수는 인식 된 나머지 음성을 포함하는 매개 변수를 수신합니다. 즉, 사용자가 "연락처로 이동"이라고 하면 "내비게이션"명령이 실행되고 콜백 함수가 문자열 연락처를 매개 변수로 받습니다.
function onSpeechRecognitionEvents() {
recognition.addEventListener("result", event => {
if (typeof event.results === "undefined") return;
const transcript = event.results[event.results.length - 1][0].transcript
.toLowerCase()
.trim();
for (let command in commands) {
if (transcript.indexOf(command) === 0) {
if (transcript[command.length] === undefined) {
commands[command]();
} else {
const param = transcript
.substring(command.length, transcript.length)
.trim();
commands[command](param);
}
}
}
});
}API가 일부 사용자 입력의 전사를 완료하면 SpeechRecognition의 결과 이벤트가 발생합니다. event.result 배열은 반환 된 모든 결과를 추적하므로 마지막 배열 항목은 가장 최근에 인식 된 대화 내용입니다.
그런 다음 명령 객체를 반복하고 인식 된 대화 내용이 듣고 있는 내용인지 확인해야 합니다. 만약 그렇다면, 명령이 매개 변수를 받았는지 확인하고, 두 경우 모두 명령의 콜백 함수를 호출합니다.
if (SpeechRecognition) {
onSpeechRecognitionEvents();
recognition.start();
}이제 이벤트 리스너를 초기화하고 speechRecognition.start()를 호출하여 사용자 명령 청취를 시작할 준비가 되었습니다.
모든 것을 하나로 모으기
참고 :이 실험에는 Chrome이 필요합니다.
데모 : https://experiment-web-speech.now.sh/pages/contact.html
최종 데모를 위해 두 가지 인터페이스를 결합하여 사용자가 웹 양식을 작성하는 경험을 향상 시키고 자했습니다. 사용자가 입력 필드, 텍스트 영역 또는 버튼에 초점을 맞추면 speechSynthesis를 사용하여 관련 레이블을 소리내어 읽게 됩니다. 그런 다음 사용자는 자신의 음성을 사용하여 양식을 작성할 수 있습니다.
이전 두 데모에서 필요한 코드를 대부분 추출 했으므로 모든 내용을 자세히 설명하지는 않습니다. 그러나 해당되는 경우 새로운 개념이나 해결 방법을 설명하겠습니다.
function speak(message) {
if (speechSynthesis.speaking) {
speechSynthesis.cancel();
}
speechUtterance.text = message;
speechSynthesis.speak(speechUtterance);
}폼 요소가 포커스 될 때마다 위의 함수가 호출됩니다. 메시지 매개 변수는 연관된 레이블과 같습니다. speechSynthesis.cancel(); 대기열에 새 발언을 추가하는 대신 현재 발언을 교체해야 합니다. 사용자가 탭 키를 사용하여 입력 필드를 건너 뛰는 경우에 중요합니다.
function onSpeechUtteranceEvents() {
speechUtterance.addEventListener("end", () => {
speechRecognition.abort();
speechRecognition.start();
});
}SpeechRecognition 및 speechSynthesis 인터페이스는 동시에 활성화 된 경우가 아니라도 함께 작동하지 않습니다. 이상한 버그와 원치 않는 결과를 방지하기 위해, 우리는 speechSynthesis 인터페이스가 말을 마친 후에 만 사용자의 입력을 기록하기 시작합니다.
결론
Web Speech API는 강력하고 다소 활용되지 않습니다. 그러나 몇 가지 성가신 버그가 있으며 SpeechRecognition 인터페이스가 제대로 지원되지 않습니다. 연설 모든 기발한 문제와 문제를 다 해결하면 놀랍게도 잘 작동합니다. 일부 브라우저는 사용자 지정 음성을 제공하며 이 음성은 기본 음성보다 더 잘 들립니다. 품질은 브라우저마다 다릅니다. 예를 들어, Microsoft Edge는 Chrome에 비해 훨씬 자연스럽습니다.
SpeechRecognition은 짧은 문장에 적합합니다. 결과는 더 긴 단락과 일치하지 않는 경향이 있습니다. SpeechRecognition은 전자 메일 주소 및 전화 번호와 같은 더 복잡한 문자 시퀀스를 인식하는데도 매우 나쁩니다. 따라서 Web Speech API는 웹 양식과 상호 작용하기에 적합하지 않다고 말해야 합니다. 그러나 창의력이 충분하다면 사용 사례가 있습니다.
등록된 댓글이 없습니다.
