Text to Speech as a Vue hook

useTextToSpeech.js

import { onMounted, ref } from 'vue';

export default function useTextToSpeech() {
    const isLoading = ref(true);
    const isSupported = ref(null);
    const supportedVoices = ref([]);
    const message = ref(null);

    const checkIfSupported = () => {
        isLoading.value = true;
        if ('speechSynthesis' in window) {
            isSupported.value = true;
            message.value = new SpeechSynthesisUtterance();
            supportedVoices.value = window.speechSynthesis.getVoices();
        } else {
            isSupported.value = false;
        }
        isLoading.value = false;
    }

    onMounted(() => {
        checkIfSupported();
    });

    const say = (text) => {
        window.speechSynthesis.speak(text);
    }

    const setVoice = (voiceIndex) => {
        message.value.voice = supportedVoices.value[voiceIndex];
    }

    return {
        isLoading,
        isSupported,
        supportedVoices,
        setVoice,
        say
    }
}