음성 합성 API 블록 주 스레드

Question

음성 합성 API를 사용하여 다른 단어 목록을 발음하고 있습니다. 내 앱은 캔버스를 통해 말하면서 단어를 안팎으로 움직입니다. 새로운 음성을 수행 할 때 :

var msg = new SpeechSynthesisUtterance(word); 
window.speechSynthesis.speak(msg); 

음성 단어가 주 스레드를 차단하여 일시적으로 애니메이션을 멈추는 것으로 나타났습니다. 이것은 window.speechSynthesis.speak();에 전화 할 때마다 발생합니다.

자바 스크립트에서 별도의 스레드에서 음성 합성을 실행하는 방법이 있나요? 그래서 메인 스레드의 애니메이션을 방해하지 않습니까?

Answer 1

내가 가짜 asynchronious 전화로의 setTimeout을 사용하십시오 (I 주로 크롬이를 테스트입니다) :

var msg = new SpeechSynthesisUtterance(word); 
setTimeout(function() { window.speechSynthesis.speak(msg); }, 1); 

나는 이것에 대해 확실하지 않다 인정해야합니다.

Answer 2

여기에 이어지는 방법은 텍스트 메시지에 해당하는 오디오를 재생하는 작업자 스레드를 사용하는 것입니다.

그러나 웹 작업자는 창 개체에 액세스 할 수 없습니다. 따라서 우리는 근로자 내부에서 직접 window.speechSythesis.speak 메서드를 호출 할 수 없습니다.

좋은 작품은 주위에 text-to-speech library from Francois Laberge 구현은

1. 텍스트를 작업자 스레드 얘기 할 수 보내기입니다.
2. 그러면 작업자 스레드는이 텍스트를 오디오 (WAV) 파일로 변환하고 주 스레드 인 WAV 파일을 반환합니다.
3. 작업자 스레드에서 메시지를받는 주 스레드는 오디오 요소를 사용하여 WAV 파일을 실행합니다.

내 생각에 더 나은 성능을 위해 작업자 풀을 만들 수 있습니다.

것은 here

Answer 3

난 정말 당신이 이벤트 루프과 일에 대해 필립 로버츠의 사랑스러운 요약을 볼 제안 데모에서 참조하시기 바랍니다 setTimeout 0 의미가 있습니다 이유 : 한마디로 https://www.youtube.com/watch?v=8aGhZQkoFbQ

을

setTimeout(function() { window.speechSynthesis.speak(msg); }, 0); 

여기