Drawing WaveForms

[Bayramito]

Hello,

How to deal with arrays in Skia ? I was making a audio recorder with Svgs and Rects from react-native-svg but was wondering can we do this with Skia?

Here is my code, it's a entry level one just for testing purposes.

const HEIGHT = 60;
const WIDTH = Dimensions.get("screen").width;
const RECT_WIDTH = 3;
const GAP = 1;

const AudioVisualizer = ({levels}) => {
  const [startTime, setStartTime] = useState(Date.now());
  useEffect(() => {
    const interval = setInterval(() => {
      setStartTime(Date.now());
    }, 100);

    return () => clearInterval(interval);
  }, []);

  const xPos = index => {
   "worklet";

    const elapsedTime = (Date.now() - startTime) % 5000; // Loop every 5000ms
    const progress = elapsedTime / 5000; // Progress from 0 to 1
    return WIDTH - (index * (RECT_WIDTH + GAP) + progress * WIDTH);
  };
  return (
    <Canvas style={{height: HEIGHT, width: WIDTH}}>
      {levels.map((value, index) => {
        const x = xPos(index);
        const barHeight = aggressiveScale(value) * HEIGHT;
        const y = (HEIGHT - barHeight) / 2; 
        return <RoundedRect r={10} key={index} x={x} y={y} width={RECT_WIDTH} height={barHeight} color="black" />;
      })}
    </Canvas>
  );
};

export default AudioVisualizer;

const aggressiveScale = level => {
  const scaleFactor = 200;
  return Math.pow(level, 3) * scaleFactor;
};

The problem with that way is, rects are not sliding smoothly. Looks like Canvas not updated that often. BTW this is the hook where i generate the levels,

const useAudio = () => {
  const [recording, setRecording] = useState(false);
  const levels = useSharedValue([]); // LEVELS
  const [recordingTime, setRecordingTime] = useState(0);
  const [filePath, setFilePath] = useState(null);

  const startRecording = async () => {
    const permissionGranted = await requestPermissions();
    if (!permissionGranted) return;

    AudioRecord.init({
      sampleRate: 16000, // default 44100
      channels: 1, // 1 or 2, default 1
      bitsPerSample: 16, // 8 or 16, default 16
      wavFile: "test.wav", // default 'audio.wav'
    });

    AudioRecord.start();
    setRecording(true);
  };

  const stopRecording = async () => {
    if (recording) {
      const audioFile = await AudioRecord.stop();
      setFilePath(audioFile);
      console.log("Recording stopped and stored at", audioFile);
    }
    setRecording(false);
  };

  const toggleRecording = async () => {
    if (recording) {
      stopRecording();
    } else {
      startRecording();
    }
  };

  const updateLevel = async () => {
    if (!recording) return;

    await AudioRecord.on("data", data => {
      // handle the recorded data here, we could calculate the sound levels using data
      const db = calculateDbFromAudioBuffer(data); // implement your dB calculation logic here
      const linearValue = dBToLinear(db);

      levels.value = [linearValue, ...levels.value].slice(0, bufferSize);
    });
  };

  useEffect(() => {
    const interval = setInterval(updateLevel, 100);
    return () => clearInterval(interval);
  }, [recording]);

  useEffect(() => {
    let interval;
    if (recording) {
      interval = setInterval(() => {
        setRecordingTime(prevTime => prevTime + 1);
      }, 1000);
    } else {
      setRecordingTime(0);
    }
    return () => clearInterval(interval);
  }, [recording]);

  return {
    recording,
    levels,
    recordingTime,
    toggleRecording,
    filePath,
  };
};

useSharedValue example

IMG_6104.mov

setState example

IMG_6107.mp4

In this hook if I change levels from shared value to a state value, everything is smooth but performans is destroyed.
Any ideas how this could be done with Skia ? @william-candillon

How do we deal with array that are being updated so frequently ?