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

vueuse · Jul 13, 2022 · 2a0190c · 2a0190c
1 parent dea9961
commit 2a0190c
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 17 deletions.
diff --git 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<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) {
   // 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>

diff --git a/packages/core/useSpeechSynthesis/index.ts b/packages/core/useSpeechSynthesis/index.ts
@@ -7,8 +7,6 @@ import { defaultWindow } from '../_configurable'
 
 export type Status = 'init' | 'play' | 'pause' | 'end'
 
-export type VoiceInfo = Pick<SpeechSynthesisVoice, 'lang' | 'name'>
-
 export interface SpeechSynthesisOptions extends ConfigurableWindow {
   /**
    * Language for SpeechSynthesis
@@ -31,7 +29,7 @@ export interface SpeechSynthesisOptions 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.
    *
@@ -61,11 +59,6 @@ export function useSpeechSynthesis(text: MaybeRef<string>, options: SpeechSynthe
   const isPlaying = ref(false)
   const status = ref<Status>('init')
 
-  const voiceInfo = {
-    lang: options.voice?.lang || 'default',
-    name: options.voice?.name || '',
-  }
-
   const spokenText = ref(text || '')
   const lang = ref(options.lang || 'en-US')
   const error = shallowRef(undefined) as Ref<SpeechSynthesisErrorEvent | undefined>
@@ -76,8 +69,7 @@ export function useSpeechSynthesis(text: MaybeRef<string>, options: SpeechSynthe
 
   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
@@ -149,7 +141,6 @@ export function useSpeechSynthesis(text: MaybeRef<string>, options: SpeechSynthe
     isSupported,
     isPlaying,
     status,
-    voiceInfo,
     utterance,
     error,