refactor(useSpeechSynthesis)!: remove voiceInfo, allow voice as ref

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<SpeechSynthesisVoice[]>([])
+const voice = ref()
 const text = ref('Hello, everyone! Good morning!')
 
 const speech = useSpeechSynthesis(text, {
-  lang,
+  voice,
 })
 
 let synth: SpeechSynthesis
 
-const voices = ref<SpeechSynthesisVoice[]>([])
-
 if (speech.isSupported.value) {
   // load at last
   setTimeout(() => {
     synth = window.speechSynthesis
     voices.value = synth.getVoices()
+    voice.value = voices.value[0]
   })
 }
 
@@ -57,15 +57,15 @@ const stop = () => {
       <label class="font-bold mr-2">Language</label>
       <div bg="$vt-c-bg" border="$vt-c-divider-light 1" inline-flex items-center relative rounded>
         <i i-carbon-language absolute left-2 opacity-80 pointer-events-none />
-        <select v-model="lang" px-8 border-0 bg-transparent h-9 rounded appearance-none>
+        <select v-model="voice" px-8 border-0 bg-transparent h-9 rounded appearance-none>
           <option bg="$vt-c-bg" disabled>
             Select Language
           </option>
           <option
             v-for="(voice, i) in voices"
             :key="i"
             bg="$vt-c-bg"
-            :value="voice.lang"
+            :value="voice"
           >
             {{ `${voice.name} (${voice.lang})` }}
           </option>

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<SpeechSynthesisVoice, 'lang' | 'name'>
-
 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<SpeechSynthesisVoice>
   /**
    * Gets and sets the volume that the utterance will be spoken at.
    *
@@ -62,11 +60,6 @@ export function useSpeechSynthesis(text: MaybeComputedRef<string>, options: UseS
   const isPlaying = ref(false)
   const status = ref<Status>('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<SpeechSynthesisErrorEvent | undefined>
@@ -77,8 +70,7 @@ export function useSpeechSynthesis(text: MaybeComputedRef<string>, 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<string>, options: UseS
     isSupported,
     isPlaying,
     status,
-    voiceInfo,
     utterance,
     error,