잘 알려지지 않은 HTML5 음성 합성 기능

들어보면 재생되는 소리가 미리 녹음된 오디오 자료가 아닌, 텍스트 인식을 통해 합성된 음성임을 알 수 있습니다.

먼저 헤드폰을 착용하신 후 크롬 콘솔에 다음 코드를 복사하여 체험해 보세요~

 let msg = new SpeechSynesisUtterance(내 블로그를 읽어주신 것을 환영합니다);window.speechSynesis.speak(msg);

보세요, 프런트 엔드에서 음성 합성을 구현하는 것은 어렵지 않습니다

위의 예를 보면 위에서 호출한 두 메소드의 기능을 짐작할 수 있습니다.

 SpeechSyntehesisUtterancwindow.speechSynesis.speak

물론 음성 합성에는 이 두 가지 API만 포함되는 것이 아니라 이 두 가지 API부터 시작해 보겠습니다.

참조:developer.mozilla.org/en-US/docs/… SpeechSyntehesisUtteranc 개체에는 음성 서비스에서 읽을 콘텐츠와 언어, 음조 및 볼륨과 같은 일부 매개 변수가 포함되어 있습니다.

 SpeechSyntehesisUtteranc()SpeechSynesisUtterance.langSpeechSynesisUtterance.pitchSpeechSynesisUtterance.rateSpeechSynesisUtterance.voiceSpeechSynesisUtterance.volume

참고: 위의 속성은 모두 읽고 쓸 수 있습니다! 아래 코드를 복사하여 시도해 보세요. 댓글에 지침이 있습니다.

 let msg = new SpeechSynesisUtterance();msg.text = 잘 지내세요 // 합성할 텍스트 msg.lang = en-US // 미국식 영어 발음 (기본적으로 자동 선택됨) msg.rate = 2 // 2배속 (기본값) 1, 범위 0.1~10) msg.pitch = 2 // 높은 피치(숫자가 클수록 선명하며, 기본값은 1, 범위 0~2) msg.volume = 0.5 // 볼륨 0.5배(기본값은 1, 범위 0~1) window.speechSynesis.speak(msg);

동시에 이 객체는 다음과 같은 일련의 이벤트에 응답할 수도 있습니다.

• 시작
• 끝
• 경계
• 정지시키다
• 재개하다

이러한 이벤트의 도움으로 영어 문장의 단어 수 계산과 같은 몇 가지 간단한 기능을 완료할 수 있습니다.

 let count = 0; // 단어 수 let msg = new SpeechSynesisUtterance();let synth = window.speechSynesis;msg.addEventListener('start',()=>{ // 읽기 시작 console.log(`텍스트 내용: $ {msg.text}`); console.log(start);});msg.addEventListener('end',()=>{ // 읽기 끝 console.log(end); console.log(`텍스트 단어 수(단어): ${count}`) count = 0;});msg.addEventListener('boundary',()=>{ // 단어 개수 count++;});

시도해 보면 중국어는 공백을 사용하여 각 단어를 구분하지 않기 때문에 자동으로 인식됩니다. 예를 들어, Welcome to Readers는 Welcome과 Reader라는 두 단어로 인식됩니다.

참조:developer.mozilla.org/en-US/docs/…

SpeechSyntehesisUtteranc에 대해 이야기한 후 SpeechSynthesis를 살펴보겠습니다.

SpeechSynesis의 주요 기능은 시작 또는 일시 중지와 같은 음성에 대한 일련의 제어를 수행하는 것입니다.

음성 상태를 나타내는 세 가지 읽기 전용 속성이 있습니다.

 음성 합성.일시 중지됨음성 합성.보류 중

음성을 조작하는 방법에는 여러 가지가 있습니다.

•SpeechSynesis.speak()는 음성 읽기를 시작하고 동시에 시작 이벤트를 트리거합니다.

•SpeechSynesis.pause()는 일시 중지하고 일시 중지 이벤트를 트리거합니다.

•SpeechSynesis.resume()은 계속 진행되면서 동시에 재개 이벤트를 트리거합니다.

•SpeechSynesis.cancel()은 읽기를 취소함과 동시에 종료 이벤트를 트리거합니다.

이러한 작업 방법을 기반으로 텍스트 리더를 더욱 향상시킬 수 있습니다.

위의 내용을 바탕으로 일부 웹사이트에서는 기사 자동 읽기가 어떻게 구현되는지 짐작할 수 있습니다.

이 웹 사이트의 프런트 엔드가 MVVM 프레임워크(예: Vue)를 사용하는 경우 기사 콘텐츠는 데이터에 저장될 수 있으며, 이는 필요한 음성 합성을 구성하는 데 사용될 수 있습니다.

물론, Ajax 요청을 통해 기사를 얻고, 요청된 데이터를 파싱하여 음성 합성 객체를 구성하는 것도 가능하다.

기사를 HTML로 직접 작성한 경우에는 다음과 같은 혼란스러운 구조라도 테스트 후 DOM을 구문 분석해야 합니다.

 <div id=테스트> <p>1</p> <p>2</p> <ul> <li>3</li> <li>4</li> </ul> <테이블> <tr > <td>5</td> <td>6</td> </tr> <tr> <td>7</td> <td>8</td> </tr> </table> <img src=https://www.baidu.com/img/bd_logo1.png 9</div>

innerText를 통해 직접 텍스트를 읽은 후 음성합성 객체를 구성하고, 원하는 순서대로 읽을 수도 있습니다. (그림은 무시됩니다.)

물론 테이블과 같은 일부 특수 구조를 무시하려면 원하지 않는 데이터나 DOM 요소를 구문 분석하고 필터링하는 데 약간의 에너지를 소비할 수 있습니다.

무슨 일이 있어도 우리는 적합한 해결책을 찾을 수 있습니다~

이 기능은 아직 초안 단계이며 광범위하게 지원되지 않습니다.

다시 말하지만, 이 API는 아직 프로덕션 환경에 적용할 수 없습니다.

현재 가장 일반적인 접근 방식은 백엔드에서 텍스트를 음성 파일로 합성한 다음 이를 프런트엔드에서 미디어로 재생하는 API(아마도 타사 API)를 구성하는 것입니다.

한번은 혼란스러울 때 전문가들의 글을 읽고 프론트엔드 개발에 대한 선배들의 생각을 읽은 적이 있습니다. 한 가지가 나에게 깊은 인상을 남겼습니다.

프런트 엔드는 사용자에게 가장 가깝습니다. 모든 것을 사용자 관점에서 고려해야 합니다. 배리어프리(Barrier-Free) 사용도 매우 중요한 문제입니다. 비록 이러한 기능이 가져오는 이점은 다른 기업에 비해 훨씬 적지만, 사용자에게 더 나은 서비스를 제공하기 위해서는 더 많은 노력을 기울일 가치가 있는 것이기도 합니다.

위 내용은 에디터가 소개한 잘 알려지지 않은 HTML5 음성합성 기능입니다. 궁금한 사항이 있으시면 메시지를 남겨주시면 에디터가 시간 맞춰 답변해드리겠습니다!