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>
