From e1209b32156412a4cfaff55d07f4437ea1cbb3e6 Mon Sep 17 00:00:00 2001
From: sibbng <sibbngheid@gmail.com>
Date: Sun, 17 Jul 2022 19:13:03 +0300
Subject: [PATCH] fix(useSpeechSynthesis): remove duplicated `onend`, fix demo

---
 packages/core/useSpeechSynthesis/demo.vue | 10 +++-------
 packages/core/useSpeechSynthesis/index.ts | 11 ++++++-----
 2 files changed, 9 insertions(+), 12 deletions(-)

diff --git a/packages/core/useSpeechSynthesis/demo.vue b/packages/core/useSpeechSynthesis/demo.vue
index 3964319a9f5..923b841f265 100644
--- 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
index 35043410fdb..6ff3a12f2bd 100644
--- 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()