feat(useSpeechSynthesis): add reactivity for pitch and rate (#3205)

packages/core/useSpeechSynthesis/demo.vue

@@ -4,9 +4,13 @@ import { useSpeechSynthesis } from '@vueuse/core'
 
 const voice = ref<SpeechSynthesisVoice>(undefined as unknown as SpeechSynthesisVoice)
 const text = ref('Hello, everyone! Good morning!')
+const pitch = ref(1)
+const rate = ref(1)
 
 const speech = useSpeechSynthesis(text, {
   voice,
+  pitch,
+  rate,
 })
 
 let synth: SpeechSynthesis
@@ -76,6 +80,22 @@ function stop() {
         <i i-carbon-chevron-down absolute right-2 opacity-80 pointer-events-none />
       </div>
 
+      <br>
+      <div inline-flex items-center>
+        <label class="font-bold mr-2">Pitch</label>
+        <div class="mt-1" inline-flex>
+          <input v-model="pitch" type="range" min="0.5" max="2" step="0.1">
+        </div>
+      </div>
+
+      <br>
+      <div inline-flex items-center>
+        <label class="font-bold mr-3">Rate</label>
+        <div class="mt-1" inline-flex>
+          <input v-model="rate" type="range" min="0.5" max="2" step="0.1">
+        </div>
+      </div>
+
       <div class="mt-2">
         <button
           :disabled="speech.isPlaying.value"

packages/core/useSpeechSynthesis/index.ts

@@ -20,13 +20,13 @@ export interface UseSpeechSynthesisOptions extends ConfigurableWindow {
    *
    * @default 1
    */
-  pitch?: SpeechSynthesisUtterance['pitch']
+  pitch?: MaybeRefOrGetter<SpeechSynthesisUtterance['pitch']>
   /**
    * Gets and sets the speed at which the utterance will be spoken at.
    *
    * @default 1
    */
-  rate?: SpeechSynthesisUtterance['rate']
+  rate?: MaybeRefOrGetter<SpeechSynthesisUtterance['rate']>
   /**
    * Gets and sets the voice that will be used to speak the utterance.
    */
@@ -71,8 +71,8 @@ export function useSpeechSynthesis(text: MaybeRefOrGetter<string>, options: UseS
   const bindEventsForUtterance = (utterance: SpeechSynthesisUtterance) => {
     utterance.lang = toValue(lang)
     utterance.voice = toValue(options.voice) || null
-    utterance.pitch = pitch
-    utterance.rate = rate
+    utterance.pitch = toValue(pitch)
+    utterance.rate = toValue(rate)
     utterance.volume = volume
 
     utterance.onstart = () => {