chore: update VolumeMeteringAvatar and docs

Author: jamsch

README.md

@@ -19,6 +19,8 @@ expo-speech-recognition implements the iOS [`SFSpeechRecognizer`](https://develo
 - [Transcribing audio files](#transcribing-audio-files)
   - [Supported input audio formats](#supported-input-audio-formats)
   - [File transcription example](#file-transcription-example)
+- [Volume metering](#volume-metering)
+  - [Volume metering example](#volume-metering-example)
 - [Polyfilling the Web SpeechRecognition API](#polyfilling-the-web-speechrecognition-api)
 - [Muting the beep sound on Android](#muting-the-beep-sound-on-android)
 - [Improving accuracy of single-word prompts](#improving-accuracy-of-single-word-prompts)
@@ -538,6 +540,43 @@ function TranscribeAudioFile() {
 }
 ```
 
+## Volume metering
+
+You can use the `volumeChangeEventOptions.enabled` option to enable volume metering. This will emit a `volumechange` event with the current volume level (between -2 and 10) as a value. You can use this value to animate the volume metering of a user's voice, or to provide feedback to the user about the volume level.
+
+### Volume metering example
+
+![Volume metering example](./images/volume-metering.gif)
+
+See: (link) for a complete example that involves using `react-native-reanimated` to animate the volume metering.
+
+````tsx
+import { ExpoSpeechRecognitionModule } from "expo-speech-recognition";
+
+function VolumeMeteringAvatar() {
+
+  useSpeechRecognitionEvent("volumechange", (event) => {
+    console.log("Volume changed to:", event.value);
+  });
+
+  const handleStart = () => {
+    ExpoSpeechRecognitionModule.start({
+      lang: "en-US",
+      volumeChangeEventOptions: {
+        enabled: true,
+        intervalMillis: 300,
+      },
+    });
+  };
+
+  return (
+    <View>
+      <Button title="Start" onPress={handleStart} />
+      <Text>Volume: {volume}</Text>
+    </View>
+  );
+}
+
 ## Polyfilling the Web SpeechRecognition API
 
 > [!IMPORTANT]
@@ -616,7 +655,7 @@ recognition.stop();
 
 // Immediately cancel speech recognition
 recognition.abort();
-```
+````
 
 ## Muting the beep sound on Android
 

example/App.tsx

@@ -72,10 +72,15 @@ export default function App() {
     continuous: true,
     requiresOnDeviceRecognition: false,
     addsPunctuation: true,
-    contextualStrings: ["Carlsen", "Ian Nepomniachtchi", "Praggnanandhaa"],
+    contextualStrings: [
+      "expo-speech-recognition",
+      "Carlsen",
+      "Ian Nepomniachtchi",
+      "Praggnanandhaa",
+    ],
     volumeChangeEventOptions: {
       enabled: false,
-      intervalMillis: 300,
+      intervalMillis: 100,
     },
   });
 

example/babel.config.js

@@ -1,5 +1,5 @@
 const path = require("path");
-module.exports = function (api) {
+module.exports = (api) => {
   api.cache(true);
   return {
     presets: ["babel-preset-expo"],

example/components/VolumeMeteringAvatar.tsx

@@ -8,34 +8,24 @@ import Animated, {
   withTiming,
   Easing,
   withSpring,
-  withDelay,
   withSequence,
 } from "react-native-reanimated";
 const avatar = require("../assets/avatar.png");
 
-const minScale = 1;
-const maxScale = 1.5;
+const MIN_SCALE = 1;
+const MAX_SCALE = 1.5;
 
 /**
  * This is an example component that uses the `volumechange` event to animate the volume metering of a user's voice.
  */
 export function VolumeMeteringAvatar() {
-  const haloScale = useSharedValue(minScale);
-  const pulseScale = useSharedValue(minScale);
+  const haloScale = useSharedValue(MIN_SCALE);
+  const pulseScale = useSharedValue(MIN_SCALE);
   const pulseOpacity = useSharedValue(0);
 
-  const haloAnimatedStyle = useAnimatedStyle(() => ({
-    transform: [{ scale: haloScale.value }],
-  }));
-
-  const pulseAnimatedStyle = useAnimatedStyle(() => ({
-    opacity: pulseOpacity.value,
-    transform: [{ scale: pulseScale.value }],
-  }));
-
   const reset = () => {
-    haloScale.value = minScale;
-    pulseScale.value = minScale;
+    haloScale.value = MIN_SCALE;
+    pulseScale.value = MIN_SCALE;
     pulseOpacity.value = 0;
   };
 
@@ -51,7 +41,7 @@ export function VolumeMeteringAvatar() {
     const newScale = interpolate(
       event.value,
       [-2, 10], // The value range is between -2 and 10
-      [minScale, maxScale],
+      [MIN_SCALE, MAX_SCALE],
       Extrapolation.CLAMP,
     );
 
@@ -61,38 +51,40 @@ export function VolumeMeteringAvatar() {
         damping: 15,
         stiffness: 150,
       }),
-      withTiming(minScale, {
+      withTiming(MIN_SCALE, {
         duration: 500,
         easing: Easing.linear,
       }),
     );
 
     // Animate the pulse (scale and fade out)
-    if (pulseScale.value < newScale) {
-      pulseScale.value = withSequence(
-        withTiming(maxScale, {
-          duration: 1000,
-          easing: Easing.out(Easing.quad),
-        }),
-        withTiming(minScale, {
-          duration: 300,
-          easing: Easing.linear,
-        }),
-      );
-      pulseOpacity.value = withSequence(
-        withTiming(1, { duration: 800 }),
-        withDelay(300, withTiming(0, { duration: 200 })),
-      );
+    if (pulseOpacity.value <= 0) {
+      pulseScale.value = MIN_SCALE;
+      pulseOpacity.value = 1;
+      pulseScale.value = withTiming(MAX_SCALE, {
+        duration: 1000,
+        easing: Easing.out(Easing.quad),
+      });
+      pulseOpacity.value = withTiming(0, { duration: 1000 });
     }
   });
 
+  const haloAnimatedStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: haloScale.value }],
+  }));
+
+  const pulseAnimatedStyle = useAnimatedStyle(() => ({
+    opacity: pulseOpacity.value,
+    transform: [{ scale: pulseScale.value }],
+  }));
+
   return (
     <View style={styles.container}>
       <View style={styles.pulseContainer}>
-        <Animated.View style={[styles.pulse, pulseAnimatedStyle]} />
+        <Animated.View style={[styles.halo, haloAnimatedStyle]} />
       </View>
       <View style={styles.pulseContainer}>
-        <Animated.View style={[styles.halo, haloAnimatedStyle]} />
+        <Animated.View style={[styles.pulse, pulseAnimatedStyle]} />
       </View>
       <View style={[styles.centered]}>
         <Image source={avatar} style={styles.avatar} />

example/ios/Podfile.lock

@@ -6,7 +6,7 @@ PODS:
     - ReactCommon/turbomodule/core
   - EXConstants (16.0.2):
     - ExpoModulesCore
-  - Expo (51.0.36):
+  - Expo (51.0.37):
     - ExpoModulesCore
   - ExpoAsset (10.0.10):
     - ExpoModulesCore
@@ -39,9 +39,9 @@ PODS:
     - ReactCommon/turbomodule/bridging
     - ReactCommon/turbomodule/core
     - Yoga
-  - ExpoSpeechRecognition (0.2.22):
+  - ExpoSpeechRecognition (0.2.23):
     - ExpoModulesCore
-  - EXSplashScreen (0.27.5):
+  - EXSplashScreen (0.27.6):
     - DoubleConversion
     - ExpoModulesCore
     - glog
@@ -1461,14 +1461,14 @@ SPEC CHECKSUMS:
   DoubleConversion: 76ab83afb40bddeeee456813d9c04f67f78771b5
   EXAV: afa491e598334bbbb92a92a2f4dd33d7149ad37f
   EXConstants: 409690fbfd5afea964e5e9d6c4eb2c2b59222c59
-  Expo: 51c2d7fee7a8c7195ac257c9f9503378800d334e
+  Expo: 67b60b3b80a3c8e9f3bcaaa84d06d140229a246d
   ExpoAsset: 323700f291684f110fb55f0d4022a3362ea9f875
   ExpoFileSystem: 80bfe850b1f9922c16905822ecbf97acd711dc51
   ExpoFont: 00756e6c796d8f7ee8d211e29c8b619e75cbf238
   ExpoKeepAwake: 3b8815d9dd1d419ee474df004021c69fdd316d08
   ExpoModulesCore: 260ee156852434da26e782bbb993093186c5aade
-  ExpoSpeechRecognition: 6ce34ee84af8950f0e472ba6f6b0b3def2553b2a
-  EXSplashScreen: a7e8d13c476f9937e39d654af4235758b567a1be
+  ExpoSpeechRecognition: 078201eb1fbae87409cfecba6176edc262f75121
+  EXSplashScreen: 10b116117c9bb6a272ba782706f21dadc23f44d9
   FBLazyVector: ac12dc084d1c8ec4cc4d7b3cf1b0ebda6dab85af
   fmt: 4c2741a687cc09f0634a2e2c72a838b99f1ff120
   glog: fdfdfe5479092de0c4bdbebedd9056951f092c4f