fix: removed convolver trimming and unnecesary rerender (#1019)

Author: mdydek

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

@@ -0,0 +1,197 @@
+import React, { FC, useCallback, useEffect, useRef, useState } from 'react';
+import { StyleSheet, Text } from 'react-native';
+import {
+  AudioContext,
+  AudioManager,
+  ConvolverNode,
+  GainNode,
+  AudioBufferSourceNode,
+  AudioBuffer,
+} from 'react-native-audio-api';
+
+import { Button, Container, Slider, Spacer } from '../../components';
+import { colors, layout } from '../../styles';
+
+const LABEL_W = 88;
+const IR = require('./ir.wav');
+const TRACK = require('./track.mp3');
+
+const ConvolverIR: FC = () => {
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [isReady, setIsReady] = useState(false);
+  const [gain, setGain] = useState(0.28);
+
+  const audioContextRef = useRef<AudioContext | null>(null);
+  const impulseRef = useRef<AudioBuffer | null>(null);
+  const bufferRef = useRef<AudioBuffer | null>(null);
+  const bufferSourceRef = useRef<AudioBufferSourceNode | null>(null);
+  const gainRef = useRef<GainNode | null>(null);
+  const convolverRef = useRef<ConvolverNode | null>(null);
+
+  const teardownGraph = useCallback(() => {
+    try {
+      bufferSourceRef.current?.stop(0);
+    } catch {
+      /* not started */
+    }
+    bufferSourceRef.current?.disconnect();
+    gainRef.current?.disconnect();
+    convolverRef.current?.disconnect();
+    bufferSourceRef.current = null;
+    gainRef.current = null;
+    convolverRef.current = null;
+  }, []);
+
+  useEffect(() => {
+    const ctx = new AudioContext();
+    audioContextRef.current = ctx;
+
+    const downloadIR = async () => {
+      const buffer = await ctx.decodeAudioData(IR);
+      const track = await ctx.decodeAudioData(TRACK);
+      impulseRef.current = buffer;
+      bufferRef.current = track;
+      setIsReady(true);
+    };
+
+    downloadIR().catch(() => {});
+
+    return () => {
+      teardownGraph();
+      impulseRef.current = null;
+      bufferRef.current = null;
+      ctx.close().catch(() => {});
+      audioContextRef.current = null;
+      AudioManager.setAudioSessionActivity(false).catch(() => {});
+    };
+  }, []);
+
+  const stopPlayback = useCallback(async () => {
+    const ctx = audioContextRef.current;
+    if (!ctx) {
+      return;
+    }
+    bufferSourceRef.current?.stop(0);
+    await AudioManager.setAudioSessionActivity(false);
+    setIsPlaying(false);
+  }, []);
+
+  const startPlayback = useCallback(
+    async (useConvolver: boolean) => {
+      const ctx = audioContextRef.current;
+      const ir = impulseRef.current;
+      const trackBuf = bufferRef.current;
+      if (!ctx || !trackBuf || isPlaying) {
+        return;
+      }
+      if (useConvolver && !ir) {
+        return;
+      }
+
+      AudioManager.setAudioSessionOptions({
+        iosCategory: 'playback',
+        iosMode: 'default',
+        iosOptions: [],
+      });
+      await AudioManager.setAudioSessionActivity(true);
+
+      if (ctx.state === 'suspended') {
+        await ctx.resume();
+      }
+
+      const source = ctx.createBufferSource();
+      source.buffer = trackBuf;
+
+      const g = ctx.createGain();
+      g.gain.value = gain;
+
+      if (useConvolver && ir) {
+        const convolver = ctx.createConvolver();
+        convolver.buffer = ir;
+        source.connect(g).connect(convolver).connect(ctx.destination);
+        convolverRef.current = convolver;
+      } else {
+        source.connect(g).connect(ctx.destination);
+        convolverRef.current = null;
+      }
+
+      bufferSourceRef.current = source;
+      gainRef.current = g;
+
+      source.start(ctx.currentTime + 0.1, 10);
+      setIsPlaying(true);
+    },
+    [gain, isPlaying],
+  );
+
+  const onPlayWithConvolver = useCallback(() => {
+    startPlayback(true).catch(() => {});
+  }, [startPlayback]);
+
+  const onPlayDry = useCallback(() => {
+    startPlayback(false).catch(() => {});
+  }, [startPlayback]);
+
+  const onStop = useCallback(() => {
+    stopPlayback().catch(() => {});
+  }, [stopPlayback]);
+
+  const onGainChange = useCallback((v: number) => {
+    setGain(v);
+    if (gainRef.current) {
+      gainRef.current.gain.value = v;
+    }
+  }, []);
+
+  return (
+    <Container centered>
+      <Text style={styles.title}>Reverb</Text>
+      <Spacer.Vertical size={10} />
+      <Spacer.Vertical size={24} />
+      <Button
+        title="Play (convolver)"
+        onPress={onPlayWithConvolver}
+        width={200}
+        disabled={!isReady || isPlaying}
+      />
+      <Spacer.Vertical size={12} />
+      <Button
+        title="Play (dry)"
+        onPress={onPlayDry}
+        width={200}
+        disabled={!isReady || isPlaying}
+      />
+      <Spacer.Vertical size={12} />
+      <Button title="Stop" onPress={onStop} width={200} disabled={!isPlaying} />
+      <Spacer.Vertical size={28} />
+      <Slider
+        label="Gain"
+        value={gain}
+        onValueChange={onGainChange}
+        min={0.02}
+        max={0.6}
+        step={0.01}
+        minLabelWidth={LABEL_W}
+      />
+    </Container>
+  );
+};
+
+export default ConvolverIR;
+
+const styles = StyleSheet.create({
+  title: {
+    color: colors.white,
+    fontSize: 18,
+    fontWeight: '600',
+    textAlign: 'center',
+  },
+  copy: {
+    color: colors.white,
+    fontSize: 14,
+    lineHeight: 20,
+    opacity: 0.85,
+    textAlign: 'center',
+    paddingHorizontal: layout.spacing * 2,
+  },
+});

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

@@ -0,0 +1 @@
+export { default } from './ConvolverIR';

apps/common-app/src/examples/ConvolverIR/ir.wav

@@ -13,6 +13,7 @@ import Record from './Record/Record';
 import Streaming from './Streaming/Streaming';
 import Worklets from './Worklets/Worklets';
 import AudioStream from './AudioTag/AudioTag';
+import ConvolverIR from './ConvolverIR';
 
 type NavigationParamList = {
   Oscillator: undefined;
@@ -28,6 +29,7 @@ type NavigationParamList = {
   Worklets: undefined;
   Streamer: undefined;
   AudioTag: undefined;
+  ConvolverIR: undefined;
 };
 
 export type ExampleKey = keyof NavigationParamList;
@@ -117,5 +119,11 @@ export const Examples: Example[] = [
     title: 'Audio Tag',
     Icon: icons.Tag,
     screen: AudioStream,
-  }
+  },
+  {
+    key: 'ConvolverIR',
+    title: 'Reverb Effect',
+    Icon: icons.AudioWaveform,
+    screen: ConvolverIR,
+  },
 ] as const;

