SpeechSynthesis doesn't work on any browser but iOS Safari [Vue]

Viewed 111

I wrote an component in Vue which allows to spell provided phrase on component click. Unfortunately, it works only on iOS Safari. Doesn't work on any other browser. When I console.log utterance it seems that it has all necessary options to make it work. I store informations about voice and SpeechSynthesis availability in Vuex. Everything works fine until synthesis.speak(...). Also event listeners (end) don't trigger. Assigning 1 to volume / rate / pitch also doesn't solve the problem.

What's wrong with my code?

const ON_SPEAK_END = "end";

export default defineComponent({
  props: {
    phrase: {
      type: String,
      required: true,
    },
  },
  setup(props) {
    const store = useStore();
    const isSpeechAvailable = computed(() => store.getters.getSpeechAvailable);
    const voice = computed(() => store.getters.getCurrentVoice);
    const fullPhrase = toFullPhrase(props.phrase);
    const utterance = new SpeechSynthesisUtterance();

    const toggleSpeakStatus = () => {
      // do sth
    };

    onMounted(() => {
      utterance.text = fullPhrase;
      utterance.lang = voice.value.lang;
      utterance.voice = voice.value;
      utterance.addEventListener(ON_SPEAK_END, toggleSpeakStatus);
    });

    onBeforeUnmount(() => {
      utterance.removeEventListener(ON_SPEAK_END, toggleSpeakStatus);
    });

    const speak = () => {
      if (!isSpeechAvailable.value) {
        return;
      }
      const synthesis = window.speechSynthesis;

      if (!synthesis.speaking) {
        // code works until this moment:
        synthesis.speak(utterance);
      }
    };

    return { speak, voice };
  },
});
</script>

console.logged example utterance instance

0 Answers
Related