diff --git a/packages/core/useSpeechSynthesis/demo.vue b/packages/core/useSpeechSynthesis/demo.vue index a4a82466bad..9a21caf5967 100644 --- a/packages/core/useSpeechSynthesis/demo.vue +++ b/packages/core/useSpeechSynthesis/demo.vue @@ -2,22 +2,22 @@ import { ref } from 'vue' import { useSpeechSynthesis } from '@vueuse/core' -const lang = ref('en-US') +const voices = ref([]) +const voice = ref() const text = ref('Hello, everyone! Good morning!') const speech = useSpeechSynthesis(text, { - lang, + voice, }) let synth: SpeechSynthesis -const voices = ref([]) - if (speech.isSupported.value) { // load at last setTimeout(() => { synth = window.speechSynthesis voices.value = synth.getVoices() + voice.value = voices.value[0] }) } @@ -57,7 +57,7 @@ const stop = () => {
- @@ -65,7 +65,7 @@ const stop = () => { v-for="(voice, i) in voices" :key="i" bg="$vt-c-bg" - :value="voice.lang" + :value="voice" > {{ `${voice.name} (${voice.lang})` }} diff --git a/packages/core/useSpeechSynthesis/index.ts b/packages/core/useSpeechSynthesis/index.ts index f171bcc1a88..b63fec48350 100644 --- a/packages/core/useSpeechSynthesis/index.ts +++ b/packages/core/useSpeechSynthesis/index.ts @@ -1,4 +1,4 @@ -import type { MaybeComputedRef } from '@vueuse/shared' +import type { MaybeComputedRef, MaybeRef } from '@vueuse/shared' import { resolveRef, tryOnScopeDispose } from '@vueuse/shared' import type { Ref } from 'vue-demi' import { computed, ref, shallowRef, unref, watch } from 'vue-demi' @@ -8,8 +8,6 @@ import { defaultWindow } from '../_configurable' export type Status = 'init' | 'play' | 'pause' | 'end' -export type VoiceInfo = Pick - export interface UseSpeechSynthesisOptions extends ConfigurableWindow { /** * Language for SpeechSynthesis @@ -32,7 +30,7 @@ export interface UseSpeechSynthesisOptions extends ConfigurableWindow { /** * Gets and sets the voice that will be used to speak the utterance. */ - voice?: SpeechSynthesisVoice + voice?: MaybeRef /** * Gets and sets the volume that the utterance will be spoken at. * @@ -62,11 +60,6 @@ export function useSpeechSynthesis(text: MaybeComputedRef, options: UseS const isPlaying = ref(false) const status = ref('init') - const voiceInfo = { - lang: options.voice?.lang || 'default', - name: options.voice?.name || '', - } - const spokenText = resolveRef(text || '') const lang = resolveRef(options.lang || 'en-US') const error = shallowRef(undefined) as Ref @@ -77,8 +70,7 @@ export function useSpeechSynthesis(text: MaybeComputedRef, options: UseS const bindEventsForUtterance = (utterance: SpeechSynthesisUtterance) => { utterance.lang = unref(lang) - - options.voice && (utterance.voice = options.voice) + utterance.voice = unref(options.voice) || null utterance.pitch = pitch utterance.rate = rate utterance.volume = volume @@ -150,7 +142,6 @@ export function useSpeechSynthesis(text: MaybeComputedRef, options: UseS isSupported, isPlaying, status, - voiceInfo, utterance, error,