apps/common-app/src/examples/ConvolverIR/track.mp3

@@ -1,10 +1,10 @@
 const { getDefaultConfig, mergeConfig } = require('@react-native/metro-config');
-
 const path = require('path');
 
 const monorepoRoot = path.resolve(__dirname, '../..');
 const appsRoot = path.resolve(monorepoRoot, 'apps');
 
+const defaultConfig = getDefaultConfig(__dirname);
 /**
  * Metro configuration https://reactnative.dev/docs/metro
  *
@@ -13,6 +13,9 @@ const appsRoot = path.resolve(monorepoRoot, 'apps');
 const config = {
   projectRoot: __dirname,
   watchFolders: [monorepoRoot, appsRoot],
+  resolver: {
+    assetExts: [...defaultConfig.resolver.assetExts, 'ogg', 'flac', 'opus'],
+  },
   /* we are rewriting requests because due to monorepo structure, the assets are found with '../../../' prefix
   and we redirect them to the correct path without relative prefixes */
   server: {
@@ -37,4 +40,4 @@ const config = {
   },
 };
 
-module.exports = mergeConfig(getDefaultConfig(__dirname), config);
+module.exports = mergeConfig(defaultConfig, config);

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

@@ -48,14 +48,9 @@ bool Convolver::init(size_t blockSize, const AudioArray &ir, size_t irLen) {
     return false;
   }
 
-  // Ignore zeros at the end of the impulse response because they only waste
-  // computation time
   _blockSize = blockSize;
   _trueSegmentCount =
       static_cast<size_t>((std::ceil(static_cast<float>(irLen) / static_cast<float>(_blockSize))));
-  while (irLen > 0 && ::fabs(ir[irLen - 1]) < 10e-3) {
-    --irLen;
-  }
 
   if (irLen == 0) {
     return true;

apps/fabric-example/metro.config.js

@@ -87,6 +87,9 @@ const Audio = React.forwardRef<AudioTagHandle, AudioProps>((props, ref) => {
     return effectiveMutedState ? 0 : (volumeState ?? volume);
   }, [effectiveMutedState, volumeState, volume]);
 
+  const effectiveVolumeRef = useRef(effectiveVolumeState);
+  effectiveVolumeRef.current = effectiveVolumeState;
+
   useEffect(() => {
     fileSourceRef.current?.setVolume(effectiveVolumeState);
   }, [effectiveVolumeState]);
@@ -127,10 +130,12 @@ const Audio = React.forwardRef<AudioTagHandle, AudioProps>((props, ref) => {
     setDuration(0);
     setPlaybackState('idle');
 
+    const initialVolume = effectiveVolumeRef.current;
+
     const node = context.context.createFileSource({
       source: nextSource,
       loop,
-      volume: effectiveVolumeState,
+      volume: initialVolume,
     });
     if (!node) {
       onError(new NotSupportedError('This file format requires FFmpeg build'));
@@ -148,7 +153,7 @@ const Audio = React.forwardRef<AudioTagHandle, AudioProps>((props, ref) => {
       },
     });
 
-    fileSource.setVolume(effectiveVolumeState);
+    fileSource.setVolume(initialVolume);
     fileSourceRef.current = fileSource;
     setDuration(nextDuration);
     onLoad();
@@ -158,16 +163,7 @@ const Audio = React.forwardRef<AudioTagHandle, AudioProps>((props, ref) => {
       setPlaybackState('playing');
       onPlay();
     }
-  }, [
-    context,
-    loop,
-    onError,
-    onEndedCallback,
-    onLoad,
-    onPlay,
-    autoPlay,
-    effectiveVolumeState,
-  ]);
+  }, [context, loop, onError, onEndedCallback, onLoad, onPlay, autoPlay]);
 
   useEffect(() => {
     if (!path) {