speechsynthesis 예제

음성합성통은 음성 요청을 나타냅니다. 위의 예에서 우리는 그것을 문자열을 전달했습니다. 브라우저가 소리 내어 읽어야 하는 메시지입니다. 볼륨 속성을 사용하면 음성의 볼륨을 조정할 수 있습니다. 0과 1 사이의 부동 부동 값을 여기에 지정해야 합니다. 기본값은 1입니다. 이 코드는 주 요소의 텍스트 콘텐츠(textContent)를 잡고 SpeechSynthesisUtterance로 변환합니다. 그런 다음 신디사이저를 트리거하여 해당 콘텐츠를 말합니다. 충분히 간단합니다.

10.11에서 작동하는 것 같습니다. 10.10 특정 웹킷 버그가 될 수 있을까요? addEventListener()를 사용 하거나 이 인터페이스의 oneventname 속성에 이벤트 수신기를 할당 하 여이 이벤트를 들어 보십시오. 이 게시물에서는 음성 합성 API를 사용하여 웹 응용 프로그램에 음성을 제공하는 방법을 배웠습니다. CodePen에서 데모를 포크하고 코드를 가지고 놀기를 강력히 권장합니다. 브라우저에서 지원하는 음성 목록을 얻으려면 speechSynthesis.getVoices() 메서드를 사용할 수 있습니다. 그러면 선택할 수 있는 SpeechSynthesisVoice 개체 목록이 반환됩니다. 내 관심의 많은 웹상호 작용의 새로운 방법으로 실험하는 내 자신의 개인적인 욕망에서 유래. 나는 또한 팟 캐스트의 큰 팬이고 내가 운전하는 동안 좋은 콘텐츠를 듣고 사랑하고 내 눈이 다른 곳에서 필요하거나 단순히 읽기에 너무 피곤 다른 상황에서. Web Speech API는 자연어로 듣고 응답할 수 있게 됨으로써 매우 유용하고 자연스러운 사용자 상호 작용을 만들 수 있는 모든 기회를 열어줍니다. 이 코드는 재생 단추와 일시 중지 단추를 만들고 문서에 추가합니다. 또한 해당 이벤트 처리기를 할당합니다.

당신이 기대하는 바와 같이, 재생 버튼은 speechSynthesis.speak () 호출, 우리는 앞에서 본 대로,하지만 일시 정지도 재생에 있기 때문에, 나는 음성이 일시 중지되는 경우 – speechSynthesis.resume()를 사용하여 – 선택한 텍스트를 말하거나 말하기를 다시 시작하도록 설정합니다. 일시 중지 단추는 speechSynthesis.pause()를 트리거하여 제어합니다. 일시 중지된 부울 변수를 사용하여 음성 엔진의 상태를 추적했습니다. CodePen에서 이 코드의 타이어를 걷어차면 됩니다. lang 특성을 사용하면 텍스트의 언어를 지정할 수 있습니다. 이 기본값은 HTML 문서의 언어입니다. 복사하여 브라우저 콘솔에 붙여 넣은 후 컴퓨터가 말하면 됩니다! 그런 다음, 나는 그것이 변경될 때 추적하고 음성 신디사이저를 업데이트하는 이벤트 리스너를 추가 : 합성 API의 가장 기본적인 사용은 speechSynthesis.speak () 및 발언을 전달하는 것입니다 : 모든 SpeechSynthesisUtterance 객체는 당신이 연결할 수있는 이벤트의 소수를 제공합니다 다양한 일을 할 수 있습니다. 당신이 기대하는 바와 같이, 연설이 일시 중지 될 때 onpause 화재, 신디사이저가 그것을 읽기 완료 하면 화재, 등. 이들 각각에 전달된 SpeechSynthesisEvent 개체에는 가상 커서(charIndex)의 위치와 같은 신디사이저에 무슨 일이 일어나고 있는지에 대한 정보가 포함되어 있으며, 현재 SpeechSynthesisUtterance가 읽기 시작한 후의 시간() 경과시간) 및 SpeechSynthesisUtterance 자체(발언)에 대한 참조입니다. 익숙하지 않은 경우 이 API를 사용하면 (개발자가) 음성 인식 인터페이스를 통해 사용자의 의견을 듣고 SpeechSynthesis 인터페이스를 통해 다시 대화하는 두 가지 방향으로 웹 사이트를 음성으로 활성화할 수 있습니다.