[blocked] feat: worklets support

.yarn/releases/yarn-4.5.0.cjs

@@ -922,4 +922,4 @@ is-windows/index.js:
    * Copyright © 2015-2018, Jon Schlinkert.
    * Released under the MIT License.
    *)
-*/
+*/

apps/common-app/package.json

@@ -14,11 +14,11 @@
     "react-native-audio-api": "workspace:*",
     "react-native-background-timer": "2.4.1",
     "react-native-gesture-handler": "2.28.0",
-    "react-native-reanimated": "4.0.2",
+    "react-native-reanimated": "^4.0.0",
     "react-native-safe-area-context": "5.6.0",
     "react-native-screens": "4.14.1",
     "react-native-svg": "15.12.1",
-    "react-native-worklets": "0.4.2"
+    "react-native-worklets": "^0.4.1"
   },
   "devDependencies": {
     "@babel/core": "^7.25.2",

apps/common-app/src/examples/Worklets/Worklets.tsx

@@ -0,0 +1,194 @@
+import { useEffect, useRef } from "react";
+import { Text, Button, View, StyleSheet } from 'react-native';
+import {
+  AudioContext,
+  AudioManager,
+  AudioRecorder,
+  RecorderAdapterNode,
+} from 'react-native-audio-api';
+import { Container } from "../../components";
+import { Extrapolation, useSharedValue } from "react-native-reanimated";
+import Animated, { 
+  useAnimatedStyle, 
+  withSpring,
+  interpolate,
+} from "react-native-reanimated";
+
+
+function Worklets() {
+    const SAMPLE_RATE = 16000;
+    const recorderRef = useRef<AudioRecorder | null>(null);
+    const aCtxRef = useRef<AudioContext | null>(null);
+    const recorderAdapterRef = useRef<RecorderAdapterNode | null>(null);
+
+    const bar0 = useSharedValue(0);
+    const bar1 = useSharedValue(0);
+    const bar2 = useSharedValue(0); // center bar
+    const bar3 = useSharedValue(0);
+    const bar4 = useSharedValue(0);
+
+    useEffect(() => {
+        AudioManager.setAudioSessionOptions({
+            iosCategory: 'playAndRecord',
+            iosMode: 'spokenAudio',
+            iosOptions: ['defaultToSpeaker', 'allowBluetoothA2DP'],
+        });
+
+        AudioManager.requestRecordingPermissions();
+        recorderRef.current = new AudioRecorder({
+            sampleRate: SAMPLE_RATE,
+            bufferLengthInSamples: 512,
+        });
+    }, []);
+
+    const start = () => {
+        if (!recorderRef.current) {
+            console.error("Recorder is not initialized");
+            return;
+        }
+
+        recorderRef.current.onAudioReadyWorklet((audioData: Float32Array, timestamp: number) => {
+            'worklet';
+
+            // Calculates RMS amplitude
+            let sum = 0;
+            for (let i = 0; i < audioData.length; i++) {
+                sum += audioData[i] * audioData[i];
+            }
+            const rms = Math.sqrt(sum / audioData.length);
+            const scaledAmplitude = Math.min(rms * 150, 1);
+
+            console.log(`RMS: ${rms}, Scaled: ${scaledAmplitude}`);
+
+            bar0.value = bar1.value;
+            bar1.value = bar2.value;
+            bar3.value = bar2.value;
+            bar4.value = bar3.value;
+            bar2.value = scaledAmplitude; 
+        });
+
+        aCtxRef.current = new AudioContext({ sampleRate: SAMPLE_RATE });
+        recorderAdapterRef.current = aCtxRef.current.createRecorderAdapter();
+        recorderAdapterRef.current.connect(aCtxRef.current.destination);
+        recorderRef.current.connect(recorderAdapterRef.current);
+        recorderRef.current.start();
+        console.log("Recording started");
+
+        if (aCtxRef.current.state === 'suspended') {
+            aCtxRef.current.resume();
+        }
+    }
+
+    const stop = () => {
+        if (!recorderRef.current) {
+            console.error("Recorder is not initialized");
+            return;
+        }
+        recorderRef.current.stop();
+        recorderAdapterRef.current = null;
+        aCtxRef.current = null;
+        console.log("Recording stopped");
+        bar0.value = 0;
+        bar1.value = 0;
+        bar2.value = 0;
+        bar3.value = 0;
+        bar4.value = 0;
+    }
+
+    const createBarStyle = (index: number) => {
+        return useAnimatedStyle(() => {
+            let amplitude = 0;
+
+            switch (index) {
+                case 0: amplitude = bar0.value; break;
+                case 1: amplitude = bar1.value; break;
+                case 2: amplitude = bar2.value; break;
+                case 3: amplitude = bar3.value; break;
+                case 4: amplitude = bar4.value; break;
+            }
+
+            const centerIndex = 2;
+            const distanceFromCenter = Math.abs(index - centerIndex);
+
+            const height = interpolate(
+                amplitude,
+                [0, 1],
+                [10, 200],
+                Extrapolation.CLAMP
+            );
+
+            const backgroundColor = interpolate(
+                amplitude,
+                [0, 0.5, 1],
+                [0, 0.5, 1],
+                Extrapolation.CLAMP
+            );
+
+            const barWidth = 40 - (distanceFromCenter * 5);
+            const opacity = 1 - (distanceFromCenter * 0.15);
+
+            return {
+                height: withSpring(height, { damping: 20, stiffness: 200 }),
+                width: barWidth,
+                backgroundColor: `rgba(${Math.floor(backgroundColor * 255)}, ${Math.floor((1 - backgroundColor) * 255)}, 100, ${opacity})`,
+            };
+        });
+    };
+
+    return (
+        <Container>
+            <Text style={styles.title}>Audio Worklets Visualizer</Text>
+            <Text style={styles.subtitle}>Speak into the microphone to see the animation</Text>
+
+            <View style={styles.visualizer}>
+                <View style={styles.barsContainer}>
+                    {Array.from({ length: 5 }, (_, index) => (
+                        <Animated.View
+                            key={index}
+                            style={[styles.bar, createBarStyle(index)]}
+                        />
+                    ))}
+                </View>
+            </View>
+
+            <Button onPress={start} title="Start Recording" />
+            <Button onPress={stop} title="Stop Recording" />
+        </Container>
+    );
+}
+
+const styles = StyleSheet.create({
+    title: {
+        fontSize: 20,
+        fontWeight: 'bold',
+        marginBottom: 10,
+        textAlign: 'center',
+    },
+    subtitle: {
+        fontSize: 14,
+        color: '#666',
+        marginBottom: 30,
+        textAlign: 'center',
+    },
+    visualizer: {
+        height: 250,
+        justifyContent: 'flex-end',
+        alignItems: 'center',
+        marginVertical: 30,
+        backgroundColor: '#f0f0f0',
+        borderRadius: 10,
+        padding: 20,
+    },
+    barsContainer: {
+        flexDirection: 'row',
+        alignItems: 'flex-end',
+        justifyContent: 'center',
+        gap: 8,
+    },
+    bar: {
+        borderRadius: 20,
+        minHeight: 10,
+    },
+});
+
+export default Worklets;

apps/common-app/src/examples/index.ts

@@ -9,6 +9,7 @@ import AudioVisualizer from './AudioVisualizer';
 import OfflineRendering from './OfflineRendering';
 import Record from './Record/Record';
 import PlaybackSpeed from './PlaybackSpeed/PlaybackSpeed';
+import Worklets from './Worklets/Worklets';
 
 type NavigationParamList = {
   Oscillator: undefined;
@@ -21,6 +22,7 @@ type NavigationParamList = {
   AudioVisualizer: undefined;
   OfflineRendering: undefined;
   Record: undefined;
+  Worklets: undefined;
 };
 
 export type ExampleKey = keyof NavigationParamList;
@@ -88,4 +90,10 @@ export const Examples: Example[] = [
     subtitle: 'Record audio',
     screen: Record,
   },
+  {
+    key: 'Worklets',
+    title: 'Worklets',
+    subtitle: 'Process audio on ui thread with worklet support',
+    screen: Worklets,
+  }
 ] as const;