fix(useSpeechSynthesis): remove duplicated onend, fix demo (#1941)

vueuse · Jul 17, 2022 · a524b37 · a524b37
1 parent 6202b6e
commit a524b37
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 12 deletions.
diff --git a/packages/core/useSpeechSynthesis/demo.vue b/packages/core/useSpeechSynthesis/demo.vue
@@ -1,22 +1,18 @@
 <script setup lang="ts">
-import { onMounted, ref, watch } from 'vue'
+import { onMounted, ref } from 'vue'
 import { useSpeechSynthesis } from '@vueuse/core'
 
-const voice = ref<SpeechSynthesisVoice>({ lang: 'en-US' } as SpeechSynthesisVoice)
+const voice = ref<SpeechSynthesisVoice>(undefined as unknown as SpeechSynthesisVoice)
 const text = ref('Hello, everyone! Good morning!')
 
 const speech = useSpeechSynthesis(text, {
-  lang: voice.value.lang,
+  voice,
 })
 
 let synth: SpeechSynthesis
 
 const voices = ref<SpeechSynthesisVoice[]>([])
 
-watch(voice, (newVoice) => {
-  speech.utterance.value.voice = newVoice
-})
-
 onMounted(() => {
   if (speech.isSupported.value) {
   // load at last

diff --git a/packages/core/useSpeechSynthesis/index.ts b/packages/core/useSpeechSynthesis/index.ts
@@ -98,11 +98,6 @@ export function useSpeechSynthesis(text: MaybeComputedRef<string>, options: UseS
     utterance.onerror = (event) => {
       error.value = event
     }
-
-    utterance.onend = () => {
-      isPlaying.value = false
-      utterance.lang = unref(lang)
-    }
   }
 
   const utterance = computed(() => {
@@ -126,6 +121,12 @@ export function useSpeechSynthesis(text: MaybeComputedRef<string>, options: UseS
         utterance.value.lang = lang
     })
 
+    if (options.voice) {
+      watch(options.voice, () => {
+        synth!.cancel()
+      })
+    }
+
     watch(isPlaying, () => {
       if (isPlaying.value)
         synth!.resume()